What is a React Error Boundary?
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.
- React Developer Tools chrome extension
- A working React App with React Error Boundary
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)
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"
Click on the (!) icon
- This will force your app to be in an errored state
Top comments (1)
What a great tip! Thanks for sharing.