Make it clearer in error overlay when error boundary has caught an error
See original GitHub issueIs this a bug report?
Yes
Can you also reproduce the problem with npm 4.x?
Yes
Which terms did you search for in User Guide?
componentDidCatch, error boundaries
Environment
-
node -v
: 8.9.2 -
npm -v
: 5.5.1 -
yarn --version
(if you use Yarn): 0.17.10 -
npm ls react-scripts
(if you haven’t ejected): 1.0.0 -
Operating system: Linux
-
Browser and version (if relevant): Chrome 63
Steps to Reproduce
- bootstrap app with create-react-app
- create an error boundary
- trigger an error in a child of that error boundary
Expected Behavior
I would assume React dealt with the error, and no overlay was necessary.
Actual Behavior
The error overlay is placed on top of the app, like an uncaught error occurred. If I manually remove the error overlay from the DOM (via devtools), the correct UI is rendered below.
Reproducible Demo
Issue Analytics
- State:
- Created 6 years ago
- Reactions:7
- Comments:20 (11 by maintainers)
Top Results From Across the Web
Make it clearer in error overlay when error boundary has ...
I'd like to bring this up again. Especially as ErrorBoundaries are increasing in use, having the error-overlay pop up when the error is...
Read more >create react app - Disable error overlay in development mode
Open the developerconsole and select the html tag. There you can remove the event listeners on error and unhandlerejection which is put in...
Read more >Handling JavaScript errors in React with error boundaries
js have an error overlay component that blocks the UI whenever there is an error, overshadowing your own error boundaries. In create-react-app, ...
Read more >Error Boundaries - React
A class component becomes an error boundary if it defines either (or both) of the lifecycle methods static getDerivedStateFromError() or componentDidCatch() .
Read more >Use react-error-boundary to handle errors in React
Oh, one other thing. Right now, you may notice that you'll experience that error overlay even if the error was handled by your...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
Top Related Hashnode Post
No results found
Top GitHub Comments
This issue is a Gotcha for people who are new to ErrorBoundaries and are just trying out the concept with create-react-app or on sandbox.io. You end up debugging for an hour before you realize that react-error-overlay is just hiding the boundary and boundary actually worked. @gaearon I would like to work on this issue. How can I help? How would you like to fix it?
How do we actually test our error boundaries locally when using Create React App? Can we disable the full page debug iframe?