feat: allow filter overlay message with function #4813

malcolm-kee · 2023-04-11T15:33:16Z

For Bugs and Features; did you add new tests?

Motivation / Use-Case

Allow filtering of overlay message
Fix misleading overlay title when catching runtime error

Resolves

[feat] allow to filter runtime errors/errors/warning in overlay #4777

Breaking Changes

Additional Info

malcolm-kee · 2023-04-11T15:37:44Z

Haven't look into test, but based on manual testing on the example it's working. In case anyone want to take over feel free to proceed to fork my implementation and update on top, my time for OSS is quite limited recently. 😢

codecov · 2023-04-11T15:41:55Z

Codecov Report

Patch coverage: 86.11% and project coverage change: -0.04 ⚠️

Comparison is base (ee748a7) 91.99% compared to head (f7386f6) 91.96%.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #4813      +/-   ##
==========================================
- Coverage   91.99%   91.96%   -0.04%     
==========================================
  Files          16       16              
  Lines        1673     1704      +31     
  Branches      625      647      +22     
==========================================
+ Hits         1539     1567      +28     
- Misses        123      126       +3     
  Partials       11       11

Impacted Files	Coverage Δ
client-src/index.js	`79.86% <76.19%> (-1.25%)`	⬇️
lib/Server.js	`93.80% <100.00%> (+0.06%)`	⬆️

... and 1 file with indirect coverage changes

☔ View full report in Codecov by Sentry.
📢 Do you have feedback about the report comment? Let us know in this issue.

malcolm-kee · 2023-04-11T15:42:38Z

lib/Server.js

+           */
+          const encodeOverlaySettings = (setting) =>
+            typeof setting === "function"
+              ? encodeURIComponent(setting.toString())


Usage of encodeURIComponent here is intentional, because without it URLSearchParams will encode white space into + character, which could not be decoded correctly in parseURL in client.

Alternative is to use URLSearchParams in client side, but I think the drawback of that is cannot support old browser.

client-src/index.js

alexander-akait

Looks good, I have a couple questions

malcolm-kee · 2023-04-12T13:39:27Z

@alexander-akait ~~slightly out-of-topic, any plan to migrate from puppeteer to playwright or upgrade puppeteer? I can't run test locally which I suspect is because of puppeteer~~ 😢

I realize there is #2843 , maybe will do side quest then

alexander-akait · 2023-04-12T14:17:32Z

@malcolm-kee Yeah, it will be great, I think it is not a problem problem, because most of our code is encupsulated also API is almost the same, so feel free to try it I will help

alexander-akait

Looks good, I see we don't have tests on it right? is it hard to test?

malcolm-kee · 2023-05-05T14:13:34Z

Will try using addScriptTag: https://pptr.dev/api/puppeteer.page.addscripttag

alexander-akait · 2023-05-05T14:15:11Z

Yeah, thank you, feel free to ping me if you will need help

alexander-akait · 2023-05-05T15:28:23Z

Thank you good job, I think we can merge and release it

malcolm-kee · 2023-05-05T15:30:00Z

@alexander-akait I'm adding more tests and realize that the following code will overwrite the overlay settings:

https://github.com/webpack/webpack-dev-server/blob/master/client-src/index.js#L170-L176

What's the use case of supporting that socket message from server?

alexander-akait · 2023-05-05T15:47:11Z

@malcolm-kee some tools can't inject your code in webpack bundle process, but they need to enable/disable some features, so we provide ability to do, i.e you can use own websocket server and do it, but I am thinking no one currently use it

malcolm-kee · 2023-05-05T15:47:54Z

Got it. For completeness let me handle that.

alexander-akait · 2023-05-05T15:52:19Z

Thank you

client-src/index.js

malcolm-kee · 2023-05-06T01:18:05Z

I found bug. ~~Checking...~~ Fixed.

malcolm-kee · 2023-05-06T01:51:00Z

@alexander-akait by the way I also plan to let runtimeErrors catch unhandled promise rejection as well, but probably in next PR after this.

snitin315 · 2023-05-06T03:58:25Z

client-src/index.js

+          type: "BUILD_ERROR",
+          level: "warning",
+          messages: warnings,


Shouldn't this be BUILD_WARNING?

the event type purpose is to determine how to transition the state:

webpack-dev-server/client-src/overlay/state-machine.js

Lines 32 to 38 in f7386f6

BUILD_ERROR: {

target: "displayBuildError",

actions: ["setMessages", "showOverlay"],

},

