Proposal: listening to all htmx errors #1529
Comments
|
I'm by no means a htmx developer, but recently had cause to read some of the source code. It seems there is a Line 1986 in e923482 In the source code, you will notice that this function sets an Line 2021 in e923482 In this function, two events are triggered for errors. One general event with type This means your third point is already implemented (but seems to be undocumented), you can do: htmx.on("htmx:error", function(evt) {
// print the error message
console.log(evt.detail.errorInfo.error);
});Unfortunately, the specific error, e.g. If you really do need to catch the specific error, then looks like you can implement it in a htmx extension which you apply to the body: <!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body hx-ext="catch">
<!-- force a 'htmx:responseError' event -->
<form hx-post="/non-existent-url" method="POST">
<button type="submit">Send</button>
</form>
<script src="https://unpkg.com/htmx.org@1.9.2"></script>
<script>
htmx.defineExtension('catch', {
onEvent: function (name, evt) {
// interested only in errors
if(evt.detail?.errorInfo?.error) {
// the general 'htmx:error' event
console.log({
type:evt.type,
info: evt.detail.errorInfo?.error
});
}
if(evt.detail?.error) {
// the specific event, e.g. 'htmx:responseError'
console.log({
type: evt.type,
info: evt.detail.error
});
}
}
});
</script>
</body>
</html>Again, looking at the source code, htmx will always traverse the DOM tree upwards so you are always guaranteed to receive the event. So overall, all 3 of your points are sort of already implemented, just need some tweaks to make it more efficient :) |
|
Thank you for detailed response! So far I've settled for catching the undocumented class HtmxError extends Error {
constructor(message, errorInfo) {
super(message);
this.name = this.constructor.name;
this.errorInfo = errorInfo; // Reporter is expected to support non-native Error attributes
}
}
// Turn htmx error events into usual uncaught errors which can be listened for in window (and thus will be reported).
// HACK: htmx:error is undocumented, see https://github.com/bigskysoftware/htmx/issues/1529.
window.addEventListener('htmx:error', (e) => {
throw new HtmxError(e.detail.errorInfo.error, e.detail.errorInfo);
});
Yes, it looks like it's impossible to programmatically figure out the exact error type on |
I want a single function to be called on any error event from htmx. Currently I have something like this:
But it's unreliable since in future htmx versions more error event types can be added or I can make a typo in the list.
How to listen to all htmx error events in a more reliable way?
Ideas off the top of my head:
htmx:beforeError.htmx.onError(callback).htmx:errorevent and add a field to it to distinguish between causes.The text was updated successfully, but these errors were encountered: