Webpages containing CSS.paintWorklet.addModule crashes lighthouse

[WesselKroos]

FAQ

• Yes, my issue is not about variability or throttling.
• Yes, my issue is not about a specific accessibility audit (file with axe-core instead).

URL

https://jsbin.com/cayahawahi/edit?html,output

What happened?

We have a webpage that uses the CSS Painting API to paint a mask on a div and use CSS.paintWorklet.addModule to load the paint worklet.
But when the CSS.paintWorklet.addModule function is executed lighthouse loses the connection to DevTools and closes the Chrome browser because of the error Unhandled Rejection. Reason: ProtocolError: Protocol error (Network.enable): 'Network.enable' wasn't found

Webpage screenshot:

What did you expect?

Lighthouse should not crash when a paint worklet module is being loaded.

What have you tried?

I was able to successfully create a CDPSession in a puppeteer script without any crashes. This was without lighthouse.
This was the puppeteer script:

import puppeteer from 'puppeteer';

(async () => {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();
  const client = await page.target().createCDPSession();
  await client.send('Network.enable');
  await page.goto('http://127.0.0.1:5500/paintworklet.html');
  await page.setViewport({width: 1080, height: 1024});
  await page.waitForSelector('div', { timeout: 30_000 });
  await new Promise(resolve => setTimeout(resolve, 50_000));
  console.log('page loaded');
  await browser.close();
})();

How were you running Lighthouse?

CLI, node

Lighthouse Version

11.4.0

Chrome Version

119.0.6045.105

Node Version

20.9.0

OS

Windows 11

Relevant log output

lighthouse http://127.0.0.1:5500/paintworklet.html

  LH:ChromeLauncher Waiting for browser. +0ms
  LH:ChromeLauncher Waiting for browser... +1ms
  LH:ChromeLauncher Waiting for browser..... +517ms
  LH:ChromeLauncher Waiting for browser.....√ +2ms
  LH:status Connecting to browser +413ms
  LH:status Navigating to about:blank +7ms
  LH:status Benchmarking machine +8ms
  LH:status Preparing target for navigation mode +1s
  LH:status Cleaning origin data +12ms
  LH:status Cleaning browser cache +21ms
  LH:status Preparing network conditions +12ms
  LH:status Navigating to http://127.0.0.1:5500/paintworklet.html +50ms
Unhandled Rejection. Reason: ProtocolError: Protocol error (Network.enable): 'Network.enable' wasn't found
  LH:ChromeLauncher Killing Chrome instance 17160 +28ms
Unhandled Rejection. Reason: ProtocolError: Protocol error (Network.enable): 'Network.enable' wasn't found
  LH:ChromeLauncher Killing Chrome instance 17160 +296ms
  LH:ChromeLauncher:error taskkill stderr ERROR: The process "17160" not found.
 +257ms
  LH:Driver:error TargetCloseError: Protocol error (Debugger.setSkipAllPauses): Target closed
  LH:Driver:error     at CallbackRegistry.clear (file:///C:/Git/Project/lighthouse/node_modules/puppeteer-core/lib/esm/puppeteer/common/CallbackRegistry.js:72:36)
  LH:Driver:error     at CdpCDPSession._onClosed (file:///C:/Git/Project/lighthouse/node_modules/puppeteer-core/lib/esm/puppeteer/cdp/CDPSession.js:98:25)
  LH:Driver:error     at #onClose (file:///C:/Git/Project/lighthouse/node_modules/puppeteer-core/lib/esm/puppeteer/cdp/Connection.js:154:21)
  LH:Driver:error     at WebSocket.<anonymous> (file:///C:/Git/Project/lighthouse/node_modules/puppeteer-core/lib/esm/puppeteer/node/NodeWebSocketTransport.js:41:30)
  LH:Driver:error     at callListener (C:\Git\Project\lighthouse\node_modules\puppeteer-core\node_modules\ws\lib\event-target.js:290:14)
  LH:Driver:error     at WebSocket.onClose (C:\Git\Project\lighthouse\node_modules\puppeteer-core\node_modules\ws\lib\event-target.js:220:9)
  LH:Driver:error     at WebSocket.emit (node:events:514:28)
  LH:Driver:error     at WebSocket.emitClose (C:\Git\Project\lighthouse\node_modules\puppeteer-core\node_modules\ws\lib\websocket.js:265:10)
  LH:Driver:error     at Receiver.receiverOnFinish (C:\Git\Project\lighthouse\node_modules\puppeteer-core\node_modules\ws\lib\websocket.js:1198:20)      
  LH:Driver:error     at Receiver.emit (node:events:514:28) +2ms

[adamraine]

Thanks, I can repro this on CLI but not DevTools.

[adamraine]

I was able to create a repro with the following Puppeteer script

import puppeteer from 'puppeteer';

const browser = await puppeteer.launch({
  headless: false,
});
const page = await browser.newPage();
const session = await page.createCDPSession();

session.on('sessionattached', async s => {
  await s.send('Network.enable');
  await s.send('Runtime.runIfWaitingForDebugger');
});
await session.send('Target.setAutoAttach', {
  autoAttach: true,
  flatten: true,
  waitForDebuggerOnStart: true,
})

await page.goto('http://localhost:8080/css-paint.html');

await browser.close();

Looks like the paint worklet creates a new worker session but this worker session does not allow Network.enable. I will file a bug upstream as I would expect the paint worklet to have a different target type if it doesn't support the same CDP API as web workers.

In the meantime, it might make sense to ignore the Network.enable errors on worker targets.

[adamraine]

https://bugs.chromium.org/p/chromium/issues/detail?id=1517088

[adamraine]

The upstream issue has been fixed but I still think we should land #15740 to prevent errors attaching to worker targets from being fatal errors.

[joshfester]

I'm still seeing this error in the 12.0.0 release. Should it be working?

[adamraine]

Yeah this is still happening although not in the exact same way.

Target.getTargetInfo is not supported on paint worklet targets, but this means that we throw an error before we even know it's a paint worklet target. This allows the error to sneak through again.

[joshfester]

Thanks @adamraine. Is there any possible workaround to use a paintWorklet? If not I may just find a way to use some SVG's instead.