What Are Error Boundaries in React?
Learn what React error boundaries are, how getDerivedStateFromError works, and what errors they cannot catch.
Expected Interview Answer
An error boundary is a React component that catches JavaScript errors thrown anywhere in its child component tree during rendering, in lifecycle methods, or in constructors, logs them, and displays a fallback UI instead of letting the whole app crash to a blank screen.
You implement an error boundary as a class component that defines the static getDerivedStateFromError lifecycle method to update state and render a fallback UI, and typically also componentDidCatch to log the error and its stack info to a monitoring service; there is currently no hook equivalent, so error boundaries must be class components, though libraries like react-error-boundary wrap this in a component you can use declaratively. Wrapping a section of the tree in an error boundary means an unhandled error in that section only takes down that section, showing the fallback in its place, while the rest of the app keeps working normally, which is far better than one broken widget crashing the entire page. Error boundaries specifically do not catch errors inside event handlers, since those already run in a normal try/catch-friendly context, nor do they catch errors in asynchronous code like setTimeout or fetch callbacks, or errors during server-side rendering, or errors thrown inside the boundary component itself. That is why they are usually placed strategically around independent, isolated sections of the UI, such as a single widget or route, so a failure is contained rather than propagating up.
- Prevents a single component error from crashing the entire application
- Provides a clean fallback UI instead of a blank white screen on failure
- Isolates failures to a specific section of the UI when placed strategically
- Gives a hook to log errors to a monitoring service via componentDidCatch
AI Mentor Explanation
An error boundary is like a stadium’s electrical system having a circuit breaker on each individual stand instead of one master switch for the whole ground. If a fault occurs in the north stand’s wiring, only that stand’s lights go dark and switch to emergency lighting, while the rest of the stadium keeps functioning normally for the ongoing match. The breaker also logs which circuit tripped so engineers can investigate later. That contained, section-scoped failure handling is exactly what an error boundary provides for a part of a React tree.
Step-by-Step Explanation
Step 1
Define a class component boundary
Implement static getDerivedStateFromError to flip state and render a fallback UI.
Step 2
Log the error
Implement componentDidCatch(error, info) to report the error and stack/component trace to a monitoring service.
Step 3
Wrap the target subtree
Place the boundary around an isolated, independent section of the UI, like a widget or route.
Step 4
Render fallback on failure
When a descendant throws during render/lifecycle, only that boundary shows its fallback; the rest of the app keeps working.
What Interviewer Expects
- Understanding that error boundaries must be class components (no hook equivalent yet)
- Knowledge of getDerivedStateFromError vs componentDidCatch and their roles
- Clear list of what error boundaries do NOT catch: event handlers, async code, SSR, errors in the boundary itself
- Sensible strategy for where to place boundaries (isolated widgets/routes, not just one at the root)
Common Mistakes
- Assuming error boundaries catch errors in event handlers or async callbacks
- Trying to implement an error boundary as a function component without a library
- Placing only a single boundary at the app root, so any failure blanks the entire UI
- Forgetting to log the error in componentDidCatch, losing visibility into production failures
Best Answer (HR Friendly)
“Error boundaries are React components that catch errors happening inside their child components and show a fallback message instead of letting the whole app crash. I usually place them around independent sections, like a single widget or a page, so if that one part breaks, users still see the rest of the app working normally, and I get the error logged so I can fix it.”
Code Example
class ErrorBoundary extends React.Component {
constructor(props) {
super(props)
this.state = { hasError: false }
}
static getDerivedStateFromError(error) {
return { hasError: true }
}
componentDidCatch(error, info) {
logErrorToService(error, info.componentStack)
}
render() {
if (this.state.hasError) {
return <p>Something went wrong loading this widget.</p>
}
return this.props.children
}
}
// Usage: isolate a risky widget so it cannot crash the whole page
<ErrorBoundary>
<RecommendationsWidget />
</ErrorBoundary>Follow-up Questions
- Why do error boundaries currently have to be class components?
- What kinds of errors do error boundaries NOT catch, and how do you handle those instead?
- How does react-error-boundary simplify using this pattern in a functional codebase?
- Where in an app would you strategically place multiple error boundaries, and why?
MCQ Practice
1. Which lifecycle method renders the fallback UI in an error boundary?
getDerivedStateFromError updates state so the next render shows the fallback UI.
2. What do error boundaries NOT catch?
Event handler errors run outside React's render cycle, so error boundaries do not catch them.
3. What must an error boundary component be built as?
There is currently no hook equivalent, so error boundaries must be class components (or use a wrapping library).
Flash Cards
What is an error boundary? — A component that catches render/lifecycle errors in its children and shows a fallback UI.
Key lifecycle methods? — getDerivedStateFromError (render fallback) and componentDidCatch (log the error).
What do they NOT catch? — Event handler errors, async callback errors, SSR errors, and errors in the boundary itself.
Must be built as? — A class component — there is no hook equivalent yet.