ReviseAlgo Logo

Advanced React

Error Boundaries

Master React Error Boundaries, covering class component setups, getDerivedStateFromError, componentDidCatch, and fallback rendering limits.

Last Updated: July 15, 2026 • 12 min read

1. Learning Objectives

In this lesson, you will learn how to handle runtime crashes gracefully. By the end of this topic, you will be able to:

  • Explain why Error Boundaries must be implemented using class components.
  • Catch runtime rendering errors using getDerivedStateFromError and componentDidCatch.
  • Identify categories of errors that Error Boundaries cannot catch.
  • Provide recovery interfaces that allow users to reset crashed subtrees.
  • Integrate global logging services inside class lifecycle methods.

2. Overview

In the past, JavaScript errors inside components would corrupt React's internal state and cause the entire page to crash. **Error Boundaries** are class components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of crashing the entire application.

3. Why This Topic Matters

Graceful error handling is essential for maintaining application stability:

  • Preventing White Screen Crashes: If a minor widget (like a sidebar weather widget) throws a rendering error, you don't want the entire page to crash. Error boundaries isolate the crash, keeping the rest of the application functional.
  • Centralized Diagnostic Logging: Error boundaries provide a central place to send crash reports to diagnostic services (like Sentry or LogRocket) for debugging.

4. Real-World Analogy

Think of an Error Boundary like **electrical circuit breakers in a house**:

  • Without Circuit Breakers (No Error Boundary): If a hair dryer short-circuits in the bathroom (a rendering error), the entire power grid for the city goes down, leaving everyone in darkness (a complete application crash).
  • With Circuit Breakers: The short-circuit in the bathroom triggers the local circuit breaker (the Error Boundary). Power is shut off only in the bathroom, and the rest of the house (the rest of the application) remains fully powered.

5. Core Concepts

Below is a comparison of standard JavaScript try/catch blocks and React Error Boundaries:

Feature JavaScript try/catch blocks React Error Boundary Classes
Catch Scope Catches errors inside imperative code blocks (e.g. click event handlers, async functions). Catches declarative errors inside render methods, lifecycle hooks, and constructors of child trees.
Implementation Written inline using standard JavaScript try/catch syntax. Implemented as class components containing specific lifecycle methods.
Fallback UI Handling Requires manual state updates to render fallbacks. Handles fallback rendering declaratively through state synchronization.

6. Syntax & API Reference

This example shows how to configure an Error Boundary class component:

7. Visual Diagram

This diagram displays how rendering errors bubble up to the nearest parent Error Boundary:

8. Live Example — Full Working Code

Below is a complete HTML page demonstrating runtime crash isolation using an Error Boundary:

What just happened? Clicking the button to increase the count to 3 throws a rendering error. The `ErrorBoundary` catches the error, prevents the application from white-screening, and renders the fallback "Widget Crashed" UI. The main App header remains visible and functional throughout the crash.

9. Interactive Playground

Try It Yourself Challenges:

  1. Open the browser console, click the count button to trigger a crash, and inspect the logged component stack trace.
  2. Click the "Reset Widget" button and verify that the component resets to its initial state, allowing you to use it again.

10. Common Mistakes

Mistake Why it happens Wrong Correct
Expecting boundaries to catch event handler errors Error boundaries do not catch errors inside event handlers (like click or submit handlers). These must be caught using standard try/catch blocks inside the handlers. Expecting an Error Boundary to catch errors thrown inside an onClick callback function. Use standard try/catch blocks inside event handlers to catch and process input or submission errors.
Trying to implement Error Boundaries using functional hooks Currently, there is no Hook-based equivalent for getDerivedStateFromError or componentDidCatch. Functional components cannot act as Error Boundaries. Creating a functional component and trying to catch rendering errors using hooks. Always implement Error Boundaries as class components. You can wrap them in helper packages (like `react-error-boundary`) to simplify functional component setups.

11. Best Practices

  • Always use Class Components: Implement Error Boundaries as class components, as hooks are not yet supported for catching rendering errors.
  • Isolate widgets: Wrap separate modules (like sidebars, chats, or profile widgets) in their own Error Boundaries to prevent a crash in one widget from affecting the rest of the application.
  • Send logs to monitoring services: Use the componentDidCatch method to send error logs and component stack traces to monitoring services (like Sentry).
  • Provide recovery options: Include a reset button in the fallback UI to allow users to reset the crashed component subtree without reloading the entire page.

12. Browser Compatibility/Requirements

Error Boundaries are supported in all browsers that run React.

13. Interview Questions

Q1: Why must Error Boundaries be class components? Can we implement them using React Hooks?

Answer: Error boundaries must be class components because the lifecycle methods used to catch rendering errors—`getDerivedStateFromError` and `componentDidCatch`—have no functional hook equivalents in React yet. Therefore, functional components cannot act as Error Boundaries.

Q2: Name three scenarios where an Error Boundary will NOT catch an error.

Answer: An Error Boundary will not catch errors in: (1) **event handlers** (e.g., an error inside an `onClick` callback), (2) **asynchronous code** (e.g., inside `setTimeout` or `fetch` callbacks), and (3) **errors thrown within the Error Boundary itself** rather than in its children.

14. Debugging Exercise

Identify why this component crashes the browser instead of showing the Error Boundary fallback UI when the API request fails:

View Solution

Diagnosis: The crash happens on the initial render because the component tries to read data.name while data is still null. The Error Boundary catches this render-phase crash, but we should prevent it from throwing by adding a loading check or using optional chaining:

15. Practice Exercises

Exercise 1: Create a secure dashboard layout

Build a dashboard shell containing a Sidebar and a StatsPanel. Wrap the StatsPanel in an Error Boundary so that if a chart component crashes, the sidebar remains active, allowing the user to navigate to other pages.

16. Scenario-Based Challenge

The Global Error Logging Integration Project:

You are setting up monitoring for a production application. When a component crashes, the application should display a user-friendly error screen with a debug ID, and send the error stack trace, user session ID, and route path to an API endpoint. Describe how you would implement this using class-based Error Boundaries.

17. Quick Quiz

Q1: Which lifecycle method is used to update the Error Boundary's state and render a fallback UI on the next render pass?

A) componentDidCatch()

B) static getDerivedStateFromError()

C) shouldComponentUpdate()

Answer: B — static getDerivedStateFromError() is the lifecycle method called to update state and trigger fallback rendering after an error is thrown.

18. Summary & Key Takeaways

  • Error Boundaries catch runtime rendering errors inside child component trees.
  • They prevent minor errors from crashing the entire application.
  • Error Boundaries must be implemented as class components.
  • They do not catch errors inside event handlers or asynchronous code.
  • Include a reset button in the fallback UI to allow users to recover from crashes without reloading the page.

19. Cheat Sheet

Error Boundary Method Purpose
static getDerivedStateFromError(error) Updates state (e.g. { hasError: true }) to trigger fallback rendering.
componentDidCatch(error, info) Used to log error stack traces and component diagnostic details.
this.setState({ error: null }) Resets the Error Boundary state to clear the crash and try rendering child components again.
---