Description
Bug report
When using webpack-dev-server in a React project, when a React component throws an error and that error is caught by a React error boundary component, the webpack-dev-server client overlay is still shown, despite the fact the error was caught by the error boundary component.
This makes it difficult to test error handling functionality in development, because the overlay always gets in the way of seeing the error boundary.
This is due a bug in React where caught errors still bubble up to the uncaught error handler. See facebook/react#19613 and facebook/react#10474.
This is a longstanding issue with React and it doesn't seem like it will be addressed anytime soon. For this reason I would like to suggest that we apply the workaround mentioned here so the overlay won't be shown when we detect an error that was caught by an error boundary.
How Do We Reproduce?
Reduced test case https://github.com/OliverJAsh/react-error-boundary-uncaught-issue/tree/webpack-dev-server
Branch: webpack-dev-server
Please paste the results of npx webpack-cli info here, and mention other relevant information
$ yarn run webpack-cli info
yarn run v1.22.19
$ /Users/oliver/Code/react-error-boundary-uncaught-issue/node_modules/.bin/webpack-cli info
System:
OS: macOS 15.2
CPU: (10) arm64 Apple M1 Pro
Memory: 3.60 GB / 16.00 GB
Binaries:
Node: 18.17.1 - /var/folders/5n/mxm8dg1x2y50bqbtf_wxr4k00000gn/T/yarn--1736621266243-0.9405315883601486/node
Yarn: 1.22.19 - /var/folders/5n/mxm8dg1x2y50bqbtf_wxr4k00000gn/T/yarn--1736621266243-0.9405315883601486/yarn
npm: 9.6.7 - /nix/store/xpqj3zg5lx25abv9qybiqd7gcs8b81fp-nodejs-18.17.1/bin/npm
Browsers:
Brave Browser: 131.1.73.97
Chrome: 131.0.6778.265
Safari: 18.2
Packages:
copy-webpack-plugin: ^11.0.0 => 11.0.0
ts-loader: ^9.4.4 => 9.4.4
webpack: ^5.88.2 => 5.88.2
webpack-cli: ^5.1.4 => 5.1.4
webpack-dev-server: ^5.2.0 => 5.2.0
✨ Done in 0.50s.