Error Boundaries and Error Handling in React

In React, error boundaries are components designed to catch JavaScript errors in the component tree below them, prevent the entire application from crashing, and display a fallback UI. They provide a structured way to handle unexpected errors, especially in production applications.

Why Use Error Boundaries?

Errors can happen during the rendering process, in lifecycle methods, or in event handlers. By default, unhandled errors can crash the whole React app, making the user experience unpleasant. React error boundaries help:

Catch rendering errors in child components.

Display fallback UIs without breaking the entire application.

Log error information for debugging purposes.

However, error boundaries do not catch:

Errors in event handlers (you need to use try-catch in event handlers).

Errors occurring inside asynchronous code (like setTimeout or Promise callbacks).

Errors thrown during the server-side rendering process.

How to Create an Error Boundary

Error boundaries are implemented using class components because they require lifecycle methods like componentDidCatch and getDerivedStateFromError. These methods allow error boundaries to catch errors and display fallback UIs.

Example of an Error Boundary Component:

				
					import React, { Component } from 'react';

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

  static getDerivedStateFromError(error) {
    // Update state to render fallback UI on the next render
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // You can log error information to an error reporting service
    console.error("Error caught by Error Boundary: ", error, info);
  }

  render() {
    if (this.state.hasError) {
      // Fallback UI when an error occurs
      return <h2>Something went wrong.</h2>;
    }

    // Render the child components normally
    return this.props.children;
  }
}

export default ErrorBoundary;

How to Use an Error Boundary

To use an error boundary, wrap it around any part of the component tree where you want to handle potential errors. If any error occurs within the child components of the boundary, the fallback UI will be displayed.

Example Usage:

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

function App() {
  return (
    <div>
      <ErrorBoundary>
        <MyComponent />
      </ErrorBoundary>
    </div>
  );
}

export default App;

In this example, if any error occurs in MyComponent during rendering or in its lifecycle methods, the error boundary will catch it, and the fallback UI ("Something went wrong") will be displayed instead of crashing the app.

Lifecycle Methods for Error Boundaries

getDerivedStateFromError(error):

This static method is invoked when an error is thrown in a descendant component.

It updates the component’s state, allowing you to render a fallback UI.

This method does not have access to error information other than the error itself.

componentDidCatch(error, info):

This method is used for logging the error information or performing side effects like error reporting.

The info parameter contains details about which component in the tree the error originated from, which is useful for debugging.

Handling Errors in Event Handlers

Error boundaries do not catch errors thrown in event handlers. To handle errors in event handlers, you need to use try-catch blocks manually.

Example:

				
					function MyComponent() {
  const handleClick = () => {
    try {
      // Some code that might throw an error
      throw new Error('Oops! Something went wrong.');
    } catch (error) {
      console.error('Error caught in event handler:', error);
    }
  };

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

Best Practices for Using Error Boundaries

Wrap Key Components: Wrap only critical components (like routes, user input components, or modals) inside error boundaries, so you can show fallback UIs for specific parts of your app while the rest remains functional.

Keep Fallback UIs Simple: The fallback UI should be simple and informative, guiding the user about the issue without overwhelming them.

Log Errors for Debugging: Use the componentDidCatch method to log errors to monitoring services like Sentry, LogRocket, or your own server for detailed error reporting.

Example: Logging Error Information

You can extend the componentDidCatch method to log the error details to an external monitoring service.

Example with Logging:

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

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

  componentDidCatch(error, info) {
    // Send error details to an external logging service
    logErrorToService(error, info);
  }

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

    return this.props.children;
  }
}

function logErrorToService(error, info) {
  // Assume this function sends the error details to a logging service
  console.error('Logged error to monitoring service:', error, info);
}

Multiple Error Boundaries

You can have multiple error boundaries for different parts of the app to show different fallback UIs depending on where the error occurs. This approach improves user experience as only the affected part will display an error message, while the rest of the application continues to work.

Example:

				
					function App() {
  return (
    <div>
      <ErrorBoundary>
        <Header />
      </ErrorBoundary>
      <ErrorBoundary>
        <MainContent />
      </ErrorBoundary>
      <ErrorBoundary>
        <Footer />
      </ErrorBoundary>
    </div>
  );
}

Limitations of Error Boundaries

Event Handlers: As mentioned earlier, error boundaries do not catch errors inside event handlers.

Asynchronous Code: Errors inside asynchronous code like promises or setTimeout are not caught by error boundaries. You need to handle these manually with try-catch in promises.

Server-Side Rendering: Error boundaries cannot catch errors during server-side rendering

Handling Asynchronous Errors

Error boundaries can’t catch errors that happen in asynchronous code (like in setTimeout or promises). You’ll need to handle them using try-catch or .catch().

Example with Promises:

				
					function MyComponent() {
  const handleClick = () => {
    fetchData()
      .then(response => {
        // Handle response
      })
      .catch(error => {
        console.error('Error caught in promise:', error);
      });
  };

  return <button onClick={handleClick}>Fetch Data</button>;
}

Conclusion

Error boundaries in React provide a robust way to handle errors and prevent the entire app from crashing due to an unexpected error in child components. While they don't cover every type of error (like those in event handlers or async code), they are vital for creating resilient React applications that can gracefully recover from errors, improving both the user experience and developer control over app behavior in production.