Error boundaries in Reactjs

An error occurs in the UI should break the whole app. To solve this problem, a concept called “Error Boundaries “ is installed in the ReactJs.

What is an Error Boundary?
Error Boundaries are the components to catch errors that occur in the child components, log those errors, and to display a fallback UI. These components help to prevent the crash of the whole component.

A class component becomes an error boundary by defining one or both the lifecycle methods.

1. getderivedstatefromprops()
2. componentdidcatch()

getderivedstatefromError() is used for rendering a fallback message after an error has thrown.
Componentdidcatch method is used for logging the error information.

NOTE: 
Error Boundaries did not catch the errors in the following places,

1. Event Handlers
2.  setTimeout or requestAniationFramecallbacks
3.  Server-side rendering
4.  Errors Caused by the error boundary itself

Example:

Let’s see a small example of this concept.

Initially create a file with Details.js
Create a functional component and receive the name and gender as props.
Here the gender taken from the props is male then it throws the error

//Details.js
import React from 'react';
import './App.css';
   function Details({ heroName, gender }) {
   if (gender === "male") {
    throw new Error("Males are not allowed")
   }
   return (
      < div className="App"  >
      <  p >{heroName}:{gender}
      < / div  >
  );
}export default Details;

Create another file named as Error.js. Here hasError set to false initially in the state method.
In this file, we used these Life cycle methods. here a condition takes place in the render method.

import React from 'react';
class ErrorBoundary extends React.Component {
     constructor(props) {
              super(props)
                    this.state = {
                     hasError: false
                      }
                      }
      static getDerivedStateFromError(error) {
          return {
               hasError: true
                  }
                  }
       componentDidCatch(error, errorinfo) {
              console.log(errorinfo)
              }
        render() {
         if (this.state.hasError) {
             return <  h1  >Oops!.Something Went Wrong<  /h1  >
        } else {
            return this.props.children
        }
     }
}
export default ErrorBoundary;

In the App.js file Error boundary can be placed in two cases:

Case 1: The whole div is wrapped under a single error boundary. In this case, if one component crashes then the other components also crashes.

import React from 'react';
import './App.css';
import Details from './Details';
import ErrorBoundary from './Error';
class App extends React.Component {
render() {
return (
    <  div className="App"    >
     <  ErrorBoundary  >
      <  Details heroName="sathya" gender="female" /  >
      <   Details heroName="srija" gender="female" /  >
      <  Details heroName="sravanth" gender="male" / >
     <  /ErrorBoundary   >
   <  /div  >
     );
  }
}
export default App;

Case 2: each component is wrapped with individual error boundaries. So in this case, if one component crashes the others are not affected

import React from 'react';
import './App.css';
import Details from './Details';
import ErrorBoundary from './Error';
class App extends React.Component {
render() {
   <  ErrorBoundary  >
      <  Details heroName="sathya" gender="female" /  >
     <  /ErrorBoundary   >
     <  ErrorBoundary  >
      <   Details heroName="srija" gender="female" /  >
     <  /ErrorBoundary   >
     <  ErrorBoundary  >
      <  Details heroName="sravanth" gender="male" / >
     <  /ErrorBoundary   >
   <  /div  >

The output for the above two cases is shown below.
Output for the first case:



Output for the second case:



Small advice is to use at least one boundary in the root of your app. This will prevent users from seeing a blank HTML page and perhaps see a nice fallback UI instead.