ErrorBoundary in React

Create a folder named ErrorBoundary. Inside add a file name ErrorBoundary.js Inside ErrorBoundary.js add the following

import React, { Component } from 'react';

class ErrorBoundary extends Component {
    state = {
        hasError: false,
        errorMessage: ''
    }
    componentDidCatch = (error, info) => {
        this.setState(
            {
                hasError: true, 
                errorMessage: error
            }
        );
    }

    render() {
        if (this.state.hasError) {
            return (
                <div>
                    <h1>Something is Wrong!</h1>
                    <p>{this.state.errorMessage}</p>
                </div>
            );
        } else {
            return this.props.children
        }
    }
}

export default ErrorBoundary;

This creates a component to show if error is encountered in production. This is a higher order component that is used to wrap around other components. So let's wrap around a component now. In App.js import ErrorBoundary component

import ErrorBoundary from './ErrorBoundary/ErrorBoundary';

In the below example we show a component if showPersons condition is true. So we wrap ErrorBoundary around Person component and add unique key to it for react to use it.

if(this.state.showPersons) {
      persons = (
        <div>
          {this.state.persons.map((person, index) => {
            return <ErrorBoundary key={person.id}>
              <Person 
              click={() => this.deletePersonHandler(index)}
              companyName={person.companyName} 
              designation={person.designation}
              changed={(event) => this.nameChangedHandler(event, person.id)} >Duration: {person.duration}
              </Person>
              </ErrorBoundary>
          })}
        </div>
      );
      btnClass = classes.Red;
    }

That is how ErrorBoundary is used. You would not see it's effect in development output but only in production.