Error Boundaries

How to stop a single crashed component from taking down your entire application.

React4 min readConcept 24 of 46

The Catastrophic Failure Rule

If a React component throws a JavaScript error during rendering (like trying to access user.name when user is undefined), React has a strict rule: **it will unmount the entire component tree.**

This means a single broken profile picture can cause your entire app—including the header, navigation, and sidebar—to go completely blank (the 'White Screen of Death').

An Error Boundary is a special component that catches these errors, prevents the crash from bubbling up, and displays a fallback UI instead.

Isolating Crashes

Think of Error Boundaries like try/catch blocks, but for UI.

If you wrap your <Sidebar> in an <ErrorBoundary>, and the sidebar crashes, only the sidebar is replaced with an error message. The rest of the app continues functioning perfectly.

How to build one

Currently, React requires Error Boundaries to be written as **Class Components**, not functional components. (Though most people use the react-error-boundary library to avoid writing classes).

To make a class component an Error Boundary, you define either static getDerivedStateFromError(error) (to render a fallback UI) or componentDidCatch(error, info) (to log the error to a service like Sentry).

Then, you just wrap it around the parts of your app you want to protect: <ErrorBoundary><Widget /></ErrorBoundary>

The Blast Radius

Toggle the Error Boundary on and off, then click 'Trigger Crash' in the deeply nested widget. Watch how the boundary stops the crash from destroying the entire app.

App
Header
Sidebar
<ErrorBoundary>
User Widget

With an Error Boundary, only the crashed widget is replaced by a fallback UI. The rest of the app stays alive.

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1What happens if a deeply nested component throws an error during render, and there are no Error Boundaries?
  2. 2Which of the following errors will an Error Boundary ACTUALLY catch?
  3. 3How do you write a custom Error Boundary from scratch in vanilla React?

Remember this

  • Uncaught rendering errors unmount the entire React tree.
  • Error boundaries catch rendering errors and display a fallback UI.
  • They MUST be written as Class Components (or use a library).
  • They do NOT catch errors in event handlers or async code.
  • Wrap independent widgets in boundaries to isolate crashes.

Done with this concept?

Mark it complete to track your progress. No login needed.