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.onerror provide Error objects 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() or ReactDOM.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.

[gaearon]

The color aside, I’d prefer to see the errors in the console and step through them. With Redbox, all I get is the line numbers, which aren’t even right since cheap source maps devtool doesn’t work in Chrome currently.

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:

• Use a different color
• Figure out a way to fix line numbers
• Figure out a way to show more useful info, e.g. a code snippet around failing lines

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.

[gaearon]

Yes, we plan to add this.