A React class component that catches JavaScript errors in child components and displays a fallback UI instead of crashing the entire application.
## Key Components
- **ErrorBoundary** - Main class component that implements React's error boundary pattern
- **ErrorBoundaryProps** - Interface defining `fallback` (error UI) and `children` props
- **ErrorBoundaryState** - Interface tracking the error state with `hasError` boolean
- **getDerivedStateFromError** - Static method that updates state when an error occurs
- **componentDidCatch** - Lifecycle method for logging error details to console
## Usage Example
```typescript
import { ErrorBoundary } from './error-boundary'
function App() {
return (
Something went wrong!
Please refresh the page or try again later.
}
>
)
}
// Wrap components that might throw errors
function ProfilePage() {
return (
Failed to load profile}>
)
}
```
The error boundary automatically catches errors in child components during rendering, lifecycle methods, and constructors, displaying the fallback UI while logging error details for debugging.