Error Boundary UI Design
How Meridian renders crash screens, fallback states, and recovery paths when the loader or dashboard encounters a fatal error.
Principles
- Never white-screen. Every error path renders a branded fallback.
- Preserve context. Show what the user was doing and what went wrong.
- Offer recovery. Retry, restart, or contact support — always one click away.
Anatomy
Something went wrong
The loader encountered an unexpected state.
Error code
INTEGRITY_CHECK_FAILED
Variants
License expired
Full-screen overlay with renewal link and grace-period countdown.
Network timeout
Inline banner with retry button and offline-cache indicator.
Integrity failure
Red-tinted modal with hash mismatch details and support CTA.
Unknown fatal
Minimal branded screen with session ID for support triage.
Implementation notes
All error boundaries live inside a shared ErrorShell component that enforces the Meridian brand lock — violet accent, pink highlights, dark background. The shell accepts an error code, human-readable message, and an optional recovery action. Never expose stack traces or internal paths to the user.