improve our overlay

[alexander-akait]

• This is a bug
• This is a modification request

Code

improve our default overlay:

1. Allow to catch runtime errors
2. Improve errors/warnings reporting (ideally we should have )
3. Improve styles
4. More?

CRA has react-error-overlay, I think we can union with them and create the one great overlay

/cc @raix

Please paste the results of webpack-cli info and webpack-cli version here, and mention other relevant information

Expected Behavior

Better DX

Actual Behavior

Our overlay is very simple and in some places have bad DX

[Eli-Black-Work]

Not sure if it's possible, but it would be awesome if compilation errors were shown after refreshing the page! 🙂 Currently if the page is refreshed when there's a compilation error, we just get a whitescreen and no overlay is shown.

[SuneelFreimuth]

I'd be happy to try implementing these improvements.

[alexander-akait]

Not sure if it's possible, but it would be awesome if compilation errors were shown after refreshing the page! slightly_smiling_face Currently if the page is refreshed when there's a compilation error, we just get a whitescreen and no overlay is shown.

Can you provide reproducible steps, I think it is bug

[ylemkimon]

react-error-overlay seems to be easily integrable, adding it to the client works out of the box. Two notes:

• it doesn't support build warnings, i.e., build errors are not dismissable
• it also displays runtime errors, which is not the existing overlay did. If the dev server decides to support this, source code fetch logic should be also updated

[alexander-akait]

@ylemkimon yep, feel free to start it, for runtime errors we need a new options for overlay, i.e. overlay.runtimeErrors

[sibelius]

how can I customize overlay behavior?

I've tried this

devServer: {
   overlay: {
      warnings: false,
      errors: true
    }
}
```

but it did not worked

[alexander-akait]

Should work, what is the problem?

[ylemkimon]

@sibelius If you're using dev server v4, you should put overlay in client (https://github.com/webpack/webpack-dev-server/blob/master/migration-v4.md):

devServer: {
   client: {
      overlay: {
         warnings: false,
         errors: true
       }
   }
}