How to Handle Errors in React with Error Boundaries

In React, when an error occurs within a component, the entire React component tree is unmounted, resulting in a blank page being displayed to the user. This default behavior may not be desirable as it offers no helpful information to the users. In order to provide a better user experience, it is important to handle errors properly.

Error Boundaries

Error boundaries are a feature in React that allow you to catch and handle errors locally within specific parts of your application. An error boundary is a React component that implements the componentDidCatch() lifecycle event and wraps around other components.

Here is an example of an error boundary component:

class ErrorHandler extends React.Component {
 constructor(props) {
 super(props)
 this.state = { errorOccurred: false }
 }

 componentDidCatch(error, info) {
 this.setState({ errorOccurred: true })
 logErrorToMyService(error, info)
 }

 render() {
 return this.state.errorOccurred ? <h1>Something went wrong!</h1> : this.props.children
 }
}

To use the error boundary component, simply wrap it around the component that you want to handle errors for within JSX:

<ErrorHandler>
 <SomeOtherComponent />
</ErrorHandler>

In this example, whenever an error occurs within SomeOtherComponent or any of its child components, the ErrorHandler component intercepts the error and allows you to handle it gracefully.

The errorOccurred state property is used to determine whether to render the error handling UI or the normal application UI. Within the componentDidCatch() method, any error information can be logged using a service like Sentry, Roller, Airbrake, or others. This allows you to proactively identify and resolve errors without relying on users to report them.

Conclusion

By utilizing error boundaries in React, you can ensure that errors are handled locally and provide a better user experience. Implementing error boundaries helps in gracefully handling errors and logging error information for effective debugging.