This is primarily a debug Tool to work with HTMX. It is an HTMX-Extension that opens any failed HTMX Requests in a new browser Tab. This helps debugging your server responses.
<body hx-ext="err-page">
...
</body>You can configure some of the behaviour with the following configurations:
enabledeventNameisError()errorHandler()
This enables or disables the whole functionality. You can use this in conjunction with an environment variable, to disable the extension in production, and reenable to debug.
default: true
This is the event, on which the extension listens. When this event fires, the whole error handling takes place.
default: 'htmx:beforeOnLoad'
This is a function, that returns either true or false. It decides if the request should be handled as an error or not. It takes the htmx-event as a parameter.
When you change eventName, you may also change this function.
See the htmx documentation for the configured event.
default:
function(evt) {
return evt.detail.xhr.status >= 400;
}This is a function, that handles the request that isError() deemed as error. Per default, it opens a new browser tab, with the full html content of the errored response.
It also takes the htmx event as a parameter.
default:
function(evt) {
let tab = window.open('about:blank', '_blank');
tab.document.write(evt.detail.xhr.responseText);
tab.document.close();
}