Finding the source element of an HTMX syntax error

Tags:

I really like HTMX. But its error reporting is severely lacking. For example, typos or wrong keywords in hx-trigger or other hx- attributes do only result in a nondescript console entry and a stack trace:

htmx:syntax:error

htmx:syntax:error stacktrace

The HTMX documentation suggests only source-diving as a way to find where the attribute parser chokes. While this works, it is not convenient. I have to switch from the minified HTMX library to the development version, and then set a breakpoint on the logging routine, and from there work my way backwards to the origin of the error. Which is most of the time a typo or wrong keyword in an attribute.

Luckily, HTMX can invoke a callback on the htmx:syntax:error event, so we can list the offending elements in the console and make them easily clickable:

htmx.on("htmx:syntax:error", (elt) => { console.log("htmx.syntax.error",elt)});

This still does not report the offending hx- attribute, and also does not tell us, what keyword was wrong or where the expression went bad, but it is a lot closer and does not require us to go source diving.