Error boundaries are class components that catch JavaScript errors during rendering and lifecycle methods, displaying a fallback UI instead of crashing the entire app — but they don't catch errors in event handlers, async code, or SSR.
Error boundaries must be class components using getDerivedStateFromError (render fallback) and componentDidCatch (log errors). No hooks equivalent.
Catches errors during rendering, lifecycle methods, and constructors in the child component tree.
Event handlers, async code (setTimeout, promises), SSR, and errors in the boundary itself — use try/catch for these.
Wrap at route level and feature level for graceful degradation — don't wrap every individual component.
Provides fallbackRender, onReset, resetKeys, and useErrorBoundary hook — the practical standard for error boundaries in production.
When an error occurs during rendering in React, the entire component tree unmounts and the user sees a blank screen. Error boundaries prevent this by catching errors in their child tree and displaying a fallback UI instead.
An error boundary is a class component that implements one or both of these lifecycle methods:
static getDerivedStateFromError(error) — called during the render phase. Returns an object to update state, typically setting a flag like { hasError: true } to render fallback UI.componentDidCatch(error, errorInfo) — called during the commit phase. Used for side effects like logging the error to a monitoring service. errorInfo.componentStack provides the component stack trace.The component's render() method checks the error state and returns either the fallback UI or this.props.children.
try/catch inside handlerssetTimeout, fetch callbacks, promisesThis limitation exists because error boundaries are a rendering-phase mechanism. Event handlers and async code execute outside the render cycle.
Place error boundaries at strategic points:
Don't wrap every component — too granular and the many fallback UIs create a poor experience.
Since error boundaries must be class components (no hooks equivalent), the react-error-boundary library provides a convenient wrapper:
<ErrorBoundary fallback={<ErrorFallback />} onReset={() => reset()} resetKeys={[key]}>
<ChildComponent />
</ErrorBoundary>Features: fallbackRender for customized error UI with error details, onReset callback for retry logic, resetKeys to automatically reset when certain values change, and useErrorBoundary hook to programmatically trigger boundary errors from event handlers.
Use componentDidCatch or the library's onError prop to send errors to monitoring services (Sentry, LogRocket, Datadog). Include the component stack trace for debugging. In production, show a user-friendly message; in development, show the full error.
Error boundaries catch rendering errors and display fallback UI. They must be class components (getDerivedStateFromError + componentDidCatch). They do not catch event handlers, async code, or SSR errors — use try/catch for those. Place them at route and feature boundaries for graceful degradation. The react-error-boundary library provides the most practical API for real applications.
Fun Fact
Error boundaries were introduced in React 16 (2017) alongside a major change: unhandled errors now unmount the entire component tree. The React team argued that leaving a corrupted UI visible is worse than showing nothing — error boundaries are the mechanism for showing a better 'nothing'.