Skip to main content
An error message is a touchpoint at the worst moment. A good one turns a frustrating experience into a recoverable one; a bad one converts a small failure into an abandoned session.

Structure

Answer three questions:
  1. What happened — describe the problem plainly.
  2. Why — give context, if context helps.
  3. What to do next — a clear action.

Tone

  • Calm — errors are normal; do not alarm.
  • Helpful — focus on the fix, not the cause.
  • Honest — if you do not know why, say so.
  • Brief — two sentences where possible.

Do not blame the reader

Do not use jargon

Patterns by type

Validation

Show inline, beside the field that needs attention, using FormMessage for consistent styling.

Network

Permission

Not found

Server

Implementation

Form validation

Put the message in the schema, not in the component. One definition, one wording, everywhere the field appears.

Toasts

Error boundaries

For a component-level crash, the boundary renders the recovery UI:
The boundary also logs the failure through the observability library, so a user-facing message and an operator-facing log come from one place. See error boundaries.

Examples

Good

Bad