What are error boundaries and what do they catch?

Question

Accepted Answer

An **error boundary** is a component that catches JavaScript errors thrown **during rendering** in its child tree, shows a fallback UI instead of crashing the whole app, and can log the error. ```jsx class ErrorBoundary extends React.Component { state = { hasError: false }; static getDerivedStateFromError() { return { hasError: true }; // render the fallback on next render } componentDidCatch(error, info) { logToService(error, info); // side effect: report it } render() { return this.state.hasError ? : this.props.children; } } // wrap an independent section so its failure doesn't blank the page: ``` ## What it catches — and what it doesn't ✅ Catches: errors in **render**, in **lifecycle methods**, and in constructors of the components below it. ❌ Does **not** catch: - Errors in **event handlers** (use a normal `try/catch` there). - **Async** code (promises, `setTimeout`) — they're outside the render flow. - Errors in the boundary itself, or during **SSR**. ## Practical notes - Error boundaries must currently be **class components** (or use the `react-error-boundary` library for a hook-friendly API). - Place several boundaries around independent sections (widgets, routes) so one failing widget doesn't take down everything — a single top-level boundary turns any error into a fully blank page.