Error boundary / 500 page
The failure surface for an unexpected server or client crash, which must not lose the user's work or their trust.
System & Edge States · 8 checks · 5 resources
Before you ship
8- 01Plain-language statement that the failure is ours, not the user's input
- 02Retry action that re-attempts only the failed unit — the component or request, not a full page reload where a boundary can recover locally
- 03Error reference identifier displayed and copyable — the same ID present in server logs, so support can trace it
- 04Escape routes — links to the previous page, the dashboard, and the status page
- 05Scoped boundary — a crash in one panel does not blank the entire application shell
- 06Unsaved state preserved where the failure is client-side — draft content retained in local storage and offered on recovery
- 07Automatic report with an opt-in description field — telemetry sent without the user having to file a ticket
- 08No stack traces, internal hostnames or SQL in the user-facing message
Resources that help you build this
5- Impeccable · Design vocabulary and anti-slop detector for AI coding agents
- Flowbite · 56+ MIT Tailwind components with vanilla-JS behaviour, plus a paid 450+ block library
- Open Doodles · 33 CC0 hand-drawn figure illustrations as direct SVG, PNG and GIF downloads
- unDraw · ~1,760 recolourable SVG illustrations, free commercially, no attribution
- Watermelon UI · MIT shadcn registry: 131 animated components, 187 page blocks, 30 base primitives