Error Page Hierarchy
404 — Not Found
- Acknowledge the error clearly: "This page doesn't exist."
- Offer: Search bar, popular pages, homepage link.
- Don't blame the user.
- Optional: brand-appropriate illustration.
500 — Server Error
- Acknowledge without technical jargon: "Something went wrong on our end."
- Offer: Retry button, status page link, support contact.
- Log the error automatically.
- Don't say "We're working on it" unless you actually are.
403 — Forbidden
- Explain why: "You don't have permission to view this page."
- Offer: Login link, request access button, contact admin.
Offline
- Detect offline state.
- Show cached content if available.
- "You're offline. Some features aren't available."
- Auto-retry when connection returns.
Principles
- Every error needs: What happened + What to do next.
- Use the brand voice. Error pages are touchpoints.
- Never show stack traces or error codes to users.
- Include a way to report the issue.