RUNTIME_ERROR: {

target: "displayRuntimeError",

actions: ["setMessages", "showOverlay"],

I don't mind refactor to add event type BUILD_WARNING and remove level property, although it does introduce some duplication in the state machine.

I think it's fine 👍🏻

snitin315

LGTM, thank you for working on this 🚀

We will also need to document this on https://webpack.js.org/configuration/dev-server/#overlay

wentokay · 2023-06-02T19:36:07Z

client-src/index.js

+        const overlayFilterFunction = new Function(
+          "message",
+          `var callback = ${overlayFilterFunctionString}
+        return callback(message)`
+        );


this new Function() breaks devserver for chrome extensions with the following error

Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'".

it could be fixed by adding 'unsafe-eval' in the manifest but that isn't really an option for us so we're going to roll back for now

@wentokay We can optionally inject this, can you open an issue?

malcolm-kee commented Apr 11, 2023

View reviewed changes

client-src/index.js Outdated Show resolved Hide resolved

alexander-akait reviewed Apr 11, 2023

View reviewed changes

client-src/index.js Outdated Show resolved Hide resolved

alexander-akait reviewed Apr 11, 2023

View reviewed changes

malcolm-kee force-pushed the feat/error-filter-fn branch from 4f481cd to f7b1747 Compare May 5, 2023 09:59

feat: allow filter overlay message with function

4658fde

malcolm-kee force-pushed the feat/error-filter-fn branch from 2dcb797 to 4658fde Compare May 5, 2023 12:51

fix: update snapshot

9e63422

alexander-akait reviewed May 5, 2023

View reviewed changes

test: add test for overlay runtimeErrors

9c6e408

alexander-akait previously approved these changes May 5, 2023

View reviewed changes

test: test overlay errors and warnings filter function

6c017eb

malcolm-kee dismissed alexander-akait’s stale review via 6c017eb May 5, 2023 16:23

malcolm-kee commented May 5, 2023

View reviewed changes

client-src/index.js Show resolved Hide resolved

malcolm-kee marked this pull request as ready for review May 5, 2023 16:27

malcolm-kee requested review from hiroppy, snitin315 and anshumanv as code owners May 5, 2023 16:27

malcolm-kee added 2 commits May 6, 2023 11:35

fix: encode overlay options correctly

2132c30

fix: update types

f7386f6

snitin315 reviewed May 6, 2023

View reviewed changes

snitin315 approved these changes May 6, 2023

View reviewed changes

alexander-akait approved these changes May 6, 2023

View reviewed changes

alexander-akait merged commit aab01b3 into webpack:master May 6, 2023
64 of 67 checks passed

alexander-akait mentioned this pull request May 6, 2023

[feat] allow to filter runtime errors/errors/warning in overlay #4777

Closed

malcolm-kee deleted the feat/error-filter-fn branch May 7, 2023 05:35

malcolm-kee mentioned this pull request May 7, 2023

Document dev server overlay improvement webpack/webpack.js.org#6808

Closed

1 task

wentokay mentioned this pull request Jun 2, 2023

hide ResizeObserver error overlay in dev coral-xyz/backpack#4117

Merged

wentokay reviewed Jun 2, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: allow filter overlay message with function #4813

feat: allow filter overlay message with function #4813

malcolm-kee commented Apr 11, 2023 •

edited

malcolm-kee commented Apr 11, 2023

codecov bot commented Apr 11, 2023 •

edited

malcolm-kee Apr 11, 2023 •

edited

alexander-akait left a comment

malcolm-kee commented Apr 12, 2023 •

edited

alexander-akait commented Apr 12, 2023

alexander-akait left a comment

malcolm-kee commented May 5, 2023

alexander-akait commented May 5, 2023

alexander-akait commented May 5, 2023

malcolm-kee commented May 5, 2023

alexander-akait commented May 5, 2023

malcolm-kee commented May 5, 2023

alexander-akait commented May 5, 2023

malcolm-kee commented May 6, 2023 •

edited

malcolm-kee commented May 6, 2023

snitin315 May 6, 2023

malcolm-kee May 6, 2023

snitin315 May 6, 2023

snitin315 left a comment

wentokay Jun 2, 2023

alexander-akait Jun 2, 2023

	BUILD_ERROR: {
	target: "displayBuildError",
	actions: ["setMessages", "showOverlay"],
	},
	RUNTIME_ERROR: {
	target: "displayRuntimeError",
	actions: ["setMessages", "showOverlay"],

feat: allow filter overlay message with function #4813

feat: allow filter overlay message with function #4813

Conversation

malcolm-kee commented Apr 11, 2023 • edited

For Bugs and Features; did you add new tests?

Motivation / Use-Case

Breaking Changes

Additional Info

malcolm-kee commented Apr 11, 2023

codecov bot commented Apr 11, 2023 • edited

Codecov Report

malcolm-kee Apr 11, 2023 • edited

Choose a reason for hiding this comment

alexander-akait left a comment

Choose a reason for hiding this comment

malcolm-kee commented Apr 12, 2023 • edited

alexander-akait commented Apr 12, 2023

alexander-akait left a comment

Choose a reason for hiding this comment

malcolm-kee commented May 5, 2023

alexander-akait commented May 5, 2023

alexander-akait commented May 5, 2023

malcolm-kee commented May 5, 2023

alexander-akait commented May 5, 2023

malcolm-kee commented May 5, 2023

alexander-akait commented May 5, 2023

malcolm-kee commented May 6, 2023 • edited

malcolm-kee commented May 6, 2023

snitin315 May 6, 2023

Choose a reason for hiding this comment

malcolm-kee May 6, 2023

Choose a reason for hiding this comment

snitin315 May 6, 2023

Choose a reason for hiding this comment

snitin315 left a comment

Choose a reason for hiding this comment

wentokay Jun 2, 2023

Choose a reason for hiding this comment

alexander-akait Jun 2, 2023

Choose a reason for hiding this comment

malcolm-kee commented Apr 11, 2023 •

edited

codecov bot commented Apr 11, 2023 •

edited

malcolm-kee Apr 11, 2023 •

edited

malcolm-kee commented Apr 12, 2023 •

edited

malcolm-kee commented May 6, 2023 •

edited