What are Error Boundaries in React?

Question

Accepted Answer

An Error Boundary is a class component that catches JavaScript errors in its child component tree and renders a fallback UI instead of crashing the whole app. Without one, a thrown error during rendering unmounts the entire React tree. Two methods — static getDerivedStateFromError sets fallback state; componentDidCatch logs the error to a service. Catches — render errors, lifecycle errors, errors in constructors of children. Does NOT catch — event handlers, async code, server-side rendering, errors in the boundary itself. Use try/catch for those. Class components only — no hook equivalent yet; use the library react-error-boundary for a hook-friendly wrapper. Granularity — wrap each major route or widget separately so one failure doesn't blank the page. Pair with monitoring — ship caught errors to Sentry or similar. Know what Error Boundaries catch and what they don't (event handlers, async code). Mention react-error-boundary library as the practical solution. Strategic placement (around sections, not the whole app) shows production thinking.