Add “red box” on any JavaScript errors in development

Created by: gaearon

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.