What are error boundaries and how do they differ from try-catch?

Question

Accepted Answer

**Error boundaries** catch errors in React component tree, while try-catch handles imperative code. **Error boundary:** ```tsx import { Component, ErrorInfo, ReactNode } from "react"; interface Props { children: ReactNode; fallback?: ReactNode; } interface State { hasError: boolean; error: Error | null; } class ErrorBoundary extends Component { state: State = { hasError: false, error: null }; static getDerivedStateFromError(error: Error): State { return { hasError: true, error }; } componentDidCatch(error: Error, info: ErrorInfo) { logErrorToService(error, info.componentStack); } render() { if (this.state.hasError) { return this.props.fallback ||

Something went wrong

; } return this.props.children; } } // Usage }> ``` **Key differences:** | Feature | Error Boundary | try-catch | |---------|----------------|----------| | Handles | Render errors | Imperative code | | Scope | Component tree | Code block | | Recovery | Shows fallback UI | Must handle manually | | Works with | Async, hooks, lifecycle | Synchronous code | **What error boundaries catch:** - Rendering errors - Lifecycle method errors - Constructor errors **What they DON'T catch:** - Event handlers (use try-catch) - Async code (setTimeout, fetch) - Server-side rendering - Errors in the boundary itself **Best practices:** - Place at page/feature level - Provide meaningful fallback - Log errors to monitoring service

React: What are error boundaries and how do they differ from try-catch?