Create-react-app: Show a transparent overlay with development warnings

[Timer]

As proposed here, maybe we should have a transparent "warning overlay" which is dismiss-able.

[hamxabaig]

It'll show in the website the user is developing @Timer ? If yes, a full screen overlay shows every time when there are warnings ?

[Timer]

Warnings won't take over the screen like an error.

The idea is to make less-intrusive version of the crash overlay which appears for runtime warnings, and maybe compile warnings.

Basically, only when in development mode, there would be a small pop-up on screen (which is unobtrusive). Hovering it would display more context and clicking would "pop" it into a full screen overlay like crash overlay.

Think toastr.

[hamxabaig]

Cool, Okay 👍

[gaearon]

I would hold off implementing this because we might want to build something like this into React itself. @bvaughn experimented with it. It’s going to be confusing if these efforts are not aligned.

[viankakrisna]

@bvaughn @gaearon any update on the warnings? I've got my hands free and build this for CRA's lint warning.

[bvaughn]

Nothing yet on our end, @viankakrisna, although I plan to pick it back up soon.
Your overlay looks nice! 😄

[viankakrisna]

Thanks! sent a PR 😄 IIRC the React ones gonna be about React's own warning right?

[bvaughn]

Depends. We haven't decided yet what the error/warning API will look like for 16. Would be nice if CRA (and maybe other 3rd party libs) could piggy-back on React's warning system.

[viankakrisna]

Ok, I'll leave it to the maintainers about my overlay then. Excited to see how it will be implemented though :)

[sw-yx]

We have exposed frames for react 16 warnings in https://github.com/facebook/react/pull/13242 and react-error-overlay can now take advantage of them in a future rewrite