Overlay and error boundaries

The overlay is currently hiding components that are meant to caught specific errors (for instance network errors, like 404). While I’ve seen mentioned that error boundaries should be used sparingly anyway, I still find the UX fairly annoying 😕

At the very least, it would be nice if we could manually tag errors as “silences the overlay”, something like:

static getDerivedStateFromError(error: Error) {
  // Would set a symbol on the `error` instance that Overlay
  // would use to detect when to prevent the overlay
  window.preventOverlayOnError(error);
  return {error};
}

[SystemParadox]

I really think we need a preventOverlay or similar here.

1. So we can mark errors as handled within react error boundaries
2. So we can avoid showing the error overlay if the error is handled by a global error handler in the application

[everscending]

Ok… I just discovered that this can be disabled like so:

new ReactRefreshWebpackPlugin({ overlay: false })

This was not apparent on the main NPM package page and is buried here - https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/HEAD/docs/API.md