Finding the source element of an HTMX syntax error
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
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.