How to Trigger React Error Boundary with React Developer Tools

#guide #react #tips

What is a React Error Boundary?

According to react.js documentation, 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 catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them. (Read more)

Use case

We want to test how our application handles error states. Using the React Developer Tools, we won't be needing to manually force an error state in our code for each component we want to test. Instead, we can just select a component from the tool and force it to be in an error state.

Prerequisites

React Developer Tools chrome extension
- installation
A working React App with React Error Boundary

Demo

Start your React Application and open it on your Google Chrome web browser. (make sure you already have React Developer Tools chrome extension installed)

Open your Chrome Developer Tools and navigate to Components tab.



shift + CTRL + J (Windows/Linux).
option + ⌘ + J (macOS)

3. Select a component within the Error Boundary in the tree.
  - Notice the (!) icon. Hovering it should show a help dialog **"Force the selected component into an errored state"**

    ![Chrome Developer Tools with an open Components tab](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3rwp4j5skdcb0l4a4n3z.png)
4. Click on the (!) icon
  - This will force your app to be in an errored state
    ![React App in Error state](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k3w269zkl88e4etcf52i.png)