Error Patterns

← Overview

Banner Errors

Click a button to trigger a server error. The error banner swaps OOB into #error-status at the top of the page. Includes Report Issue and contextual recovery controls.

Inline Form Errors

Submit with empty or invalid fields to see inline error rendering. The server returns a 422 with the error swapped into the form's error target.

OOB Error Swap

The server returns a success component alongside an OOB error swap. The error banner appears in #error-status while the primary content updates normally.

Retry with Recovery

Simulates a flaky endpoint. First request fails with a retry button; clicking retry succeeds. Demonstrates server-driven error recovery via hypermedia controls.

Banner

OOB swap to #error-status

Global error banner with dismiss, back, home, and report issue controls.

Inline

hx-target on form

Validation errors rendered inline next to the form that caused them.

OOB

Component + OOB error

Primary content swaps normally; error appears out-of-band.

Retry

Control with hx-get

Failed response includes a retry button that re-issues the request.

Report

POST /report-issue

Report Issue button posts to server; HX-Trigger fires a browser alert.

Copy ID

navigator.clipboard

Request ID has a copy-to-clipboard icon for easy bug reporting.

Settings