diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index 44a46833960b..5eeb9510eea7 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -19,7 +19,7 @@ Once you are in the project directory, run the following commands: - `yarn build` to create a production version of the site. - `yarn start` to develop on a local webpack-dev-server: [localhost:3000][3]. -> NOTE: run `yarn fetch` before running `yarn start` command for the first time +> NOTE: run `yarn fetch-repos` and then `yarn fetch` before running `yarn start` command for the first time - `yarn fetch` to retrieve external documentation/data. diff --git a/src/content/configuration/dev-server.mdx b/src/content/configuration/dev-server.mdx index 1a1655cce8f9..897be523a823 100644 --- a/src/content/configuration/dev-server.mdx +++ b/src/content/configuration/dev-server.mdx @@ -22,6 +22,7 @@ contributors: - snitin315 - Biki-das - SaulSilver + - malcolm-kee --- [webpack-dev-server](https://github.com/webpack/webpack-dev-server) can be used to quickly develop an application. See the [development guide](/guides/development/) to get started. @@ -249,7 +250,7 @@ npx webpack serve --client-logging info ### overlay -`boolean = true` `object: { errors boolean = true, warnings boolean = true }` +`boolean = true` `object` Shows a full-screen overlay in the browser when there are compiler errors or warnings. @@ -278,7 +279,17 @@ To disable: npx webpack serve --no-client-overlay ``` -If you want to show only errors: +You can provide an object with the following properties for more granular control: + +| Property | Explanation | +| --------------- | ------------------------ | +| `errors` | compilation errors | +| `runtimeErrors` | unhandled runtime errors | +| `warnings` | compilation warnings | + +All properties are optional and default to `true` when not provided. + +For example, to disable compilation warnings, you can provide the following configuration: **webpack.config.js** @@ -290,6 +301,7 @@ module.exports = { overlay: { errors: true, warnings: false, + runtimeErrors: true, }, }, }, @@ -299,9 +311,35 @@ module.exports = { Usage via the CLI: ```bash -npx webpack serve --client-overlay-errors --no-client-overlay-warnings +npx webpack serve --client-overlay-errors --no-client-overlay-warnings --client-overlay-runtime-errors +``` + +To filter based on the thrown error, you can pass a function that accepts an `error` parameter and returns a boolean. + +For example, to ignore errors thrown by [`AbortController.abort()`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController/abort): + +**webpack.config.js** + +```javascript +module.exports = { + //... + devServer: { + client: { + overlay: { + runtimeErrors: (error) => { + if (error instanceof DOMException && error.name === 'AbortError') { + return false; + } + return true; + }, + }, + }, + }, +}; ``` +W> The function will not have access to the variables declared in the outer scope within the configuration file. + ### progress `boolean`