Error using browserless/chrome with Lighthouse via Puppeteer

This issue has been tracked since 2023-02-04.

I'm doing some tests, but got stuck at first step.

My intention is launching Chrome from Puppeteer and then perform Lighthouse tests:

# Launch browserless/chrome. Listen on port 3000
docker run -p 3000:3000 browserless/chrom

After installing puppeteer and lighthouse, this is the code I'm executing:

import puppeteer from 'puppeteer'
import lighthouse from 'lighthouse'
import { URL } from 'url'

const browser = await puppeteer.connect({ browserWSEndpoint: 'ws://localhost:3000' });
await lighthouse('https://www.google.com/', { port: (new URL(browser.wsEndpoint())).port })
await browser.close()

But execution ends unexpectedly and chrome log shows something that looks meaningful:

2023-02-04T19:05:22.373Z browserless:job PBQ1OD2FHUODM8HSZGE7A26DF6L0GPCI: Adding new job to queue.
2023-02-04T19:05:22.373Z browserless:server Starting new job
2023-02-04T19:05:22.373Z browserless:system Generating fresh chrome browser
2023-02-04T19:05:22.373Z browserless:job PBQ1OD2FHUODM8HSZGE7A26DF6L0GPCI: Getting browser.
2023-02-04T19:05:22.373Z browserless:chrome-helper Launching Chrome with args: {
  "args": [
    "--no-sandbox",
    "--enable-logging",
    "--v1=1",
    "--disable-dev-shm-usage",
    "--no-first-run",
    "--remote-debugging-port=33369",
    "--user-data-dir=/tmp/browserless-data-dir-jEFHho",
    "--remote-debugging-pipe"
  ],
  "blockAds": false,
  "dumpio": false,
  "headless": true,
  "stealth": false,
  "ignoreDefaultArgs": false,
  "ignoreHTTPSErrors": false,
  "pauseOnConnect": false,
  "playwright": false,
  "userDataDir": "/tmp/browserless-data-dir-jEFHho",
  "meta": {
    "protocol": null,
    "slashes": null,
    "auth": null,
    "host": null,
    "port": null,
    "hostname": null,
    "hash": null,
    "search": null,
    "query": {},
    "pathname": "/devtools/page/BROWSERLESSG4UDFF0DZHV6N3M986KUZ",
    "path": "/devtools/page/BROWSERLESSG4UDFF0DZHV6N3M986KUZ",
    "href": "/devtools/page/BROWSERLESSG4UDFF0DZHV6N3M986KUZ"
  },
  "executablePath": "/usr/bin/google-chrome",
  "handleSIGINT": false,
  "handleSIGTERM": false,
  "handleSIGHUP": false
}
2023-02-04T19:05:22.497Z browserless:chrome-helper Chrome PID: 130
2023-02-04T19:05:22.497Z browserless:chrome-helper Finding prior pages
2023-02-04T19:05:22.505Z browserless:chrome-helper Found 1 pages
2023-02-04T19:05:22.505Z browserless:chrome-helper Setting up page Unknown
2023-02-04T19:05:22.505Z browserless:chrome-helper Injecting download dir "/usr/src/app/workspace"
2023-02-04T19:05:22.505Z browserless:system Chrome launched 132ms
2023-02-04T19:05:22.505Z browserless:system Got chrome instance
2023-02-04T19:05:22.505Z browserless:job PBQ1OD2FHUODM8HSZGE7A26DF6L0GPCI: Starting session.
2023-02-04T19:05:22.505Z browserless:chrome-helper Setting up file:// protocol request rejection
2023-02-04T19:05:22.537Z browserless:chrome-helper Setting up page Unknown
2023-02-04T19:05:22.537Z browserless:chrome-helper Injecting download dir "/usr/src/app/workspace"
2023-02-04T19:05:22.539Z browserless:job TypeError: Cannot read properties of undefined (reading '_targetId')
    at /usr/src/app/build/puppeteer-provider.js:322:69
    at processTicksAndRejections (node:internal/process/task_queues:96:5) PBQ1OD2FHUODM8HSZGE7A26DF6L0GPCI: Issue launching Chrome or proxying traffic, failing request
2023-02-04T19:05:22.539Z browserless:server PBQ1OD2FHUODM8HSZGE7A26DF6L0GPCI: Recording failed stat, cleaning up: "Cannot read properties of undefined (reading '_targetId')"
2023-02-04T19:05:22.539Z browserless:job PBQ1OD2FHUODM8HSZGE7A26DF6L0GPCI: Cleaning up job
2023-02-04T19:05:22.539Z browserless:job PBQ1OD2FHUODM8HSZGE7A26DF6L0GPCI: Browser not needed, closing
2023-02-04T19:05:22.539Z browserless:chrome-helper Shutting down browser with close command
2023-02-04T19:05:22.539Z browserless:job PBQ1OD2FHUODM8HSZGE7A26DF6L0GPCI: Browser cleanup complete.
2023-02-04T19:05:22.539Z browserless:chrome-helper Sending SIGKILL signal to browser process 130
2023-02-04T19:05:22.549Z browserless:chrome-helper Removing temp data-dir /tmp/browserless-data-dir-jEFHho
2023-02-04T19:05:22.551Z browserless:chrome-helper Setting up file:// protocol request rejection
2023-02-04T19:05:22.555Z browserless:chrome-helper Garbage collecting and removing listeners

andyMrtnzP wrote this answer on 2023-02-08

await lighthouse('https://www.google.com/', { port: (new URL(browser.wsEndpoint())).port })

Browsers aren't really opened on browserless' port. We proxy the traffic from that port to the browser's. After you connect to browserless, if you go to /sessions, you'll see a JSON array with the running sessions, including the actual browser port:

[
  {
    // ...
    webSocketDebuggerUrl: "ws://127.0.0.1:3000/devtools/page/290D3CB42883B93DCBC6FF661D3FDD7B",
    port: "63267",
    // ...
  },
];

That's the port you'll want to use for Lighthouse:

// browserless-lh.js

import fs from 'fs/promises';

import fetch from 'node-fetch';
import lighthouse from 'lighthouse';

const getPort = async () => {
  const res = await fetch(`http://localhost:3000/sessions`);
  const json = await res.json();

  if (json && json.length && json.length > 0) return json[0].port;
}

const results = await lighthouse('https://www.google.com/', {
  port: await getPort()
});
await fs.writeFile('results.json', JSON.stringify(results, null, 2));

Since the ports the browsers get are random, the main caveat is that you won't really know what port to map when you run the Docker. If you're on Linux you could use --network=host.

manelio wrote this answer on 2023-02-08

That's exactly what I was looking for!

Thanks for your detailed reply.

Your Name

Your Comment

More Details About Repo

Owner Name	browserless
Repo Name	chrome
Full Name	browserless/chrome
Language	TypeScript
Created Date	2017-11-17
Updated Date	2023-03-22
Star Count	5309
Watcher Count	47
Fork Count	516
Issue Count	29

YOU MAY BE INTERESTED

Issue Title	Created Date	Updated Date