How do you handle HTTP errors?

Just curious because when I used HTMX I didn't enjoy this part.

I like to return errors as text/plain and I have a global event handler for failed requests that throws up a dialog element. That takes care of most things.

Where appropriate, I use an extension that introduces hx-target-error and hx-swap-error, so I can put the message into an element. You can even use the CSS :empty selector to animate the error message as it appears and disappears.

Usually the default behavior, keeping the form as-is, is what you want, so users don’t lose their input and can just retry.

▲

adamzwasserman 4 days ago | parent | prev [-]

Honestly? I never think about it. I've never had to. What did you run into? Curious what the pain point was.

▲

yellow_lead 4 days ago | parent [-]

I had a site where the user can upload a file < 5MB. There may be a way to check this on the frontend, but for security reasons, it has to be checked on the backend too.

If it exceeds it, I returned 400. I had to add an event listener to check for the code (htmx:afterRequest) and show an alert(), but this gets difficult to manage if there's multiple requests to different endpoints on the page. Looking at it now, maybe I should have configured HTMX to swap for 4xx.

▲

MrPowerGamerBR 4 days ago | parent | next [-]

I have something similar on my website, and my solution was to make server driven modal/toast responses.

Allow the server to return a modal/toast in the response and, in your frontend, create a "global" listener that listens to `htmx:afterRequest` and check if the response contains a modal/toast. If it does, show the modal/toast. (or, if you want to keep it simple, show the content in an alert just like you already do)

This way you create a generic solution that you can also reuse for other endpoints too, instead of requiring to create a custom event listener on the client for each endpoint that may require special handling.

If you are on htmx's Discord server, I talked more about it on this message: https://discord.com/channels/725789699527933952/909436816388...

At the time I used headers to indicate if the body should be processed as a trigger, due to nginx header size limits and header compression limitations. Nowadays what I would do is serialize the toast/modal as a JSON inside the HTML response itself then, on `htmx:afterRequest`, parse any modals/toasts on the response and display them to the user.

▲

yellow_lead 4 days ago | parent [-]

Good idea, thanks for sharing! Nice design also

	▲	adamzwasserman 3 days ago \| parent [-]
		hx-trigger in the response header would handle that cleanly. Fires an event client-side; one global handler shows the error. Similar to wvbdmp's approach but without needing the extension

▲

yawaramin 3 days ago | parent | prev [-]

See https://dev.to/yawaramin/handling-form-errors-in-htmx-3ncg