fix(webpack): Add webpack ErrorOverlayPlugin to improve error visibility (fixes #146). #147
Conversation
WalkthroughThe pull request introduces updates to the Changes
Assessment against linked issues
Possibly related PRs
Suggested reviewers
📜 Recent review detailsConfiguration used: CodeRabbit UI ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (2)
🔇 Additional comments (7)webpack.dev.js (5)
The addition of ErrorOverlayPlugin directly addresses the issue of webpack-internal:// links in stack traces. Also applies to: 63-63
Disabling the built-in webpack overlay is necessary when using ErrorOverlayPlugin to avoid duplicate error displays.
The overlay configuration for ReactRefreshWebpackPlugin aligns with the devServer client configuration, ensuring consistent error handling behaviour.
The querystring fallback is correctly configured and well-documented as a requirement for ErrorOverlayPlugin.
The switch to "cheap-module-source-map" might affect the quality of error stack traces. Let's verify this doesn't impact the error overlay's effectiveness. ✅ Verification successfulSource map change is compatible with error overlay functionality The error overlay functionality is properly configured in webpack.dev.js with ErrorOverlayPlugin, and "cheap-module-source-map" is a widely supported devtool option that maintains sufficient source mapping for error reporting. The change from "eval-source-map" to "cheap-module-source-map" trades some debugging detail for better build performance while still providing adequate error stack traces.
🏁 Scripts executedThe following scripts were executed for the analysis: Script: #!/bin/bash
# Search for any discussions or known issues about ErrorOverlayPlugin compatibility with cheap-module-source-map
rg -g "*.md" -g "*.js" -i "cheap-module-source-map.*error.overlay|error.overlay.*cheap-module-source-map"
# Check if there are any existing devtool configurations in other webpack files
fd -e js -e ts webpack | xargs rg "devtool.*source-map"
Length of output: 263 Script: #!/bin/bash
# Check for error overlay plugin usage and configuration
rg -g "*.js" -g "*.ts" "ErrorOverlay|error-overlay"
# Check webpack configuration files for any error overlay related settings
fd -e js -e ts webpack | xargs rg -i "overlay"
# Look for any documentation about error reporting configuration
fd README.md CONTRIBUTING.md | xargs rg -i "error|debug|sourcemap"
Length of output: 22846 package.json (2)
The error-overlay-webpack-plugin version ^1.1.1 is the latest stable release and follows proper semver practices.
The querystring-es3 version ^0.2.1 is correctly added as a required dependency for the ErrorOverlayPlugin fallback configuration. Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
junhaoliao
changed the title
| hot: "only", | ||
| open: true, | ||
| port: 3010, | ||
| watchFiles: ["src/services/**/*"], | ||
| }, | ||
| devtool: "eval-source-map", | ||
| devtool: "cheap-module-source-map", |
There was a problem hiding this comment.
This is needed for react-error-overlay to work.
| @@ -53,6 +57,15 @@ module.exports = mergeWithRules({ | |||
| filename: "[name].bundle.js", | |||
| }, | |||
| plugins: [ | |||
| new ReactRefreshWebpackPlugin(), | |||
| new ReactRefreshWebpackPlugin({ | |||
| overlay: false, | |||
There was a problem hiding this comment.
to disable the overlay provided by @pmmmwh/react-refresh-webpack-plugin to avoid conflicts.
| @@ -15,12 +16,15 @@ module.exports = mergeWithRules({ | |||
| }, | |||
| })(common, { | |||
| devServer: { | |||
| client: { | |||
| overlay: false, | |||
There was a problem hiding this comment.
to disable the overlay provided by the webpack devServer to avoid conflicts.
|
Let's put this on hold as I discovered that the error overlay does not auto dismiss after the error is fixed. some hooks might need to be registered to achieve auto dismiss |
Description
Fixes #146
Validation performed
Summary by CodeRabbit
New Features
Bug Fixes