create-react-app: Add “red box” on any JavaScript errors in development
This is likely to cause some controversy so I’d love to hear the arguments against doing this.
I want to enable “red box” on any JavaScript error in development, similar to the proposal in https://github.com/facebook/react/issues/1753. When an uncaught exception is thrown, an error is shown full screen similar to our syntax overlay (#744). It shows the error message and the stack. The full-screen message can be dismissed by pressing “Escape” in case you still want to interact with a broken app. The error is also printed in the console, like before.
We can use https://github.com/commissure/redbox-react although I’d prefer to have full control over this box in our monorepo to quickly patch bugs and improve the output.
Why I want to do this:
- React is currently not tolerant to errors thrown inside components. Its internal state often gets corrupted by this, so we want to surface errors early and prominently.
- We already do this on React Native to great success.
- In CRA we control the environment and we can do this.
- This is a part of my plan to bring hot reloading to CRA: https://github.com/gaearon/react-hot-boilerplate/issues/97#issuecomment-249862775.
Open questions:
- How to capture all errors with stacks in development. Does
window.onerrorprovideErrorobjects in modern browsers now? - What to do about unhandled Promise rejections. Ideally we want to surface them given how common this problem and misunderstanding is.
- What do do about errors inside React that accidentally get caught, like https://github.com/facebook/react/issues/7617#issuecomment-247710003. Even if the code is technically valid, React just doesn’t support this pattern. Any error inside
setState()orReactDOM.render()is going to mess it up. We could monkey-patch them to report errors, or add some hooks in React itself to surface them.
Feedback and thoughts welcome.
About this issue
- Original URL
- State: closed
- Created 8 years ago
- Reactions: 38
- Comments: 25 (13 by maintainers)
None of these are problems with the idea of catching errors and displaying them. These are problems with one particular way of doing so.
There is no reason why we couldn’t:
Please unleash your fantasy 😉 . We don’t need to think in terms of existing solutions, we need think about the desired experience, and then figure out a way to make it possible.
Yes, we plan to add this.
@volkanunsal We’ll be adding additional logging to the console https://github.com/commissure/redbox-react/issues/77
We want to surface all errors, not just ones that occurred during component rendering. It’s also hard to statically find all components (I tried it before, and I don’t think it’s a good approach).
Regarding the question of using
redbox-reactor something custom stored in this monorepo:I would be glad to help in any way I can to make this solution based on
redbox-react. Monorepo or not, I don’t think that fragmenting solutions for exactly the same problem is good for the community. Whatever steps we need to take to keep this solution universal, I’m willing to take (add contributors, etc.). Please let everybody benefit from the improvements redbox will receive from being integrated into CRA.What would you deem necessary to make this work?
Merged into master via #1101.
@brandonmikeska we’re going to merge the first version of this soon into master, so I’m sure some stuff will come up during testing! 😄 Check in frequently.