Error Boundaries
The docs site wraps pages in a custom error boundary so runtime failures render a branded recovery UI instead of a generic crash.
Core pieces
- DocsErrorBoundary.tsx
- PageError.tsx
- ErrorShellFullPage.tsx
- ErrorShellInline.tsx
- ErrorShell.module.css
Behavior
| Component | Purpose |
|---|---|
DocsErrorBoundary | Top-level boundary using react-error-boundary |
PageError | Action-driven fallback UI with reset + navigation options |
ErrorShellFullPage | Full-page branded shell with animated background |
ErrorShellInline | Compact inline error message for localized failures |
Usage pattern
The boundary uses fallbackRender to show PageError and logs the error to the console for debugging.
If you need an inline error, use ErrorShellInline in the component itself instead of throwing to the boundary.
Sample UI
Full-page error shell
Inline error shell
Inline error boundary
Last updated on