web.dev consistently errors on Network.getResponseBody for main content

• run node lighthouse-cli/index.js https://web.dev --only-categories best-practices --view
• get Properly defines charset – Error!

(also happens in DevTools and PSI)

Example report

The error is

Required MainDocumentContent gatherer encountered an error: Protocol error (Network.getResponseBody): No resource with given identifier found

and occurs here in driver when called from main-document-content.

It seems unusual that the main document content wouldn’t be available for the backend. @robdodson does mention some unusual things done with the service worker and “an app shell that pulls in an index.json of the page content when you go to other pages. We essentially replace main content area with this new content” that could be causing trouble (maybe the request really didn’t have any content?).

[patrickhulce]

Ah thanks @thepassle that helps a lot! I think this is happening because Chrome might only keep the network resources from the current page load in the memory cache which is what Lighthouse relies on to get the response body of the root document. We can do a bit more digging but this is a great head start 👍

related #8984 #11027

[thepassle]

We debugged a little bit more, we use a code snippet to reload the page when a new service worker has taken over:

if("serviceWorker"in navigator){let e;navigator.serviceWorker.addEventListener("controllerchange",()=>{e||(e=!0,window.location.reload())})}

❌ With that piece of code:

✅ Without that piece of code:

It seems that the reload is causing the best practices to error, hope that helps 🙂

EDIT:

In case anybody wants to workaround this, this seems to fix it. Also skips an unnecessary reload the first time a user visits your app (even though its so fast you might not have noticed)

        async function handleUpdate() {
          if ("serviceWorker"in navigator) {
            let refreshing;

            const oldSw = (await navigator.serviceWorker.getRegistration())?.active?.state;

            navigator.serviceWorker.addEventListener('controllerchange', async () => {
              if (refreshing) return;

              const newSw = (await navigator.serviceWorker.getRegistration())?.active?.state;

              if(oldSw === 'activated' && newSw === 'activating') {
                refreshing = true;
                window.location.reload();
              }
            });
          }
        }

        handleUpdate();