React Error Boundaries

by
Previous
Next

React Error Boundaries are a robust mechanism introduced in React 16 that allow developers to gracefully handle errors in UI components.

Before Error Boundaries, errors in one part of an application could cause the entire app to break, making debugging difficult and potentially causing a poor user experience.

With Error Boundaries, we can catch and manage errors at the component level, ensuring that a single broken component does not impact the rest of the application.

What are Error Boundaries?

Error Boundaries are special React components designed to catch JavaScript errors anywhere in their child component tree, log them and display a fallback UI instead of crashing the whole app. Error Boundaries can catch errors that occur during:

  • Rendering
  • Lifecycle methods
  • Constructor functions of the component tree

However, Error Boundaries do not catch errors for:

  • Event handlers (though you can use try. . . catch in event handlers)
  • Asynchronous code (e.g., setTimeout, fetch callbacks)
  • Server-side rendering
  • Errors thrown in the Error Boundary component itself

Why Use Error Boundaries?

Error Boundaries provide several benefits:

  1. Graceful Error Handling: Instead of the entire application breaking due to an error, only the component where the error occurred will be replaced by a fallback UI.
  2. Better User Experience: Error Boundaries allow developers to display a custom fallback UI (e.g., an error message or reload button), so users are informed without seeing a blank or broken screen.
  3. Enhanced Debugging: Error Boundaries can log error details, making it easier for developers to identify and fix issues in production.

Creating an Error Boundary in React

To create an Error Boundary, you need to create a class component because only class components can use the lifecycle methods componentDidCatch and getDerivedStateFromError that are required for Error Boundaries. Here’s how it’s done:

Define the Error Boundary Component: 

import React, { Component } from 'react';

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

    // This lifecycle method is invoked when an error occurs
    static getDerivedStateFromError(error) {
        // Update state so the next render will show the fallback UI
        return { hasError: true };
    }

    // This lifecycle method logs the error information
    componentDidCatch(error, info) {
        console.error("Error caught by Error Boundary:", error, info);
    }

    render() {
        if (this.state.hasError) {
            // Render a custom fallback UI
            return <h2>Something went wrong. Please try again later.</h2>;
        }

        // Render children components when no error occurs
        return this.props.children;
    }
}

export default ErrorBoundary;

Explanation:

  • constructor : Initializes the state with hasError set to false.
  • getDerivedStateFromError : Updates the state when an error is caught, triggering the fallback UI.
  • componentDidCatch : Logs the error details. You can also send these logs to an error tracking service if desired.
  • render : Conditionally renders either the fallback UI or the component’s children based on whether an error has been detected.

Using the Error Boundary Component:Now that we have the ErrorBoundary component, we can use it to wrap any component that may potentially throw an error. Here’s an example

import React from 'react';
import ErrorBoundary from './ErrorBoundary';
import FaultyComponent from './FaultyComponent';

function App() {
    return (
        <div>
            <h1>React Application</h1>
            <ErrorBoundary>
                <FaultyComponent />
            </ErrorBoundary>
            <ErrorBoundary>
                <OtherComponent />
            </ErrorBoundary>
        </div>
    );
}

export default App;

In this example:

  • FaultyComponent is wrapped with ErrorBoundary, meaning any errors in FaultyComponent will be caught and the fallback UI will be displayed instead.
  • Multiple Error Boundaries can be used to catch errors in different components, isolating each section of the app.

Example of a Faulty Component

Here’s a simple FaultyComponent that throws an error:

import React from 'react';

function FaultyComponent() {
    throw new Error("This is a test error in FaultyComponent");
    return <div>This component has an error.</div>;
}

export default FaultyComponent;

In this case, because FaultyComponent is wrapped in ErrorBoundary, the error will be caught and the fallback message will appear instead of crashing the entire application.

Customizing the Fallback UI

You can also pass a custom fallback component or message as a prop to make the UI more user-friendly and informative.

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

    static getDerivedStateFromError(error) {
        return { hasError: true };
    }

    componentDidCatch(error, info) {
        console.error("Error caught by Error Boundary:", error, info);
    }

    render() {
        if (this.state.hasError) {
            // Render the custom fallback UI if provided
            return this.props.fallback || <h2>Something went wrong.</h2>;
        }
        return this.props.children;
    }
}

export default ErrorBoundary;

You can then use it as:

<ErrorBoundary fallback={<CustomErrorMessage />}>
    <FaultyComponent />
</ErrorBoundary>

In this case, CustomErrorMessage will be displayed if there’s an error in FaultyComponent.

Best Practices for Error Boundaries

  1. Granular Placement: Use multiple Error Boundaries to wrap smaller sections of the app, such as individual components or sub-sections. This keeps the unaffected parts of the UI functional if only a single component fails.
  2. Error Reporting: Use componentDidCatch to log errors to external services like Sentry, LogRocket or a custom logging server.
  3. User-Friendly Messages: Avoid displaying technical messages to end users. Instead, show a friendly message or a button to reload or navigate back.
  4. Fallback Component: Customize the fallback UI based on the context. For example, you might show a different message for a data-fetching error compared to a UI rendering error.

Limitations of Error Boundaries

While Error Boundaries are powerful, they have limitations:

  • They cannot catch errors in event handlers. You must handle these errors manually using try…catch blocks.
  • Errors in asynchronous code (like setTimeout or promises) are not caught by Error Boundaries. You can handle these errors by adding error handling to the promises.
  • Server-side rendering does not support Error Boundaries, so errors in server-rendered components need other error handling methods.

Example of Event Handler Error Handling

To handle errors in event handlers, use try…catch inside the function:

function SafeButton() {
    const handleClick = () => {
        try {
            throw new Error("Button click error");
        } catch (error) {
            console.error("Error in button click:", error);
        }
    };

    return <button onClick={handleClick}>Click Me</button>;
}

Previous
Next

Leave a Comment