Skip to content

Commit

Permalink
docs(API): document new devServer.overlay options
Browse files Browse the repository at this point in the history
  • Loading branch information
malcolm-kee committed May 7, 2023
1 parent 0be627d commit 899a7f6
Show file tree
Hide file tree
Showing 2 changed files with 42 additions and 4 deletions.
2 changes: 1 addition & 1 deletion .github/CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
44 changes: 41 additions & 3 deletions src/content/configuration/dev-server.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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.

Expand Down Expand Up @@ -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**

Expand All @@ -290,6 +301,7 @@ module.exports = {
overlay: {
errors: true,
warnings: false,
runtimeErrors: true,
},
},
},
Expand All @@ -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 boolean.

For example, to ignore error 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 variables declared in the outer scope within the configuration file.

### progress

`boolean`
Expand Down

0 comments on commit 899a7f6

Please sign in to comment.