Loading...
See how React error boundaries work with an interactive visualization. Watch errors propagate up the component tree, getDerivedStateFromError trigger, fallback UI render, and recovery patterns step by step.
Loading visualization...
Error boundaries are React class components that catch JavaScript errors in their child component tree during rendering, lifecycle methods, and constructors. They display a fallback UI instead of crashing the entire application.
An error boundary is a class component that implements getDerivedStateFromError, componentDidCatch, or both. When a child component throws during render, React catches the error and delegates it to the nearest boundary up the tree. The boundary then renders fallback UI instead of the broken subtree.
getDerivedStateFromError is a static method called during the render phase. It receives the error and returns an object to update state. componentDidCatch is called during the commit phase and receives both the error and an info object containing the component stack trace. Use it for side effects like logging.
Error boundaries only catch errors in the React render path: component render methods, lifecycle methods, and constructors. They do not catch errors in event handlers, asynchronous code (setTimeout, promises), server-side rendering, or errors thrown in the boundary itself.
Interview framing: define Error Boundaries in one sentence, then explain one concrete runtime behavior and one common pitfall with a short code example.
Error boundaries only catch errors during the render and commit phases. Errors in onClick, onChange, or other event handlers are not caught by boundaries.
Fix: Use standard try/catch inside event handlers. For async errors, handle rejections with .catch() or try/catch in async functions.
One root-level boundary replaces the entire UI on any error. Users lose all context and functionality when a small part of the app fails.
Fix: Place granular boundaries around independent sections: sidebar, main content, individual widgets. This way, a failure in one section leaves the rest functional.
There is no hook equivalent for getDerivedStateFromError or componentDidCatch. Function components cannot be error boundaries (as of React 19).
Fix: Write a reusable ErrorBoundary class component or use the react-error-boundary library, which wraps the class API with a convenient component and hook interface.
Common interview prompts with concise model answers.
Error boundaries do not catch errors in event handlers, asynchronous code (setTimeout, requestAnimationFrame, promises), server-side rendering, or errors thrown in the error boundary itself. For these cases, use try/catch or promise .catch() handlers.
Reset the boundary's hasError state. This can be done with a retry button that calls setState, or by passing a key prop that changes when the error condition might be resolved. Libraries like react-error-boundary provide resetKeys for automatic recovery when specific values change.
getDerivedStateFromError and componentDidCatch are lifecycle methods that need to intercept the React render cycle at specific points. React has not yet provided hook equivalents for these interception points. The react-error-boundary library provides a useErrorBoundary hook, but it still uses a class component internally.
Continue with these concepts to strengthen your mental model.
class ErrorBoundary extends React.Component { state = { hasError: false }; static getDerivedStateFromError(error) { return { hasError: true }; } componentDidCatch(error, info) { logToService(error, info); } render() { if (this.state.hasError) { return <h2>Something went wrong.</h2>; } return this.props.children; }}waiting
no boundaries