Complete Guide on React Error Boundary

Write your own error boundary or use react-error-boundary

Photo by Gerald Berliner on Unsplash

This article is accessible to everyone, and non-member readers can click this link to read the full text.

The Problem

All software has bugs; it is normal.

React application errors could be JavaScript/TypeScript mistakes, lazy loading failing, or any kind of errors.

If encountering an error, a React application could be removed from the browser screen. We set up the Create React App to show how it happens.

The following command creates a React project:

% yarn create react-app react-error-boundary-app --template typescript
% cd react-error-boundary-app

Modify src/App.tsx to inject an error:

import logo from './logo.svg';
import './App.css';

function App(props: any) {
  props.map((a: any) => a); // this throws the error that props.map is not a function
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Execute yarn start, and we see runtime errors on the browser. The following error screen is only visible in development mode during hot reload. It is react-error-overlay used by the Create React app.

Image by author

Errors not caught by error boundaries could unmount the React component tree. Closing the overlay with the X button at the top-right corner, we will see a blank screen.

react-error-overlay can be turned off by the Webpack configuration in webpack.config.js:

module.exports = {
  //...
  devServer: {
    overlay: false, // turn off react-error-overlay with one flag

    // or turn off…