Error Boundaries in React

Error Boundaries in React are a special kind of component that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of crashing the entire component tree. They help in handling runtime errors gracefully and prevent app crashes due to unforeseen bugs in components.

In this guide, we will cover the concept of error boundaries, how to implement them, and how they improve the stability of React applications.

1. What are Error Boundaries?

Error boundaries are React components that catch JavaScript errors in their child components, log those errors, and display a fallback UI. They are typically used to prevent an entire app from crashing due to one small issue in a specific component.

React’s error boundary feature is similar to try/catch blocks in JavaScript but for components. An error boundary will “catch” an error in the render phase and allow the app to continue running.

When Error Boundaries are Useful:

When a component might throw an error due to some unexpected situation, like network errors, wrong data, etc.
Preventing the entire app from crashing when an error occurs in part of the UI.

2. How Error Boundaries Work

When an error occurs in a React component, React normally logs the error in the console and shows a blank screen. However, when wrapped in an error boundary, React will show the fallback UI defined by the error boundary component instead of crashing the app.

Error boundaries are implemented as React components that must implement the following lifecycle methods:

static getDerivedStateFromError(error): This method is called when an error is thrown in a child component. It allows you to update the state to show a fallback UI.
componentDidCatch(error, info): This method is called after an error has been thrown. It can be used for logging the error to an external service or for debugging purposes.

3. Creating an Error Boundary

Let’s walk through an example of how to create an error boundary in React.

3.1 Creating the ErrorBoundary Component

The ErrorBoundary component will catch errors that occur in its child components and show a fallback UI.

// ErrorBoundary.js
import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null, errorInfo: null };
  }

  // This lifecycle method is called when an error is thrown
  static getDerivedStateFromError(error) {
    // Update state to display fallback UI
    return { hasError: true };
  }

  // This lifecycle method is called after the error is caught
  componentDidCatch(error, errorInfo) {
    // Log the error to an external service or for debugging
    console.error("Error caught in ErrorBoundary: ", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Display fallback UI when an error occurs
      return <h1>Something went wrong. Please try again later.</h1>;
    }

    // Otherwise, render children components normally
    return this.props.children;
  }
}

export default ErrorBoundary;

3.2 Using the ErrorBoundary Component

Now that we have our ErrorBoundary component, let’s use it to wrap other components that may throw an error.

// App.js
import React from 'react';
import ErrorBoundary from './ErrorBoundary';

class BuggyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { throwError: false };
  }

  render() {
    if (this.state.throwError) {
      throw new Error('I crashed!');
    }

    return <button onClick={() => this.setState({ throwError: true })}>Crash Me</button>;
  }
}

const App = () => {
  return (
    <div>
      <h1>React Error Boundaries Example</h1>
      <ErrorBoundary>
        <BuggyComponent />
      </ErrorBoundary>
    </div>
  );
};

export default App;

In this example:

The BuggyComponent will throw an error when the button is clicked.
The ErrorBoundary component wraps BuggyComponent and catches the error, displaying a fallback message instead of crashing the entire app.

4. Key Points About Error Boundaries

Component Scope: Error boundaries work at the component level. They will catch errors in the render phase and lifecycle methods of their child components.
Error Boundary is a Class Component: Error boundaries can only be implemented in class components, as they rely on lifecycle methods (getDerivedStateFromError and componentDidCatch). Function components cannot use error boundaries directly unless you use a wrapper around them (such as ErrorBoundary).
Only Catches Errors in Children: Error boundaries do not catch errors in event handlers, asynchronous code, or server-side rendering. For event handlers, you must use try/catch blocks.
Multiple Error Boundaries: You can use multiple error boundaries to isolate different parts of the application and prevent errors from propagating throughout the whole app.

5. Handling Errors in Different Parts of the App

You might want to handle errors in different parts of your app with different fallback UI or logging mechanisms. To do this, you can have multiple error boundaries.

For example:

// App.js
import React from 'react';
import ErrorBoundary from './ErrorBoundary';
import BuggyComponent from './BuggyComponent';

const App = () => {
  return (
    <div>
      <h1>React Error Boundaries Example</h1>

      {/* Global Error Boundary for the whole app */}
      <ErrorBoundary>
        <BuggyComponent />
      </ErrorBoundary>

      {/* Separate Error Boundary for a different part of the UI */}
      <ErrorBoundary>
        <AnotherComponent />
      </ErrorBoundary>
    </div>
  );
};

export default App;

Each ErrorBoundary component here catches errors separately, allowing you to isolate errors in specific parts of the UI.

6. Handling Errors in Event Handlers

React error boundaries do not catch errors inside event handlers. You can handle these errors using regular try/catch blocks inside your event handlers.

For example:

const handleClick = () => {
  try {
    // Some code that may throw an error
    throw new Error('An error occurred in the event handler');
  } catch (error) {
    console.error('Caught error in event handler:', error);
  }
};

7. Error Logging and Reporting

Error boundaries provide a way to log the errors to an external service for monitoring. You can extend the componentDidCatch method to report errors:

componentDidCatch(error, errorInfo) {
  // Example: send the error information to a logging service
  logErrorToService(error, errorInfo);
}

There are many services like Sentry, LogRocket, or Bugsnag that provide error logging and reporting out of the box.

8. Limitations of Error Boundaries

While error boundaries are useful for handling runtime errors in React components, there are some limitations to be aware of:

Cannot Catch Errors in Asynchronous Code: Error boundaries do not catch errors that occur in asynchronous code (e.g., inside setTimeout, setInterval, or promises). To handle async errors, you can use try/catch inside async functions or use error-handling libraries like try-catch for promises.
Cannot Catch Errors in Event Handlers: As mentioned, errors in event handlers are not caught by error boundaries. You need to handle them with try/catch.
State Updates: Error boundaries can only catch errors that happen during rendering or lifecycle methods. If an error occurs in a useState or useEffect hook in functional components, you may need to handle that error separately.