How to use Error Boundaries in React 16

A JavaScript error in a part of the UI shouldn’t break the whole app. To solve this problem for React users, React 16 introduces a new concept of an “error boundary”.

Error boundaries only catch errors in the components below them in the tree.

What are Error Boundaries?

Error Boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed

Error Boundaries do not catch errors for:

Start your headless eCommerce
now. Find out More

Event handlers (learn more)
Asynchronous code (e.g. setTimeout or requestAnimationFrame callbacks)
Server side rendering
Errors are thrown in the error boundary itself (rather than its children)

Disadvantages of Error Boundaries:

It can only be used with Class Components.
It does not catch errors for Event Handlers, Asynchronous code(Example request Animation Frame), Server Side Rendering, and Errors are thrown in the error boundary itself (rather than its children).
It is available only in React 16 or after.

Before going towards error boundaries, let’s see why we need it.

import React from 'react';
export const App = () => {
 return <Alert/>;
};

const Alert = ({ props }) => {
 return <h1>{props.msg}</h1>;
};

If you try to render Alert component you wil get error like this and whole page is blank.

Why this happen?

We are trying to access props.msg which doesn’t exist.This is a banal example, but

it shows that we cannot catch these errors with the try…catch statement.

This tells us why we need Error Boundaries

A class component becomes an error boundary if it defines either (or both) of the lifecycle methods static getDerivedStateFromError() or componentDidCatch().

Use static getDerivedStateFromError() to render a fallback UI after an error has been thrown. Use componentDidCatch() to log error information.

The limitation of error boundary is that it is only available for the class based components.

error boundaries only catch errors in the components below them in the tree. Then, they log those caught errors and display a fallback UI instead of the component tree that crashed.

Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.

Let’s create the Error boundary component

Create a class based component of name ErrorBoundary.

class ErrorBoundary extends React.Component{}

Now create a constructor of this component in which we set state hasError false

class ErrorBoundary extends React.Component{
 constructor(props){
   super();
   this.state = {
     hasError:false
   }

Now use componentDidCatch function that allows us to handle the error boundaries of the application. In this function, we setState of hasError to true

componentDidCatch(error){
   this.setState({hasError:true})
 }

Now we use conditional rendering in which we use hasError state to check error occurs or not, if it is then we print some message overwise the child props of component will render.

render(){
   if(this.state.hasError){
     return <h1> Some Error Occurred </h1>
   }
   return this.props.children;=
 }

import React from 'react'; 

class ErrorBoundary extends React.Component{
 constructor(props){
   super();
   this.state = {
     hasError:false
   }
 }
 componentDidCatch(error){
   this.setState({hasError:true})
 }

 render(){
   if(this.state.hasError){
     return <h1> Some Error Occurred </h1>
   }
   return this.props.children;
 }
}

export default ErrorBoundary;

At last wrap up the discussed above alert component to see how it works

import React from 'react';
import ErrorBoundary from "./ErrorBoundary";

export const App = () => {
return (
  <ErrorBoundary><Alert/></ErrorBoundary>
  );
};
const Alert = ({ props }) => {
return <h1>{props.msg}</h1>;
};

Now you can see some errors like this with the error message on your website