googlechrome / lighthouse-ci Goto Github PK
View Code? Open in Web Editor NEWAutomate running Lighthouse for every commit, viewing the changes, and preventing regressions
License: Apache License 2.0
Automate running Lighthouse for every commit, viewing the changes, and preventing regressions
License: Apache License 2.0
ref #26
In https://travis-ci.org/GoogleChrome/web.dev/builds/604263335#L634 i was hoping to see the new github status i just added the token for
so i hit "restart" but it errored because the hash was already uploaded. :(
but maybe instead of erroring we just overwrite the previous data with the newest one?
last one wins seems slightly more reasonable than first one wins.
(I don't know how codecov, etc handle this case. Probably something well considered.)
i'm sure in the future we'll have a more complicated solution, but wdyt about this for now?
I swapped URLs I was testing, and once the new URL was included it started to appear as 0
for all previous runs, even though there are no LHRs for that URL.
Notice red line exists prior to 100, even though there is no data:
Should be no red line prior to the first LHR. Also the blue drops to 0
when there are no more LHRs, should just disappear.
lol rounding is hard.
i suppose this is related to #28
Minimal repro:
{
"ci": {
"assert": {
"preset": "lighthouse:recommended",
"assertions": {
"critical-request-chains": ["warn", {"minScore": 1}]
}
}
}
This leads to:
⚠️ critical-request-chains warning for minScore assertion
Minimize Critical Requests Depth
Documentation: https://web.dev/critical-request-chains
expected: >=1
found: 0
all values: 0, 0, 0
Hi,
I've setup a base PR with Lighthouse CI on GitHub Action. Result.
But I'm laking some features:
{
"ci": {
"budgetsFile": "./lighthouse/budget.json",
"collect": {
"staticDistDir": "./build"
},
"upload": {
"target": "temporary-public-storage"
}
}
}
but so far nothing change.
I'm having difficulties following the documentation overall. There a lot of option but it lack of full example like the cli doc but for the lighthouserc.json.
Currently every build needs a .hash
but we don't necessarily need one. We could switch to a .projectVersion
and support timestamps instead?
On mac the chrome/system tooltip (that shows [title]
takes like 1 second to display. (iirc, it's twice as slow as windows/linux for no good reason)
regardless, i think we want a JS tooltip component so that the values behind [title] are a lot more accessible. we hide some good stuff in there.
i found these without looking very hard
The CLI apparently runs Chrome headless (and headfull optionally), but could it run with Puppeteer?
$ lhci wizard
? Which wizard do you want to run? new-project
? Which server would you like to use? http://localhost:9001/
? What would you like to name the project? v8.dev
? Where is the project's code hosted? https://github.com/v8/v8.dev
FetchError: request to http://localhost:9001/v1/projects failed, reason: connect ECONNREFUSED 127.0.0.1:9001
at ClientRequest.<anonymous> (~/.nvm/versions/node/v12.6.0/lib/node_modules/@lhci/cli/node_modules/node-fetch/index.js:133:11)
at ClientRequest.emit (events.js:203:13)
at Socket.socketErrorListener (_http_client.js:402:9)
at Socket.emit (events.js:203:13)
at emitErrorNT (internal/streams/destroy.js:91:8)
at emitErrorAndCloseNT (internal/streams/destroy.js:59:3)
at processTicksAndRejections (internal/process/task_queues.js:77:11)
Why does it attempt to fetch /v1/projects
? My web app does not do anything special for this endpoint, so the wizard exits at this point. For http://localhost:9001/v1/projects
I get the above output.
If I enter https://v8.dev/
instead, it fetches https://v8.dev/v1/projects
which 404s, resulting in:
$ lhci wizard
? Which wizard do you want to run? new-project
? Which server would you like to use? https://v8.dev/
? What would you like to name the project? v8.dev
? Where is the project's code hosted? https://github.com/v8/v8.dev
Error: Unexpected status code 404
at ApiClient._convertFetchResponseToReturnValue (~/.nvm/versions/node/v12.6.0/lib/node_modules/@lhci/cli/node_modules/@lhci/utils/src/api-client.js:54:21)
at processTicksAndRejections (internal/process/task_queues.js:85:5)
at async runNewProjectWizard (~/.nvm/versions/node/v12.6.0/lib/node_modules/@lhci/cli/src/wizard/wizard.js:48:19)
at async Object.runCommand (~/.nvm/versions/node/v12.6.0/lib/node_modules/@lhci/cli/src/wizard/wizard.js:75:7)
at async run (~/.nvm/versions/node/v12.6.0/lib/node_modules/@lhci/cli/src/cli.js:82:7)
Either way the wizard exits at this point. Am I misunderstanding what I should enter?
I fear this may be too strict for real production sites. The PWA stuff being included makes it pretty opinionated too.
(I'd like paulirish.com to pass our recommended preset but a service worker doesnt make sense there. ) Right now I think there's only but a few showcase PWA sites that will actually pass this preset. :/
The strictness here matters a lot more since assertion with recommended is on by default in autorun. I think it's rough that most folks that try autorun for the first time will have failures to deal with before they can see a report or a diff.
In summary: I think any default for autorun should be MUCH more forgiving (if we're recommending new users start with autorun). no PWA checks, allowing color contrast failures etc. And probably this will have to be called loose
or forgiving
, etc instead of recommended
. :)
also only slightly related but what's happening here?
seems like its not using any assertions if they're being explicitly provided? i probably am not reading this right :)
If I'm doing TPS (temp public storage) I kinda want to see that report more than I want assertions.
I feel like upload should precede assert in autorun, but I see the docs specifically say to upload after assert..... why? :)
In a few places in the Getting Started docs, there are some checks for Travis Node version, but the text echoed doesn't make any sense. I guess it's a copy/paste error?
Also condititions => conditions
# example if only running lighthouse on node 10
if [[ "$TRAVIS_NODE_VERSION" != "10" ]]; then
echo "Only run Lighthouse CI once per build, condititions did not match.";
exit 0;
fi
Found at https://github.com/GoogleChrome/lighthouse-ci/blob/master/docs/getting-started.md#complete-setup
and https://github.com/GoogleChrome/lighthouse-ci/blob/master/docs/getting-started.md#create-a-run-lhci-script
Having the ability to specify / pass cookies would be really helpful for testing pages that are behind auth or interact with authed endpoints.
Could we do a once-over all on the webserver URLs?
And also review the rest API?
I remember thinking that the compare view should have 'compare' in it, etc. But I figure we should do this sooner than later since it's very breaking changey.
@patrickhulce what's the best way to review all these?
typescript doesn't have named a CLI option for setting the config file, but their config is named tsconfig.json
eslint uses --config
, although it does have --no-eslintrc
. allowed config names are many:
babel doesn't have any way to set a config from the CLI, but it does have --no-babelrc
. allowed config names are:
sorted by order of how strongly i feel
--rc-file
should be --config
It seems to just be a config, so shouldn't it be called that? I didn't find any tools that name their config option like this.
I think babel does this to simplify compiling across project boundaries. That doesn't apply much here, but I wonder if there is any purpose to have multiple config files for LHCI? We could consider removing any option to configure, and add it in later if demand is there. If we do this, I'd recommend the file be called .lhciconfig.json
(or .lhcirc.json
)
.js
right now just .json
is allowed. this makes sense for now, and we should definitely defer this. just calling it out now
ditto above section
rc
rc
stands for run commands*, and so I'd think files called rc
should be something you must run (shell, node, etc). I wouldn't consider a json file to be a executable file. I see that eslint uses eslintrc.js
and eslintrc.json
(ditto for babel), so that doesn't jive with my understanding, and it's a popular enough tool that I concede any argument for using .lhcirc.js
and .lhciconfig.json
.
* at least, it did initially. it has morphed into run configuration
over time, which of course kills my argument. but I did some light research on this and can't find a satisfactory source on this definition. from what I currently know, I consider this morph to be a mistake.
We need a way of dealing with changes to table schemas between version of LHCI, no promises made until initial published version but migration should be smooth after that
Ideas:
Questions:
External build ID was a nice idea, but it has issues when a project moves CI providers/external build locations. It'd be better to save the entire build URL for easy reference and avoid complex reconstruction logic
Hi. I tried the lighthouse-ci
on Releases inside Azure DevOps, but returns a strange error:
2019-06-28T21:53:23.0440309Z ##[error]- Running Lighthouse on https://URL ...
2019-06-28T21:53:23.0450647Z
2019-06-28T21:53:35.3907204Z performance: 31
2019-06-28T21:53:35.3910085Z accessibility: 67
2019-06-28T21:53:35.3913014Z best-practices: 86
2019-06-28T21:53:35.3913111Z seo: 92
2019-06-28T21:53:35.3913485Z pwa: 30
2019-06-28T21:53:35.3913834Z All checks are passing. 🎉
2019-06-28T21:53:35.3914397Z
2019-06-28T21:53:35.4122090Z ##[error]Command failed with errors on remote machine.
2019-06-28T21:53:35.4237341Z ##[section]Finishing: Task
I'm using the Task Command Line Script
of Azure DevOps to connect on server and execute the command: lighthouse-ci https://URL --score=20 --performance=40 --seo=90 --accessibility=60 --best-practices=80
(the values are smaller to test the funcionality)
I tried to run the command: lighthouse-ci https://URL
, without parameters, but not work.
But when I execute the command inside the server, directly, works fine.
Regards.
thanks to node 10 and node 12...
https://travis-ci.org/paulirish/mojibar-web/builds/601044688
we got two LHRs from the same hash
https://lhci-canary.herokuapp.com/app/projects/d819a1f6-2630-4ee8-a451-95e369fec825/builds/59f0de64-68ab-41b4-ae0c-430bb3028f2c
Lots of options out there, lots of functionality we need.
At a glance we want...
Library | License | Popularity | Candlestick Difficulty | Preact Difficultly |
---|---|---|---|---|
d3 (raw) | BSD-3-Clause | 😄😄😄😄 | Difficult-ish | Difficult-ish |
chart.js | MIT | 😄😄😄 | Impossible-ish | Difficult-ish |
highcharts | Paid 😢 | 😄😄 | Easy | Easy |
recharts | MIT | 😄😄 | Medium-difficult | Easy |
plot.ly | MIT | 🙂 | Easy | Easy |
fusioncharts | Paid 😢 | 😑 | Easy | Easy |
Hello, first of all congratulations for the amazing work, this looks promising.
I would like to know the next if you considering the possibility of create a github action for this?
Does it make sense?
Thank you
was developing on a git branch branch/new-branch
. Yes just like that :)
Uploaded some data to canary server here https://github.com/exterkamp/lighthouse-ci-action/commit/21869d5a3234f0d69d8a30027f4455c8057669e5/checks?check_suite_id=299822077
but you can see it was identified as branch HEAD
https://lhci-canary.herokuapp.com/app/projects/3e1ad4e7-689b-4340-83f4-409c84308f89
i notice something weird about this checkout and git branch
is odd.. and rev-parse doesnt seem to like it.
i guess the currentBranch command just isn't getting it due to the clone/checkout style?? dunno.
but i tried the git command that is used in my bash/fish prompt and it succeeds
git symbolic-ref --quiet --short HEAD 2> /dev/null || \
git describe --all --exact-match HEAD 2> /dev/null || \
git rev-parse --short HEAD 2> /dev/null || \
echo '(unknown)')
in my bash prompt it uses that terrible thing and then seds out 's|^refs/heads/||'
but i guess it could do the same with remotes/origin/
? :)
anyway GIT IS GREAT! amirite
cc @exterkamp
npm install -g @lhci/[email protected]
currently fails, because no non-preview 0.3.x release has been npm publish
ed yet:
$ npm install -g @lhci/[email protected]
npm ERR! code ETARGET
npm ERR! notarget No matching version found for @lhci/[email protected]
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
npm ERR! A complete log of this run can be found in:
Note that this exact command occurs in the README and in the docs. Let’s release v0.3.0!
In order to quickly render the dashboard UI, the API will need to store and readily provide computed summary statistics on the LHRs stored in the runs
table.
These statistics will likely depend on the specific configuration and subject to frequent change based on UI needs, so current thinking is to follow a simple schema and compute these values on the fly at query time (which are stored/cached for future loads). Recomputation could follow the process in #4
Example Rows
id | projectId | buildId | runId | schemaVersion | name | value |
---|---|---|---|---|---|---|
uuid | uuid | uuid | NULL | 0.1.0-beta.0 | firstContentfulPaint | {"median": 500, "max": 1000, "min": 350} |
uuid | uuid | uuid | uuid | 0.1.0-beta.0 | numberOfRequests | 110 |
Currently master
is hardcoded in a number of places, making this fully configurable requires changes in a couple places
while setting up lhci on https://github.com/paulirish/mojibar-web i managed to run into the "you dont have access to secret env vars on PRs from clones" bug like 3 times. partly because i'm dumb, admittedly.
so by default, the LHCI_TOKEN
and LHCI_GITHUB_TOKEN
would be expected to be there. but since they're not present on contributor PRs, then both uploading and status checks are disabled. and that sucks quite a bit.
i wonder if we have other options?
Is it possible to run lhci collect
along with a plugin?
Hmmmm is it possible via something like
lighthouse-ci collect --numberOfRuns=5 --url=https://example.com --settings="--plugins=foo-plugin"
err nope, thats not it.
anyway i guess this is a matter of documentation. :p
Burndown list created for items outstanding as of 2019-10-01 or later.
staticDistDir
(6244102)assert
on median build, not just median value (70aef52)upload
URL replacements for <port>
, <uuid>
, etc (ccb528b)assert
allow assertion on multiple urls/patterns as keys in matrixlighthouse:recommended
preset (e78b25a)mergeMethod
to aggregationMethod
(c0329f1)healthcheck
that fails/warns when things aren't configured correctly (#38)assert
flow in dogfood (0cc0178)--start-server-command
(#37) (#46)upload
target of transient cloud storage service (cbad14d)upload
sets a GH status check bit (97d2639).lighthouserc
(bd7d44c)open
command view HTML reports (df13eb4)budgets.json
with lighthouse ciCDS Feedback
We don't want to compute statistics until the build has all the runs uploaded, we have two main options.
POST /v1/projects/<id>/builds
accepts something more like{
"build": {"hash": "afe15fcb..."},
"runs": [{"lhr": "<first lhr>"}, {"lhr": "<second lhr>"}]
}
This is more straightforward on our side and eliminates the possibility of a hanging, unfinished build. However, these payloads will get insanely large, like on the order of ~30MB for pages with many runs/pages. Additionally this eliminates the possibility of supporting parallel travis builds that would be uploading runs from different environments
PUT /v1/projects/<id>/builds/<id>/sealed
route or something that must be called after all runs have been uploaded to signal that there are no more coming and the stats can be finalized. This feels like the proper solution to support all the sensible use cases and prevent massive, unsustainable payloads. Just a slightly bigger pain to implement up front.Firstly: this is a great project and I'm really excited to use it. Thanks for all the hard work!
In https://github.com/GoogleChrome/lighthouse-ci/blob/master/docs/cli.md#overview it says "Install the CLI globally to try it out locally", but on Windows the run ends with an spawn UNKNOWN
error:
✅ .lighthouseci/ directory writable
⚠️ Configuration file found
Healthcheck passed!
Automatically determined ./dist as `staticDistDir`.
Set it explicitly in lighthouserc.json if incorrect.
Started a web server on port 6146...
Running Lighthouse 3 time(s) on http://localhost:6146/404.html
Run #1...failed!
Error: spawn UNKNOWN
at ChildProcess.spawn (internal/child_process.js:394:11)
at Object.spawn (child_process.js:540:9)
at LighthouseRunner.run (C:\Users\Rhian\AppData\Roaming\npm\node_modules\@lhci\cli\src\collect\lighthouse-runner.js:83:34)
This looks to be because childProcess.spawn()
in lighthouse-runner.js
is called without a third argument { shell: true }
, which is required on Windows.
Since this is a CI tool and was probably never intended to be run on Windows, perhaps the only change needed is to mention this in the CLI documentation that I linked above. It would be useful to be able to do dry runs locally, though.
I believe this means upstreaming the work done here:
The lighthouse service within should be easily accessible over HTTP.
I kind of preferred the basic REST api within lighthouse_machine
, but perhaps we should chat more about the API.
@ebidel wanna take a first whack at this?
Hey,
After upgrading @lhci/cli
to 3.1.0
(from 0.3.0-alpha.0
) I can no longer use a custom lighthouserc config.
Here is my lighthouserc.json
:
{
"ci": {
"assert": {
"preset": "lighthouse:recommended",
"assertions": {
"categories.pwa": "off"
}
}
}
}
and logs:
Run lhci autorun --config=./lighthouserc.json
✅ .lighthouseci/ directory writable
✅ Configuration file found
Healthcheck passed!
Automatically determined ./public as `staticDistDir`.
Set it explicitly in lighthouserc.json if incorrect.
Started a web server on port 38257...
Running Lighthouse 3 time(s) on http://localhost:38257/index.html
Run #1...done.
Run #2...done.
Run #3...done.
Done running Lighthouse!
TypeError: normalizeAssertion is not a function or its return value is not iterable
at getAllFilteredAssertionResults (/opt/hostedtoolcache/node/10.17.0/x64/lib/node_modules/@lhci/cli/node_modules/@lhci/utils/src/assertions.js:390:39)
at getAllAssertionResults (/opt/hostedtoolcache/node/10.17.0/x64/lib/node_modules/@lhci/cli/node_modules/@lhci/utils/src/assertions.js:440:23)
at Object.runCommand (/opt/hostedtoolcache/node/10.17.0/x64/lib/node_modules/@lhci/cli/src/assert/assert.js:54:22)
at run (/opt/hostedtoolcache/node/10.17.0/x64/lib/node_modules/@lhci/cli/src/cli.js:87:23)
at Object.<anonymous> (/opt/hostedtoolcache/node/10.17.0/x64/lib/node_modules/@lhci/cli/src/cli.js:118:1)
at Module._compile (internal/modules/cjs/loader.js:778:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)assert command failed. Exiting with status code 1.
##[error]Process completed with exit code 1.
I'm not sure if I missed something during the update or is it a bug?
carrying over from https://github.com/GoogleChrome/web.dev/pull/1757/files#r339844263 .....
zeit used to allow you to run your own webserver (they're now just static site and serverless functions).. but at the time they'd look for a now-start
npm script first.. and if not they'd use a start
npm script.
that's one option here too.. we look for start:lhci
followed by start
. if there's neither we log an error.
One downside here in doing all this automagically is that we don't really know exactly how long to wait after starting the server before we can begin collecting. i guess some sites have complicated servers that don't kick off instantly?
Is there any way to find the LHCI_GITHUB_APP_TOKEN
once you close the authorization confirmation page? 😄
I can't find it in the documentation.
This would be a good question to add to the FAQ.
If I run Travis without Lighthouse it passes all the tests.
When I add Lighthouse the test fails because my app is not optimized yet.
But when Lighthouse fails Travis also fails.
I only use Travis for checking syntax style and linting, not for running tests.
So, in my case, the ideal behavior would be that when Lighthouse finishes its tests just updates the GitHub status, but not making Travis fail.
Can this be added as a CLI Command or as an option in lighthouserc.json
?
Thanks,
btw: I love this tool, you are doing a great job
project-graphs.jsx:71 Uncaught (in promise) TypeError: Cannot read property 'map' of undefined
at render (project-graphs.jsx:71)
at y.o [as constructor] (async-loader.jsx:19)
at y.L [as render] (index.js:337)
at U (index.js:119)
at children.js:85
at C (children.js:194)
at C (children.js:190)
at b (children.js:52)
at U (index.js:131)
at children.js:85
on https://lhci-canary.herokuapp.com/app/projects/d1e4b15c-e644-4552-b136-e975f486a2ce
dunno which of these we'd consider post-launch but just jotting them all down for now
from GoogleChrome/web.dev#1757
https://travis-ci.org/GoogleChrome/web.dev/builds/604191888#L634
also I think the /build/ command is also posted by the github status
But we (thanks to me) changed the url to /compare/ and so it 404s and the router falls back to the homepage.
Handling the redirect would be cool, but mostly we should just fix the original links.
The link in the readme for 'Lighthouse' directs to a 404 page.
https://lhci-canary.herokuapp.com/app/projects/d819a1f6-2630-4ee8-a451-95e369fec825/builds/80872396-61cc-46b0-ae98-ddeb705ea990?baseHash=006657567ad7fdd6d71f8041c3f9b9baeca50225
how can it have no change
if there is a change? :)
also.. are we currently sorting within the groups? seems like we're not sorted within 'better' here, right?
Hey,
I use Github Actions as CI. I set up a Github Token through secrets, everything works well except setting status, it fails with Invalid repo slug "undefined", skipping.
lgci autorun
logs:
✅ .lighthouseci/ directory writable
✅ Ancestor hash determinable
Healthcheck passed!
Automatically determined ./public as `staticDistDir`.
Set it explicitly in lighthouserc.json if incorrect.
Started a web server on port 33093...
Running Lighthouse 3 time(s) on http://localhost:33093/index.html
Run #1...done.
Run #2...done.
Run #3...done.
Done running Lighthouse!
Uploading median LHR of http://localhost:33093/index.html...success!
Open the report at https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1573513709814-41442.report.html
GitHub token found, attempting to set status...
Invalid repo slug "undefined", skipping.
Done running autorun.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.