Error states are where trust lives or dies
404s, 500s, payment failures, and the recovery copy that decides whether the user blames you or themselves.
When things go right, users don't really see your product. When things go wrong, they see nothing else. Error states are the single most-remembered surface in any product, and they're almost universally treated as an afterthought.
The error hierarchy
- 01Validation errors. User typed something wrong. Recovery: tell them exactly what, inline.
- 02Permission errors. User isn't allowed. Recovery: explain why and offer a path (request access, switch account).
- 03Not-found errors. The thing they asked for doesn't exist. Recovery: search, similar items, go home.
- 04Server errors. Something on your end broke. Recovery: acknowledge it's your fault, give a status link, retry button.
- 05Network errors. Their internet flaked. Recovery: keep their work, retry when connection returns.
The copy rules
- No "oops." It's condescending in 2026.
- No HTTP codes alone. "500 Internal Server Error" tells the user nothing. "Something broke on our end, we've been notified" tells them what they need to know.
- Name the recovery. Every error needs an action button. "Try again", "Go home", "Contact support." An error without a recovery button is a dead end.
- Don't blame the user when it's not their fault. "You entered an invalid card" reads as accusation; "That card was declined, try another or contact your bank" reads as helpful.
404 pages
The 404 is the most-visited page on most websites that isn't the homepage. Don't waste it. Search input, top 3 popular links, contact link, optional brand humor, in that order. The brand humor is optional and should never delay the user from finding what they wanted.
Payment errors
Payment failures are the single highest-stakes error state in your product. If the user's card declines, the recovery flow has to be flawless.
- Preserve form state. Don't make them re-enter card details.
- Name the specific failure. "Insufficient funds" vs "declined by issuer" vs "expired" all have different recoveries. Stripe and the bank tell you which; pass it on.
- Offer alternatives. Different card, different payment method (Apple Pay, bank transfer), or contact support.
- Don't charge twice. If a payment failed but the user's bank still held funds, lead with that, "You may see a temporary hold; it'll clear in 5–7 days."
Build one
The error-empty entry has the anatomy and tuned prompts. Pair with toast notifications, most non-fatal errors live in toasts, not full-page states.
Keep reading
Empty states are your second chance at onboarding
The empty dashboard is the user's first real impression of your product. Most teams ship a shrug, here's how to ship a tutorial instead.
Auth flows that don't make users rage-quit
Magic links, social, passwords, passkeys. The actual data on what converts, and the small UX details that quietly halve drop-off.