feat(overlay): allow full customization of the error overlay integration

[pmmmwh]

Background

It has been a while since the last release, and a lot of opinion have been brought up related to the error overlay integration. This PR aims to address most of them, whether it is to not use it, or use some tool-dependent ones.

Proposed API

interface ErrorOverlayOptions {
  /* The module you want to use as an error overlay. */
  module: string;
  /* The module you want to use as an entry point to set up the error overlay. */
  entry?: string;
}

Read README.md for a better explanation since there some caveats related to this approach.

Fixes #28
Partially addresses #7
Supersedes #33 #41
Related facebook/create-react-app#8582

CC @gaearon @blainekasten @ianschmitz @Timer

Would love your thoughts as framework authors since you are the main target for the verbose API. I can create a PR in create-react-app after this lands so that react-error-overlay can be made compatible.

[blainekasten]

@pmmmwh I think this proposal looks pretty solid. When I started using this project, I was surprised to see a custom built error screen and not reuse react-error-overlay which is already pretty common and stable.

Can you maybe explain a bit why we need to have our own custom overlay within this project?

[pmmmwh]

Can you maybe explain a bit why we need to have our own custom overlay within this project?

@blainekasten
First - Dan expects a react-refresh integration to have an overlay integration so that errors/warnings are immediately obvious, so the overlay integration had to be done anyways. On to why we're rocking a custom one, this is mainly because react-error-overlay imposes quite a bit of concerns on users' Webpack set up, and I didn't want that to affect the usability of this plugin.

Some of those includes: the cheap-module-source-map devtoolmust be used (it is probably not the best one, and some would decide to not use a devtool) and the IDE/source-linking integration requires custom server middlewares (which is not feasible for a lot of people). I could have sent PRs to get these issues resolved (or gracefully fallback to something less powerful), but I didn't that to block development/release of the plugin, so in the end I decided to go custom.

[ianschmitz]

It would be good to get feedback from @Timer, as i know that he had some thoughts on what a next gen of react-error-overlay may look like.

[ro-savage]

Would be good to just be able to turn it off. I personally prefer just seeing the errors in the console.

[pmmmwh]

Would be good to just be able to turn it off. I personally prefer just seeing the errors in the console.

With this API you can just pass false and it will be off.

[charrondev]

I like it! @pmmmwh As I said in facebook/create-react-app#8582 (comment) once this is wrapped it will probably make for a better CRA integration (even though I like the overlay in this plugin more than the CRA one).

[larsbs]

Any news on this?

[pmmmwh]

Any news on this?

I am trying to get a bit more feedback, so no concrete eta yet, sorry. Hopefully this can be merged next week.

[larsbs]

There's an issue with line. Basically, this is resolving to [errorOverlay]: false so webpack is complaining that there's no module named false

If you remove the line, everything works fine (but of course you won't have the overlay)

[pmmmwh]

Yes, I noticed this. A fix is on its way.