GoogleChrome / web-vitals

Essential metrics for a healthy site.
https://web.dev/vitals
Apache License 2.0
7.49k stars 410 forks source link

Cannot see logs in console #339

Closed DavidMachacek closed 1 year ago

DavidMachacek commented 1 year ago

I am running the following script to inject WebVitals in websites we are monitoring:

driver.execute_cdp_cmd("Page.addScriptToEvaluateOnNewDocument", {
    "source": """
        function logRating({name, id, rating, value}) {
          console.log(`${name}=${rating}, value=${value}, identifier=webvitals`);
        }
        document.ready = function(){
            var myScript = document.createElement('script');
            myScript.src = 'https://unpkg.com/web-vitals@3/dist/web-vitals.iife.js';
            myScript.onload = function () {
                webVitals.onCLS(logRating);
                webVitals.onFID(logRating);
                webVitals.onLCP(logRating);
            };
            document.head.insertBefore(myScript, document.head.firstChild);
            console.log(`Injected Web-vitals script`);
        };
  """
})
pageUrl = "https://www.testsite.com/"
driver.get(pageUrl)
time.sleep(10)
for entry in driver.get_log('browser'):
    record = json.loads(json.dumps(entry))
    if "webvitals" in record["message"]:
        if "good" in record["message"]:
            logging.info(record["message"])
        if "needs-improvement" in record["message"]:
            logging.warning(str(record["message"]))
        if "poor" in record["message"]:
            logging.error(record["message"])

The problem is the console records are not displayed without refreshing the console log window. I need to open another tab, switch it, or just minimize/maximize the browser window for the console to be refreshed, but this approach is not available from inside certain webdriver deployment stacks. This might not be issue of the WebVitals themselves. But still it prevents me from using it in our syntethic monitoring containers. How can I ensure the callbacks are resolved and accessible in the console?

tunetheweb commented 1 year ago

This intentionally for LCP and CLS but should not be the case for FID.

LCP is not "finalised" until there is either an interaction or a the page is navigated away from (when a page is hidden we also emit the LCP event as sometimes people come back so it's more a proxy for navigating way, rather than ideal). This is because the page might still be loading and another, later, bigger LCP element could still be drawn.

Your options are either to enable reportAllChanges - but then multiple LCP events may be reported, or you can simulate a click to finalise the LCP, or you can create (or emulate) a visibility change. You can see we use all three in our test cases: https://github.com/GoogleChrome/web-vitals/blob/main/test/e2e/onLCP-test.js

CLS is a similar situation, except click does not finalize CLS so that's not the an option for you. We have a stubVisibilityChange function to emulate a visibility change and finalise the CLS, and again you can see this in our test suite: https://github.com/GoogleChrome/web-vitals/blob/main/test/e2e/onCLS-test.js

FID should be emitted as soon as the first interaction happens. But a FID of 0 is not emitted if there are no interactions. So you must emulate a click (or some other interaction) for it to emit.