Understanding React Error Boundary and its Main Commands

Methods to prevent errors can propagate through your app 📲

Handle errors with React 16 with Error Boundary 🔥🧑‍🚒

React is a declarative JavaScript library for user interfaces or frontend and it’s component-based, so you can reuse it instead of rewriting existing code.

But, JS errors inside React components are emitted on rendering, which means that errors break the whole application with the famous white screen, which could happen at any time and on any page:

› Error bounds are React components that catch JS errors, record or log those errors and render them in a Fallback UI.

Vue Testing

TALK OF THE WEEK

If there is an error with the player, you can watch the video at the following LINK.

Why do we need it?

In a typical structure, we create React components called <Error Boundary>, and with this, we can wrap any component to avoid errors that occur inside taking the whole app and breaking it.

That catches JS errors anywhere in their child tree instead of the failed component tree.

________________________________________________________

We must also be clear that it is not supported in React Hooks yet, so if we want to implement it must be with class components.

Note: Error bounds do not catch errors from: - Event handlers (learn more) - Asynchronous code (setTimeout, requestFrame, callbacks) - Server-Side rendering - Errors are thrown in error boundary (rather than children)

Where to place Errors?

If optional, the granularity of error boundaries is up to you.

You may wrap top-level route components to display a “Something went wrong” message to the user. Also, you may wrap individual widgets in an error boundary to protect them from creasing the rest of the application.

If we simulate the structure that we have been using as an example,

• Header: normal, only with a single text

• Sidebar: logic, a fetch to an API to get dog images

• Content: that will act as our Main rendering, a button set the state to undefined

---

Demo

Let’s code the project, if you don't have a react project yet, you can easily make one using the create-react-app command (for beginners, we recommend the getting started guide).

After that, inside the Header.jsx file we will write a few code lines:

import React from "react";

const Header = () => {
  return (
    <header className="header">
      <h2 className="header-title">Header</h2>
    </header>
  );
};

export default Header;

For Sidebar.jsx file, we create a function to fetch the puppies from the database and we will add this handle to their respective button.

import React, { useState, useEffect } from "react";

const Sidebar = () => {
  const [dogImage, setDogImage] = useState("");

  useEffect(() => {
    handleNewDogImage();
  }, []);

  const handleNewDogImage = async () => {
    const newImage = await fetch("https://dog.ceo/api/breeds/image/random");
    const newImageJson = await newImage.json();
    setDogImage(newImageJson.message);
  };

  return (
    <div className="sidebar">
      <button onClick={handleNewDogImage}>
        Clicking here to get a new dog
      </button>
      <img src={dogImage} alt="" />
    </div>
  );
};

export default Sidebar;

And the one that interests us is a content main on ContentOne.jsx file, where we will have a state and an object which we will set to: undefined. So, will occur the error that we want to capture and handle when the app tries to render and access variables:

import React, { useState } from "react";

const Content = () => {
  const [data, setData] = useState({
    name: "React",
    version: "17.0.0",
  });

  return (
    <div>
      <p>
        For this mini-project we are using <b>{data.name}</b> in its version{" "}
        <b>{data.version}</b>
      </p>
      <p>
        By <button onClick={() => setData(undefined)}>Clicking here</button> the
        component state would set to undefined
      </p>
    </div>
  );
};

export default Content;

In the app.jsx file we should have our Header, SideBar, and ContenOne:

import React from "react";
import "./App.css";

import Header from "./components/layout/Header";
import Sidebar from "./components/layout/Sidebar";
import ContentOne from "./components/screens/ContentOne";

const App = () => {
  return (
    <div className="container">
      <Header />
      <Sidebar />
      <main className="content">
        <ContentOne />
      </main>
    </div>
  );
};

export default App;

And finally, we create the ErrorBoundary.jsx component. In this, we will wrap our app.

import React, { Component } from "react";

export default class ErrorBoundary extends Component {
  constructor(props) {
    super(props);

    this.state = {
      hasError: false,
      error: "",
    };
  }

  static getDerivedStateFromError(error) {
    console.log(error);
    return {
      hasError: true,
      error,
    };
  }

  componentDidCatch(error, errorInfo) {
    console.log(error);
    console.log(errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong! :c</h1>;
    }
    return this.props.children;
  }
}

Note that we need the following:

• A constructor: constructor (props)

• Also, put a flag that will indicate if there is an error: hasError.

• We implement getDerivate() and componentDidCatch() functions

• When an error doesn't exist, the render() method shows the components as children, instead of a fixed components.

This is how it would work if the main error does not affect the functionality of the SideBar:

It also shows us exactly where our error occurred.

We leave you an explanatory video with some more details about Error Boundaries:

If there is an error with the player, you can watch the video at the following LINK.

Resources:

- The error-boundaries git repository.

---

¡Thanks for reading!

📍 Connect with us on instagram👇