chrome-aws-lambda + lighthouse always results in NO_SCREENSHOTS

Question

I am trying to run Lighthouse via Puppeteer in a public.ecr.aws/lambda/nodejs Docker image using chrome-aws-lambda, and no matter what website I send to Lighthouse, I always get errors like this:

Chrome didn't collect any screenshots during the page load. Please m ake sure there is content visible on the page, and then try re-running Lighthouse. (NO_SCREENSHOTS)

Note that I've tried sending it VERY fast loading pages like this, so other tips online related to this error that claim the site is just too slow doesn't seem correct to me.

/Dockerfile

FROM public.ecr.aws/lambda/nodejs:latest
RUN cd /var/task/ & npm install puppeteer-core chrome-aws-lambda lighthouse --save-prod
RUN cd /var/task/ & npm install puppeteer --save-dev

/docker-compose.yml

version: "3.5"

services:
  lighthouse:
    build:
      context: .
    networks:
      - lighthousenetwork
    ports:
      - "8080:8080"
    volumes:
      - ./task/:/var/task/:delegated
    command: index.handler

networks:
  lighthousenetwork:
    driver: bridge

/task/index.js

const chromium = require('chrome-aws-lambda');
const lighthouse = require('lighthouse');

exports.handler = async (event, context, callback) => {
    let response = null;
    let browser = null;

    try {
        browser = await chromium.puppeteer.launch({
            args: [...chromium.args, "--remote-debugging-port=9222"],
            defaultViewport: chromium.defaultViewport,
            executablePath: await chromium.executablePath,
            headless: chromium.headless,
            ignoreHTTPSErrors: true,
        });

        const options = {
            output: "json",
            preset: 'mobile',
            onlyCategories: ["performance", "seo", "accessibility", "best-practices"],
            port: 9222,
        }

        const url = 'https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event';

        const result = await lighthouse(url, options);
        console.log(`Audited ${url} in ${result.lhr.timing.total} ms.`);

        const report = JSON.parse(result.report);

        response = {
            statusCode: 200,
            body: {
                'url': url,
                'Performance': report['categories']['performance']['score'],
                'Accessibility': report['categories']['accessibility']['score'],
                'SEO': report['categories']['seo']['score'],
                'BestPractices': report['categories']['best-practices']['score'],
                'ErrorMessage': report['audits']['speed-index']['errorMessage']
            }
        }
    } catch (error) {
        return callback(error);
    } finally {
        if (browser !== null) {
            await browser.close();
        }
    }

    return callback(null, response);
};

Start the Docker container:

$ docker-compose up

Trigger the function handler:

$ curl -XPOST "http://localhost:8080/2015-03-31/functions/function/invocations" -d '{"payload":"hello world!"}'

Output:

{"statusCode":200,"body":{"url":"https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event","Performance":null,"Accessibility":0.91,"SEO":0.89,"BestPractices":1,"ErrorMessage":"Chrome didn't collect any screenshots during the page load. Please make sure there is content visible on the page, and then try re-running Lighthouse. (NO_SCREENSHOTS)"}}

Answer 1

I ran into the exact same issue. Did a bunch of things, like passing in different flags to chrome, lighthouse. None works.

Then i found this https://github.com/GoogleChrome/lighthouse/pull/10483/files#diff-b745a09f9adfeb967c49c66acad7fdcaR77

Seems like lighthouse team doesn't really recommend lambda env.

I see other ppl running into same issue: https://github.com/GoogleChrome/lighthouse/issues/12101 https://github.com/GoogleChrome/lighthouse/issues/13021

Ye i suggest move away from lambda for now. Try running lighthouse on a cluster or something.

Not really a solution to fix the error you see. But just want to share what i found on this.