error-boundary

# Error Boundary Patterns React error boundary hierarchy and graceful degradation patterns. ## Error Boundary Component ```typescript // Class-based (React requirement for componentDidCatch) interface ErrorBoundaryProps { children: React.ReactNode fallback?: React.ComponentType<FallbackProps> onError?: (error: Error, info: React.ErrorInfo) => void } interface ErrorBoundaryState { error: Error | null } export interface FallbackProps { error: Error reset: () => void } export class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> { state: ErrorBoundaryState = { error: null } static getDerivedStateFromError(error: Error): ErrorBoundaryState { return { error } } componentDidCatch(error: Error, info: React.ErrorInfo) { console.error('[ErrorBoundary]', error, info.componentStack) this.props.onError?.(error, info) } reset = () => this.setState({ error: null }) render() { if (this.state.error) { const Fallback = this.props.fallback ?? DefaultFallback return <Fallback error={this.state.error} reset={this.reset} /> } return this.props.children } } // react-error-boundary library (recommended — battle-tested) // npm install react-error-boundary import { ErrorBoundary } from 'react-error-boundary' <ErrorBoundary FallbackComponent={MyFallback} onError={(error, info) => reportToSentry(error, info)} onReset={() => queryClient.clear()} > <App /> </ErrorBoundary> ``` ## Error Bound...