What are Error Boundaries in React?
Learn what React error boundaries are, how getDerivedStateFromError and componentDidCatch work, what they catch, with code examples and interview questions.
Expected Interview Answer
An Error Boundary is a React component that catches JavaScript errors thrown during rendering, in lifecycle methods, and in the constructors of its child tree, then displays a fallback UI instead of letting the whole app crash to a blank screen.
Error boundaries are implemented as class components that define getDerivedStateFromError (to render a fallback) and/or componentDidCatch (to log the error). They only catch errors below them in the tree — not in event handlers, asynchronous code, server-side rendering, or the boundary itself. You place them strategically so that a failure in one section degrades gracefully while the rest of the app keeps working.
- Prevents one component crash from breaking the whole app
- Shows a friendly fallback instead of a white screen
- Central place to log errors for monitoring
- Isolates failures to a section of the UI
- Improves resilience and user trust
- Complements Suspense for load failures
AI Mentor Explanation
An error boundary is like a boundary rope with a fielder ready to stop a wild shot from reaching the crowd. If one batter's stroke goes catastrophically wrong, the fielder contains it so the match continues instead of being abandoned. It catches the failure in that part of the field and shows a controlled outcome, keeping the rest of the game running smoothly rather than ending play entirely.
Step-by-Step Explanation
Step 1
Create a class component
Error boundaries must be class components — hooks cannot yet catch render errors directly.
Step 2
Add getDerivedStateFromError
Implement this static method to update state and trigger the fallback render when a child throws.
Step 3
Add componentDidCatch
Use it to log the error and component stack to your monitoring service.
Step 4
Render a fallback
When the error state is set, return a friendly fallback UI instead of children.
Step 5
Wrap the risky subtree
Place the boundary around routes or widgets so a failure there does not take down the whole app.
What Interviewer Expects
- Knows error boundaries must be class components
- Can name getDerivedStateFromError and componentDidCatch
- Understands what errors are NOT caught (event handlers, async, SSR)
- Explains strategic placement around subtrees
- Mentions logging errors for monitoring
Common Mistakes
- Thinking a functional component with hooks can be an error boundary
- Expecting it to catch errors in event handlers or async code
- Wrapping the whole app in one boundary so any error blanks everything
- Forgetting to log the error in componentDidCatch
- Assuming it catches errors thrown by the boundary itself
Best Answer (HR Friendly)
“An error boundary is a special React component that catches crashes in part of the app and shows a friendly message instead of a blank white screen. It keeps the rest of the page working even when one section breaks, and lets developers log the problem.”
Code Example
import { Component } from 'react'
class ErrorBoundary extends Component {
state = { hasError: false }
static getDerivedStateFromError() {
return { hasError: true }
}
componentDidCatch(error, info) {
logToService(error, info.componentStack)
}
render() {
if (this.state.hasError) {
return <h2>Something went wrong.</h2>
}
return this.props.children
}
}
export default ErrorBoundary<ErrorBoundary>
<Dashboard />
</ErrorBoundary>Follow-up Questions
- Which errors do error boundaries NOT catch?
- Why must error boundaries be class components?
- What is the difference between getDerivedStateFromError and componentDidCatch?
- How do you catch errors in event handlers?
- How do error boundaries work together with Suspense?
MCQ Practice
1. Which method lets an error boundary render a fallback UI?
getDerivedStateFromError runs during rendering and returns new state that triggers the fallback UI.
2. Which of these does an error boundary NOT catch?
Errors thrown inside event handlers are not caught by error boundaries; use a try/catch there instead.
3. What kind of component must an error boundary be?
Error boundaries rely on getDerivedStateFromError and componentDidCatch, which only exist on class components.
Flash Cards
What is an error boundary? — A class component that catches render/lifecycle errors in its child tree and shows a fallback UI.
Which two methods define one? — getDerivedStateFromError (render fallback) and componentDidCatch (log the error).
What does it NOT catch? — Errors in event handlers, async code, SSR, and the boundary itself.
Why class-only? — The required lifecycle methods for catching errors have no hook equivalent yet.