Include target selector in htmx:oobErrorNoTarget event and error log (#3644)

Author: RensDimmendaal

src/htmx.js

@@ -1508,7 +1508,7 @@ var htmx = (function() {
       oobElement.parentNode.removeChild(oobElement)
     } else {
       oobElement.parentNode.removeChild(oobElement)
-      triggerErrorEvent(getDocument().body, 'htmx:oobErrorNoTarget', { content: oobElement })
+      triggerErrorEvent(getDocument().body, 'htmx:oobErrorNoTarget', { content: oobElement, target: selector })
     }
     return oobValue
   }
@@ -3111,7 +3111,7 @@ var htmx = (function() {
       htmx.logger(elt, eventName, detail)
     }
     if (detail.error) {
-      logError(detail.error)
+      logError(detail.error + (detail.target ? ', ' + detail.target : ''))
       triggerEvent(elt, 'htmx:error', { errorInfo: detail })
     }
     let eventResult = elt.dispatchEvent(event)

test/attributes/hx-swap-oob.js

@@ -348,14 +348,14 @@ describe('hx-swap-oob attribute', function() {
     })
   }
 
-  it.skip('triggers htmx:oobErrorNoTarget when no targets found', function(done) {
-    // this test fails right now because when targets not found it returns an empty array which makes it miss the event as it should be if (targets.length)
+  it('triggers htmx:oobErrorNoTarget when no targets found', function(done) {
     this.server.respondWith('GET', '/test', "Clicked<div id='nonexistent' hx-swap-oob='true'>Swapped</div>")
     var div = make('<div hx-get="/test">click me</div>')
 
     // Define the event listener function so it can be removed later
     var eventListenerFunction = function(event) {
       event.detail.content.innerHTML.should.equal('Swapped')
+      event.detail.target.should.equal('#nonexistent')
       document.body.removeEventListener('htmx:oobErrorNoTarget', eventListenerFunction)
       done()
     }

www/content/events.md

@@ -384,6 +384,7 @@ in the DOM to switch with.
 ##### Details
 
 * `detail.content` - the element with the bad oob `id`
+* `detail.target` - the bad CSS selector
 
 ### Event - `htmx:onLoadError` {#htmx:onLoadError}