DEV Community

Cover image for How to Trigger React Error Boundary with React Developer Tools
Nina Ricci
Nina Ricci

Posted on

How to Trigger React Error Boundary with React Developer Tools

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
  • A working React App with React Error Boundary

Demo

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

  2. 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

  4. Click on the (!) icon

    • This will force your app to be in an errored state React App in Error state

Oldest comments (1)

Collapse
 
joebri profile image
Joel Brighton

What a great tip! Thanks for sharing.