search

GoogleChrome / lighthouse-ci

Automate running Lighthouse for every commit, viewing the changes, and preventing regressions
Apache License 2.0
6.43k stars 647 forks source link

GitHub CI Action Fails for CRA Application (NO_FCP) #818

Open danhemerlein opened 2 years ago

danhemerlein commented 2 years ago

I'm having the same exact issue outlined in #766.

lhci autorun works great when run locally but fails in my GitHub action with the following error:

"runtimeError": { "code": "NO_FCP", "message": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)" },

below is my lighthouserc.js config

module.exports = {
  ci: {
    collect: {
      staticDistDir: './build',
      numberOfRuns: 1,
      isSinglePageApplication: true,
      url: ['http://localhost:3000/'],
      settings: {
        onlyCategories: ['accessibility', 'performance', 'seo']
      },
      assert: {
        preset: 'lighthouse:no-pwa',
        assertions: {
          'categories:performance': ['error', { minScore: 0.1 }],
          'categories:accessibility': ['error', { minScore: 0.1 }],
          'categories:seo': ['error', { minScore: 0.1 }]
        }
      },
      upload: {
        target: 'temporary-public-storage'
      },
    }
  }
};

and my ci.yml 

name: CI
on: [push]
jobs:
  lighthouseci:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
          node-version: 14
      - name: install
        run: npm install && npm install -g @lhci/cli@0.8.x
      - name: build
        run: |
          npm run build
          ls build
          ls build/static
          ls build/static/js
          cat build/index.html
      - name: LHCI
        run: lhci autorun

and a more robust version of the error in the Action

Run lhci autorun
✅  .lighthouseci/ directory writable
✅  Configuration file found
✅  Chrome installation found
Healthcheck passed!

Started a web server on port [4](https://github.com/danhemerlein/danhemerlein.com/runs/7674007358?check_suite_focus=true#step:6:5)1389...
Running Lighthouse 1 time(s) on http://localhost:41389/
Error: Lighthouse failed with exit code 1
Run #1...failed!
    at ChildProcess.<anonymous> (/opt/hostedtoolcache/node/14.20.0/x64/lib/node_modules/@lhci/cli/src/collect/node-runner.js:120:21)
    at ChildProcess.emit (events.js:400:28)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:28[5](https://github.com/danhemerlein/danhemerlein.com/runs/7674007358?check_suite_focus=true#step:6:6):12)
{
  "userAgent": "Mozilla/5.0 (X11; Linux x8[6](https://github.com/danhemerlein/danhemerlein.com/runs/7674007358?check_suite_focus=true#step:6:7)_64) AppleWebKit/53[7](https://github.com/danhemerlein/danhemerlein.com/runs/7674007358?check_suite_focus=true#step:6:8).36 (KHTML, like Gecko) HeadlessChrome/103.0.5060.134 Safari/537.36",
  "environment": {
    "networkUserAgent": "",
    "hostUserAgent": "Mozilla/5.0 (X11; Linux x[8](https://github.com/danhemerlein/danhemerlein.com/runs/7674007358?check_suite_focus=true#step:6:9)6_64) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/103.0.5060.134 Safari/537.36",
    "benchmarkIndex": 1086,
    "credits": {}
  },
  "lighthouseVersion": "8.0.0",
  "fetchTime": "2022-08-04T14:15:30.[9](https://github.com/danhemerlein/danhemerlein.com/runs/7674007358?check_suite_focus=true#step:6:10)34Z",
  "requestedUrl": "http://localhost:4[13](https://github.com/danhemerlein/danhemerlein.com/runs/7674007358?check_suite_focus=true#step:6:14)89/",
  "finalUrl": "http://localhost:41389/",
  "runWarnings": [
    "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)"
  ],
  "runtimeError": {
    "code": "NO_FCP",
    "message": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)"
  },
  "audits": {
    "viewport": {
      "id": "viewport",
      "title": "Has a `<meta name=\"viewport\">` tag with `width` or `initial-scale`",
      "description": "Add a `<meta name=\"viewport\">` tag to optimize your app for mobile screens. [Learn more](https://web.dev/viewport/).",
      "score": null,
      "scoreDisplayMode": "error",
      "errorMessage": "Required MetaElements gatherer did not run."
    },
    "first-contentful-paint": {
      "id": "first-contentful-paint",
      "title": "First Contentful Paint",
      "description": "First Contentful Paint marks the time at which the first text or image is painted. [Learn more](https://web.dev/first-contentful-paint/).",
      "score": null,
      "scoreDisplayMode": "error",
      "errorMessage": "Required traces gatherer did not run."
    },
    "largest-contentful-paint": {
      "id": "largest-contentful-paint",
      "title": "Largest Contentful Paint",
      "description": "Largest Contentful Paint marks the time at which the largest text or image is painted. [Learn more](https://web.dev/lighthouse-largest-contentful-paint/)",
      "score": null,
      "scoreDisplayMode": "error",
      "errorMessage": "Required traces gatherer did not run."
    },
    "first-meaningful-paint": {
      "id": "first-meaningful-paint",
      "title": "First Meaningful Paint",
      "description": "First Meaningful Paint measures when the primary content of a page is visible. [Learn more](https://web.dev/first-meaningful-paint/).",
      "score": null,
      "scoreDisplayMode": "error",
      "errorMessage": "Required traces gatherer did not run."
    },
    "speed-index": {
      "id": "speed-index",
      "title": "Speed Index",
      "description": "Speed Index shows how quickly the contents of a page are visibly populated. [Learn more](https://web.dev/speed-index/).",
      "score": null,
      "scoreDisplayMode": "error",
      "errorMessage": "Required traces gatherer did not run."
    },
    "screenshot-thumbnails": {
      "id": "screenshot-thumbnails",
      "title": "Screenshot Thumbnails",
      "description": "This is what the load of your site looked like.",
      "score": null,
      "scoreDisplayMode": "error",
      "errorMessage": "Required traces gatherer did not run."
    },
    "final-screenshot": {
      "id": "final-screenshot",
      "title": "Final Screenshot",
      "description": "The last screenshot captured of the pageload.",
      "score": null,
      "scoreDisplayMode": "error",
      "errorMessage": "Required traces gatherer did not run."
    },
    "total-blocking-time": {
      "id": "total-blocking-time",
      "title": "Total Blocking Time",
      "description": "Sum of all time periods between FCP and Time to Interactive, when task length exceeded [50](https://github.com/danhemerlein/danhemerlein.com/runs/7674007358?check_suite_focus=true#step:6:51)ms, expressed in milliseconds. [Learn more](https://web.dev/lighthouse-total-blocking-time/).",
      "score": null,
      "scoreDisplayMode": "error",
      "errorMessage": "Required traces gatherer did not run."
    },
    "max-potential-fid": {
      "id": "max-potential-fid",
      "title": "Max Potential First In
GreedyA1 commented 2 years ago

I have the same issue on Github actions

GreedyA1 commented 2 years ago

I found out what the issue was for me. Since I use base-href in my project the lighthouse wasn't properly loading assets/js so the webpage was never loaded. in my CI I added --base-href=/ to build command and it worked.