-
Notifications
You must be signed in to change notification settings - Fork 9.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
core: record top-level warnings in LHR and display in report #3692
Conversation
@@ -301,6 +319,9 @@ class GatherRunner { | |||
static collectArtifacts(gathererResults) { | |||
const artifacts = {}; | |||
|
|||
// Nest LighthouseRunWarnings, if any, so they will be collected into artifact. | |||
gathererResults.LighthouseRunWarnings = [gathererResults.LighthouseRunWarnings || []]; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this ends up a bit weird. gatherResults
expects an array of results for [beforePass, pass, afterPass]
, the winner of which is selected just below. For adding warnings, however, that means everywhere a warning is added would have to do gathererResults.LighthouseRunWarnings[0].push('...')
. This cheats it by keeping gathererResults.LighthouseRunWarnings
a top level array everywhere (so it's just gathererResults.LighthouseRunWarnings.push('...')
) and then nesting it into an array so it can be processed here
*/ | ||
_renderReportWarnings(report) { | ||
if (!report.lighthouseRunWarnings || report.lighthouseRunWarnings.length === 0) { | ||
return null; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
alternatively this could return an empty div so the caller wouldn't need to check the results
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I suppose I have a slight preference for empty div, but I don't feel terribly strongly if this is a pattern we can expect to employ elsewhere as well (I can't think of any off the top of my head, but maybe you borrowed from somewhere?)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I have a slight preference for empty div
done
a00a06a
to
554444d
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
hurray finally a mechanism for top level warnings! :D
what do the expected flows look like for adding items to the warnings from audits and gatherers?
from audits: depend on the RunWarnings artifact and mutate it? feels a bit gross but super easy
from gatherers: add runWarnings
to passData
and give to gatherer afterPass?
@@ -301,6 +319,9 @@ class GatherRunner { | |||
static collectArtifacts(gathererResults) { | |||
const artifacts = {}; | |||
|
|||
// Nest LighthouseRunWarnings, if any, so they will be collected into artifact. | |||
gathererResults.LighthouseRunWarnings = [gathererResults.LighthouseRunWarnings || []]; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
shouldn't gathererResults.LighthouseRunWarnings
always be set? if not, do we need a safeguard in warnOnHeadless too
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
shouldn't gathererResults.LighthouseRunWarnings always be set?
it should always be set, I was thinking of runner
when I added that :)
@@ -202,6 +227,7 @@ ReportRenderer.GroupJSON; // eslint-disable-line no-unused-expressions | |||
* timing: {total: number}, | |||
* initialUrl: string, | |||
* url: string, | |||
* lighthouseRunWarnings: !Array<string>, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
not sure how we should be modeling extensions to the report JSON here, the latest renderer needs to render older versions that might be missing runWarnings, which you account for, but it is nice to have the closure annotations match the current invariants
thoughts?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
yeah, it should be optional. Fixed
lighthouse-core/runner.js
Outdated
@@ -150,6 +157,7 @@ class Runner { | |||
generatedTime: (new Date()).toJSON(), | |||
initialUrl: opts.initialUrl, | |||
url: opts.url, | |||
lighthouseRunWarnings, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🚲 🏠 can we ditch the lighthouse
prefix, it's the LHR so hopefully everything is lighthouse related
don't want to end up in a classic lighthouse-core
, lighthouse-cli
, lighthouse-*
situation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
SG
line-height: var(--header-line-height); | ||
} | ||
.lh-run-warnings::before { | ||
display: inline-block; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
interesting, what for? oh are you reusing an icon from some other class?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
oh are you reusing an icon from some other class?
yeah, the styling from lh-debug
. Stolen from Eric's #2920
*/ | ||
_renderReportWarnings(report) { | ||
if (!report.lighthouseRunWarnings || report.lighthouseRunWarnings.length === 0) { | ||
return null; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I suppose I have a slight preference for empty div, but I don't feel terribly strongly if this is a pattern we can expect to employ elsewhere as well (I can't think of any off the top of my head, but maybe you borrowed from somewhere?)
* @param {!GathererResults} gathererResults | ||
* @return {!Promise<undefined>} | ||
*/ | ||
static warnOnHeadless(driver, gathererResults) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nit: we just computed UserAgent the step before this, so could eliminate driver dep
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
I actually hadn't thought about gatherers hard enough. I was thinking the A separate idea from all of this would be some new |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
lgtm!
<!-- Lighthouse run warnings --> | ||
<template id="tmpl-lh-run-warnings"> | ||
<div class="lh-run-warnings lh-debug"> | ||
<b>There were issues affecting this run of Lighthouse:</b> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
is strong
not the hip young tag it once was? 😆
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Brendan- small nit on UX. Can we make the error section of the report a box with a light yellow background? This will help separate the content out for end user. I also think having it red font makes it a bit scary, so changing it to a non-red color would be helpful. I can throw together a quick mock if that's useful.
Also- what's the product behavior with surfacing errors. How many errors can surface at a time, is there anyway that we can help prioritize, and do we want to have an opinion on how many errors to flash/what gets shown here?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM, thanks Brendan!
4d23f41
to
d8a8c1f
Compare
@paulirish if you want in |
Adds a
LighthouseRunWarnings
artifact ingather-runner
and alighthouseRunWarnings
inrunner
(whichLighthouseRunWarnings
is folded into whengather-runner
is complete) to collect top-level warnings worthy of bringing to the user's attention (e.g. ran in Headless which doesn't support throttling). For now onlygather-runner
andrunner
can add to these, but should be easy to extend if we want to e.g. let gatherers or audits emit warnings they think are worthy of floating to the top. Happy to bikeshed on naming and exact flow of warning strings.steals the styling in the HTML report from #2920, but not remotely attached to it :)closes #2920 by adding a warning when running in Headless