Lighthouse browser crashes

For this site I have a small CI job (based on gitlab-ci-utils/lighthouse) which checks the built site in Lighthouse.

This job runs after the site has been built (using Eleventy) in test build:

# https://gitlab.com/gitlab-ci-utils/lighthouse
lighthouse mr:
  needs:
    - test build
  image: registry.gitlab.com/gitlab-ci-utils/lighthouse:latest
  stage: post
  script:
    - mkdir -p tmp
    - serve ./public/ > tmp/serve.log 2>&1 & wait-on http://localhost:3000/
    - lighthouse http://localhost:3000 --chrome-flags="--headless"
    - lighthouse http://localhost:3000/photos --chrome-flags="--headless"
    - lighthouse http://localhost:3000/projects --chrome-flags="--headless"
  rules:
    - if: $CI_COMMIT_REF_NAME != $CI_DEFAULT_BRANCH
  artifacts:
    when: always
    paths:
      - localhost*.html
      - tmp

However, today it was failing. The final line in the job output showed the error:

Runtime error encountered: Browser tab has unexpectedly crashed.

I had a look at the Lighthouse CLI help via docker run -ti registry.gitlab.com/gitlab-ci-utils/lighthouse:latest bash and then lighthouse --help. I've seen memory issues pop up in CI before, so I was looking first for something to tell Lighthouse to adjust its memory expectations.

I also had a dig around and found a few issues (GoogleChrome/lighthouse-ci#1052: Browser crashes on lhci autorun in Docker #1052, puppeteer/puppeteer#1834: Add --disable-dev-shm-usage to default launch flags), but none that looked like an exact match for what I was seeing ... except it did just look like Chrome was crashing, and I've seen that before as part of behat-chrome/chrome-mink-driver use.

While there wasn't a direct flag in the lighthouse help, we have --chrome-flags, so I tried Chrome's --no-dev-shm-usage (ref Chromium command-line switches), which I've frequently found makes Chrome behave better in CI:

# https://gitlab.com/gitlab-ci-utils/lighthouse
lighthouse mr:
  needs:
    - test build
  image: registry.gitlab.com/gitlab-ci-utils/lighthouse:latest
  stage: post
  script:
    - mkdir -p tmp
    - serve ./public/ > tmp/serve.log 2>&1 & wait-on http://localhost:3000/
    - lighthouse http://localhost:3000 --chrome-flags="--headless --no-dev-shm-usage"
    - lighthouse http://localhost:3000/photos --chrome-flags="--headless --no-dev-shm-usage"
    - lighthouse http://localhost:3000/projects --chrome-flags="--headless --no-dev-shm-usage"
  rules:
    - if: $CI_COMMIT_REF_NAME != $CI_DEFAULT_BRANCH
  artifacts:
    when: always
    paths:
      - localhost*.html
      - tmp

A little surprisingly, that worked, and the pipeline started passing ... huh!

It could be a little tidier with the repetition removed:

# https://gitlab.com/gitlab-ci-utils/lighthouse
lighthouse mr:
  needs:
    - test build
  image: registry.gitlab.com/gitlab-ci-utils/lighthouse:latest
  stage: post
  variables:
    BASE_URL: http://localhost:3000
    CHROME_FLAGS: "--headless --disable-dev-shm-usage"
  script:
    - mkdir -p tmp
    - serve ./public/ > tmp/serve.log 2>&1 & wait-on http://localhost:3000/
    - lighthouse ${BASE_URL} --chrome-flags="${CHROME_FLAGS}"
    - lighthouse ${BASE_URL}/photos --chrome-flags="${CHROME_FLAGS}"
    - lighthouse ${BASE_URL}/projects --chrome-flags="${CHROME_FLAGS}"
  rules:
    - if: $CI_COMMIT_REF_NAME != $CI_DEFAULT_BRANCH
  artifacts:
    when: always
    paths:
      - localhost*.html
      - tmp

The job above, lighthouse mr, runs against the changed version of the site in the CI build environment. There's a separate one which runs on deploy to record results for the published version, so I have a reference for what's live as well.

As a side-effect of looking at this error, the site also has 10KB less CSS thanks to minification when the TailwindCSS job runs. 🎉