ErrorBoundary
React error boundary component that catches and displays errors gracefully.
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
children | ReactNode | Yes | - | Child components to wrap |
fallback | ReactNode | No | - | Custom fallback UI |
onError | (error: Error, errorInfo: ErrorInfo) => void | No | - | Error callback |
Usage
import { ErrorBoundary } from '@/components/system/ErrorBoundary';
<ErrorBoundary
onError={(error, errorInfo) => {
console.error('Caught error:', error);
}}
>
<YourComponent />
</ErrorBoundary>Features
- Error catching: Catches React errors in child tree
- User-friendly UI: Shows friendly error message
- Action buttons: Refresh page and Go Home buttons
- Error details: Shows error details in development mode
- Custom fallback: Supports custom fallback UI
Default UI
- Error message: "Something went wrong"
- Description with helpful text
- Refresh Page button (PrimaryFillButton)
- Go Home button (SecondaryFillButton)
- Error details (development only)
Notes
- Class component (required for error boundaries)
- Logs errors to console
- Calls onError callback if provided
- Error details only shown in development mode
- Uses Button component for actions