Error Boundaries
Implement class-based Error Boundaries with componentDidCatch and getDerivedStateFromError to prevent uncaught render errors from crashing the entire app.
Error Boundaries is a free Frontend Academy lesson on CoddyKit. This is lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Frontend Academy learning path, and your progress syncs across the web and the CoddyKit app. The Frontend Academy course includes 4 lessons in total.
Why Error Boundaries?
An uncaught error during rendering, in a lifecycle method, or in a constructor crashes the entire React tree by default. Error Boundaries catch these errors in a subtree and let you render a fallback instead.
Only Class Components
Error Boundaries must be class components (still in 2026 — no hook equivalent yet). The hooks useErrorBoundary exists in libraries like react-error-boundary.
getDerivedStateFromError
Static method called when a descendant throws. Return a state update that triggers the fallback render.
class ErrorBoundary extends React.Component {
state = { hasError: false };
static getDerivedStateFromError(error) {
return { hasError: true };
}
render() {
if (this.state.hasError) {
return <h1>Something went wrong.</h1>;
}
return this.props.children;
}
}componentDidCatch for Logging
Use componentDidCatch to log the error to a service (Sentry, Datadog) — it gets both the error and the React component stack.
componentDidCatch(error, errorInfo) {
Sentry.captureException(error, {
contexts: { react: { componentStack: errorInfo.componentStack } }
});
}Wrapping the App Root
Wrap your top-level App in an Error Boundary to prevent the white screen of death.
<ErrorBoundary fallback={<GlobalErrorPage />}>
<App />
</ErrorBoundary>Granular Boundaries per Route or Widget
One global boundary is the minimum. Add per-route boundaries so a crash in one section doesn't blank the whole app.
<Routes>
<Route path="/" element={<Home />} />
<Route path="/dashboard" element={
<ErrorBoundary fallback={<DashboardError />}>
<Dashboard />
</ErrorBoundary>
} />
</Routes>What Error Boundaries DON'T Catch
Boundaries do NOT catch: errors in event handlers, async code (setTimeout, promises), errors thrown during SSR, errors in the boundary itself. Use try/catch in these places.
Event Handler Errors
Wrap event handlers in try/catch and call a manual reportError function.
function Button() {
function onClick() {
try {
riskyOperation();
} catch (err) {
reportError(err);
toast.error('Something went wrong');
}
}
return <button onClick={onClick}>Click</button>;
}react-error-boundary Library
The community package react-error-boundary exposes a function-component-friendly API with reset support.
import { ErrorBoundary } from 'react-error-boundary';
<ErrorBoundary
fallbackRender={({ error, resetErrorBoundary }) => (
<div>
<p>Error: {error.message}</p>
<button onClick={resetErrorBoundary}>Try again</button>
</div>
)}
onReset={() => refetch()}
>
<DataView />
</ErrorBoundary>Resetting on Recovery
Provide a way to recover (retry button, route change). The boundary should reset its state so it stops showing the fallback.
class ErrorBoundary extends React.Component {
state = { hasError: false };
static getDerivedStateFromError() { return { hasError: true }; }
reset = () => this.setState({ hasError: false });
render() {
if (this.state.hasError) {
return <button onClick={this.reset}>Retry</button>;
}
return this.props.children;
}
}Development vs Production
In development, React still renders the red error overlay even with a boundary — it's intentional. In production, only the boundary's fallback shows.
Best Practices
1) Global boundary at app root. 2) Per-route boundaries. 3) Granular boundaries around independent widgets. 4) Always log to a tracking service. 5) Show recovery actions (retry, go home). 6) Don't swallow errors silently.
Quick Check
Which type of errors do React Error Boundaries NOT catch?
Recap: Error Boundaries
Class component with static getDerivedStateFromError + componentDidCatch. Wraps a subtree to catch render-time errors. Doesn't catch event handlers, async, SSR. Place global boundary at app root, plus per-route and per-widget boundaries. Log to Sentry. Offer a recovery action. react-error-boundary library for cleaner ergonomics.
Learn HTML with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 41
- Lessons
- 163
Frequently Asked Questions
Is the “Error Boundaries” lesson free?
Yes — the full text of “Error Boundaries” is free to read here on the web. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Frontend Academy course, upgrade to CoddyKit PRO. The Frontend Academy course includes 4 lessons in total.
What will I learn in “Error Boundaries”?
Implement class-based Error Boundaries with componentDidCatch and getDerivedStateFromError to prevent uncaught render errors from crashing the entire app. You practise Frontend Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Frontend Academy?
No prior experience is required. Frontend Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 4 of 4.
How long does the “Error Boundaries” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Frontend Academy lesson?
Yes. Every Frontend Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Compound Components with Context
- Render Props and HOC Patterns
- Portals for Modals and Tooltips
- Error Boundaries