HTML Report generation: Cannot read property 'channel' of undefined

Steps to reproduce

I used the following code to get statistics for a webpage using LH and Puppeteer. Issue can be reproduced for different pages, provided example is for http://www.google.com

1. Create a function to get a report (typescript):

import * as path from 'path';
import * as fs from 'fs';
import lighthouse from 'lighthouse';
import ReportGenerator from 'lighthouse/lighthouse-core/report/report-generator';
import { Page } from 'puppeteer';

import { Generic } from '../Generic'; // It contains only custom logging function, can be commented
import perfConfig from './perf-config'; // LH performance config file from sample configs


export class UIPerformance {
  public static async getLighthouseMetrics(page: Page, filename: string) {
    const port = await page.browser().wsEndpoint().split(':')[2].split('/')[0];

    try {
      let results: any;
      results = await lighthouse(page.url(), { port: port }, perfConfig);
      
      const jsonReport = ReportGenerator.generateReport(results.lhr, 'json');
      const htmlReport = ReportGenerator.generateReport(results.report, 'html');
      delete results.artifacts;

      const rootDir = path.normalize(path.join(__dirname, '../../'));
      const lighthouseReportsPath = path.join(rootDir, 'lighthouseReports');
      fs.mkdirSync(lighthouseReportsPath, { recursive: true });

      fs.writeFile(`${lighthouseReportsPath}/${filename}.json`, jsonReport, (err) => {
        if (err) {
          Generic.logToConsole(err);
        };
        Generic.logToConsole(`Lighthouse JSON report saved to ${lighthouseReportsPath}/${filename}.json`);
      });

      fs.writeFile(`${lighthouseReportsPath}/${filename}.html`, htmlReport, (err) => {
        if (err) {
          Generic.logToConsole(err);
        };
        Generic.logToConsole(`Lighthouse HTML report saved to ${lighthouseReportsPath}/${filename}.html`);
      });

    } catch (err) {
      Generic.logToConsole(err);
    }
  }
}

1. Launch puppeteer, open browser, page, go to url.
2. Call the function. I run this function in my mocha tests.

What is the current behavior?

Two reports were generated (JSON and HTML). Chrome is not able to display html file properly. It shows just blank page and throws an error in a console:

compiled-reportrenderer.js:3783 Uncaught TypeError: Cannot read property 'channel' of undefined
    at ReportRenderer.renderReport (compiled-reportrenderer.js:3783)
    at __initLighthouseReport__ (MainPage.html:6480)

Both reports are attached. lighthouseReports.zip

What is the expected behavior?

Two reports should be generated (JSON and HTML). HTML file should be opened properly in Chrome.

Environment Information

• Affected Channels: CLI, ReportRenderer
• Lighthouse version: 5.2.0
• Node.js version: 3.5.2
• Operating System: Windows 10

[patrickhulce]

fs.writeFileSync('myfile.json', JSON.stringify(results.lhr)) is what you are looking for to avoid the [object Object], this is exactly what ReportGenerator.generateReport does

[DJ-Glock]

@connorjclark thanks a lot.

results = await lighthouse(page.url(), { port: port, output: 'html'}, perfConfig);
      
const jsonReport = results.lhr;
const htmlReport = results.report;

works fine for html, but it generates json file with the following content: [object Object] Is it correct?

As a workaround I did the following:

const results = await lighthouse(page.url(), { port: port, output: 'html'}, perfConfig);
const htmlReport = results.report;
const jsonReport = ReportGenerator.generateReport(results.lhr, 'json');
delete results.artifacts;