Exploring Error Boundary in React: Enhancing Robustness and Error Handling
Tags: webdev, javascript, beginners, react
Published: 2023-10-22 17:45:32

## Introduction
Error handling is an essential aspect of building robust and reliable applications. In React, error boundaries serve as a mechanism to efficiently capture Javascript errors during rendering, lifecycle methods, and in constructors of the whole tree below them. Error boundaries prevent those errors from crashing the entire application and provide a way to gracefully handle failures without affecting the user experience.

<img width="100%" style="width:100%" src="https://media.giphy.com/media/mq5y2jHRCAqMo/giphy.gif">

## What is an Error Boundary?
An error boundary is a React component that wraps around other components to catch and handle errors that occur within their subtree. It acts as a safety net, isolating errors and preventing them from propagating upwards. By doing so, it allows the rest of the application to continue running smoothly even if certain parts encounter errors.

## Why Do We Need Error Boundaries?
While React already provides its own error handling mechanism, called `componentDidCatch`, it only works for class components and cannot capture errors in event handlers. Error boundaries, on the other hand, work with both class and function components. They help to ensure that errors, such as unexpected exceptions or network failures, don't compromise the overall stability of the application.

## Example Usage
Imagine you have an application with **components A**. You can wrap **component A** with an error boundary to capture any potential errors occurring inside **A** and its **child components**. If an error occurs within **A**, the error boundary will catch it and display a fallback UI, which could be an error message or a custom component designed to handle the specific error gracefully.

[Check out Error Boundary usage example](https://codepen.io/gaearon/pen/wqvxGa?editors=0010)

## Custom Full Implementation of Error Boundary
To implement a custom error boundary in React, you need to create a **class component** that extends the base `React.Component` class. Within this component, you override the `componentDidCatch` lifecycle method to define how you want to handle the error.

Here is an example of a custom error boundary component:
```jsx
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  componentDidCatch(error, errorInfo) {
    // Log the error or send it to an error reporting service
    console.error(error, errorInfo);
    // Update state to show the fallback UI
    this.setState({ hasError: true });
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return this.props.fallback;
    }
    return this.props.children;
  }
}

// Usage
<ErrorBoundary fallback={<span>Something went wrong</span>}>
  <ComponentA />
</ErrorBoundary>
```
_There is currently no way to write an error boundary as a function component. However, you don’t have to write the error boundary class yourself. You can use `react-error-boundary` instead._

## How do Error Boundaries Work?

Error boundaries in React serve as a special type of component that **catch errors occurring in their child components during rendering, lifecycle methods, and in constructors of the whole tree below them**. They act as a protective shield around the subtree of components they wrap, preventing errors from propagating upwards and crashing the entire application.

When an error occurs within an error-boundary-wrapped component, React invokes the `componentDidCatch` lifecycle method of the error boundary component. This method receives two parameters: **error** (the error object) and **errorInfo** (an object providing additional information about the component stack trace).

The `componentDidCatch` method allows you to handle the error and take appropriate action. You can log the error, display a fallback UI to the user, or render an alternative component tree to recover from the error gracefully. The error boundary component takes control of the error flow and maintains the stability of the application.

It's important to note that error boundaries in React only catch errors that occur during **rendering, lifecycle methods, and in constructors of the whole tree below them.**. They do **not** catch errors in event handlers, asynchronous code (e.g. `setTimeout` or `requestAnimationFrame` callbacks), server side rendering. To handle those types of errors, you can use other error handling techniques, such as `try-catch` blocks or `Promise.catch()`.

By incorporating error boundaries into your React application, you can isolate and handle errors in a controlled manner. This enhances the robustness and reliability of your application by preventing crashes and providing a graceful way to recover from errors, ensuring a smooth user experience.

## React Error-Boundary Library
React also provides a built-in library called `react-error-boundary`. This library offers a declarative approach by providing a higher-order component (HOC) that wraps around a component. The HOC handles the error boundary logic, allowing developers to focus on the UI and error handling strategies.
It is widely used by the React community and is considered a best practice for error handling in React applications.

`npm install react-error-boundary`

```jsx
import { ErrorBoundary } from 'react-error-boundary';

const MyComponent = () => {
  // Your component logic here

  return (
    <ErrorBoundary fallback={<span>Something went wrong</span>}>
      {/* Component JSX code here */}
    </ErrorBoundary>
  );
};
```

## Conclusion
Error boundaries in React play a crucial role in maintaining application stability by catching and handling errors within specific components. With error boundaries, you can minimize the impact of errors and provide more graceful fallback UIs to improve the overall user experience. Whether using a custom implementation or leveraging the convenience of the react-error-boundary library, incorporating error boundaries is an essential practice in building robust React applications.