Blank html reports with temporary-public-storage option

[danipv]

Hello team,

I'm getting blank html reports when I use the upload target temporary-public-storage. The html exist but it does not show anything, but if you inspect the code there is a json object that actually contains some data.

Example of blank report url: https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1598532639659-25984.report.html

This is the basic config I use to reproduce the error:

module.exports = {
  ci: {
    collect: {
      chromePath: './chrome-linux/chrome',
      url: [
        'http://localhost:8081/home/',
      ],
    },
    upload: {
      target: 'temporary-public-storage',
    },
  },
};

lhci: @lhci/cli@0.5.0
chrome linux: Chromium 87.0.4247.0 (https://download-chromium.appspot.com/dl/Linux_x64?type=snapshots)

Thanks a lot!

[danipv]

Well, I dig a little bit more in the issue. Seems to be a render problem. When the function renderSourceLocation receive an item like this:

item: {


  column: 85,

  line: 0,
  
type: "source-location",
  
url: "data:text/javascript;charset=utf-8,%22use%20strict%22%3Bfunction[…]",
}

When url property doesn't contains a canonical url, the snippet generated by the inner function renderTextURL doens't have an a element and the function throws an error.

Maybe this is a solution if I'm not missing something.

- if (item.urlProvider === 'network') {
+ if (item.urlProvider === 'network' && item.url.indexOf('data:text/javascript') === -1) {
      element = this.renderTextURL(item.url);
      this._dom.find('a', element).textContent += `:${line}:${column}`;
    } else {
      element = this._renderText(`${item.url}:${line}:${column} (from sourceURL)`);
    }

Happy to open a PR if you approve this solution.

[danipv]

Seems to be is solved here: GoogleChrome/lighthouse#11299.

[patrickhulce]

Thanks for doing the digging @danipv! That is indeed the fix for this particular bug :)