Error boundaries in Reactjs

12-02-2019    Hari Kondlapudi    Views 259



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.




Subscribe to Email Updates

Subscribe


Add Comments

Submit Comments

More Blogs


What is Trade Finance Transaction?

Blockchain Technology In Trade Finance Transactions

Hari Kondlapudi        Views 654
block-chain-transform-your-business

Blockchain to transform your business

Hari Kondlapudi        Views 666
block-chain-transform-your-business

Localization with React

Hari Kondlapudi        Views 311

Contact Us

Address:

Do Systems Inc,
433 Plaza Real, Suite 275
Boca Raton, FL 33432 

Email: sales@dosystemsinc.com
 

Want to talk to us?

Copyright © 2021 Do Systems Inc. All rights reserved. Privacy Policy