Setting to handle error response same as success

[mozey]

When the response status is >= 400, the htmx:responseError event must be used, see this comment

Wouldn't it make sense to have a setting where htmx will still process the response as usual even for error responses?

For example, say I make a requests like this

<button hx-get="/contact/123" hx-trigger="click">Load contact</button>

And the response from the server, with status code 404, is this

<p id="err" hx-swap-oob="true" class="error">Contact 123 not found</p>

I would like htmx to still process hx-swap-oob the same as status code 200

Also posted here

[Telroshan]

Hey, you might want to look into the response-targets extension, which could suit your needs here

[mozey]

@Telroshan Thanks for the link, I've actually already written my own version of hx-target-error, and this extension could work for me. It also has other features that might be useful.

I don't understand why the Hypermedia API reponse must be handled differently for error status codes?

Maybe there is a way to do this?

addEventListener("htmx:responseError", (e) => {
  // Handle event same as success code
  htmx.handle(e)
})

[Telroshan]

There was discussion to add a similar feature to the lib's core but it didn't make it through.

However, please note htmx 2 will come with a responseHandling config property that will allow you to swap errors by default (opt-in). (It seems we have forgotten to add documentation for this feature yet, so bear with me for the link to the source code directly)

[silmeth]

The main page of the docs also has a section on Modifying swapping behavior with events where it’s recommended to use the htmx::beforeSwap event, setting evt.detail.shouldSwap = true; to make it it processed normally. You can also which status codes should be treated this way.

(Myself, I’d still prefer to be able to declare any response should be handled directly in the triggering element with an attribute than writing a snippet of custom JS, though – but adding a simple even handler isn’t too bad)

[mozey]

@silmeth Thanks for the tip, to display errors by default, I'm setting shouldSwap as per the docs

addEventListener("htmx:beforeSwap", (e) => {
  if (e.detail.xhr.status >= 400) {
    e.detail.shouldSwap = true
  }
})

To override where the error is displayed, I can set hx-target-error from the response-targets extension