Skip to content

Commit 03eeeb0

Browse files
committed
docs(Configuration): document new devServer.overlay options
1 parent 0be627d commit 03eeeb0

File tree

2 files changed

+42
-4
lines changed

2 files changed

+42
-4
lines changed

.github/CONTRIBUTING.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ Once you are in the project directory, run the following commands:
1919
- `yarn build` to create a production version of the site.
2020
- `yarn start` to develop on a local webpack-dev-server: [localhost:3000][3].
2121

22-
> NOTE: run `yarn fetch` before running `yarn start` command for the first time
22+
> NOTE: run `yarn fetch-repos` and then `yarn fetch` before running `yarn start` command for the first time
2323
2424
- `yarn fetch` to retrieve external documentation/data.
2525

src/content/configuration/dev-server.mdx

+41-3
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ contributors:
2222
- snitin315
2323
- Biki-das
2424
- SaulSilver
25+
- malcolm-kee
2526
---
2627

2728
[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
249250

250251
### overlay
251252

252-
`boolean = true` `object: { errors boolean = true, warnings boolean = true }`
253+
`boolean = true` `object`
253254

254255
Shows a full-screen overlay in the browser when there are compiler errors or warnings.
255256

@@ -278,7 +279,17 @@ To disable:
278279
npx webpack serve --no-client-overlay
279280
```
280281

281-
If you want to show only errors:
282+
You can provide an object with the following properties for more granular control:
283+
284+
| Property | Explanation |
285+
| --------------- | ------------------------ |
286+
| `errors` | compilation errors |
287+
| `runtimeErrors` | unhandled runtime errors |
288+
| `warnings` | compilation warnings |
289+
290+
All properties are optional and default to `true` when not provided.
291+
292+
For example, to disable compilation warnings, you can provide the following configuration:
282293

283294
**webpack.config.js**
284295

@@ -290,6 +301,7 @@ module.exports = {
290301
overlay: {
291302
errors: true,
292303
warnings: false,
304+
runtimeErrors: true,
293305
},
294306
},
295307
},
@@ -299,9 +311,35 @@ module.exports = {
299311
Usage via the CLI:
300312

301313
```bash
302-
npx webpack serve --client-overlay-errors --no-client-overlay-warnings
314+
npx webpack serve --client-overlay-errors --no-client-overlay-warnings --client-overlay-runtime-errors
315+
```
316+
317+
To filter based on the thrown error, you can pass a function that accepts an `error` parameter and returns boolean.
318+
319+
For example, to ignore error thrown by [`AbortController.abort()`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController/abort):
320+
321+
**webpack.config.js**
322+
323+
```javascript
324+
module.exports = {
325+
//...
326+
devServer: {
327+
client: {
328+
overlay: {
329+
runtimeErrors: (error) => {
330+
if (error instanceof DOMException && error.name === 'AbortError') {
331+
return false;
332+
}
333+
return true;
334+
},
335+
},
336+
},
337+
},
338+
};
303339
```
304340

341+
W> The function will not have access to variables declared in the outer scope within the configuration file.
342+
305343
### progress
306344

307345
`boolean`

0 commit comments

Comments
 (0)