chrome-har crashes with "Cannot set property 'receive' of undefined" when working on puppeteer output

[talShacharTufin]

when trying to work on my application using puppeteer i attempted to use chrome-har to convert the session events into a har file everything works great, except a few requests (3 requests which are all served from browser cache) which seem to cause chrome-har to crash with following error message

TypeError: Cannot set property 'receive' of undefined
    at harFromMessages (c:\tufin\tasks\2019_08_27_puppeteerPlayground\node_modules\chrome-har\index.js:373:29)
    at Object.<anonymous> (c:\tufin\tasks\2019_08_27_puppeteerPlayground\testEventsLeadingToErrorInChromHar.js:25:13)

this is how i created the browser session events that i used to create the har file that fails

let events = [];
const client = await page.target().createCDPSession();
await client.send('Page.enable');
await client.send('Network.enable');
observe.forEach(method => {
    client.on(method, params => {
        events.push({ method, params });
    });
});

this is an example of the problematic events (from a single requestId) that failed

{
        "method": "Network.requestWillBeSent",
        "params": {
            "requestId": "1000029348.4288",
            "loaderId": "86B2349DB4E665FBB7E8BADA9DF0D2F6",
            "documentURL": "https://10.100.9.28/securetrack/pages/homePage/dashboard/dashboardMain.faces",
            "request": {
                "url": "https://10.100.9.28/securetrack/fonts/fontawesome-webfont.woff2?v=4.5.0",
                "method": "GET",
                "headers": {},
                "mixedContentType": "none",
                "initialPriority": "VeryLow",
                "referrerPolicy": "no-referrer-when-downgrade"
            },
            "timestamp": 257791.674372,
            "wallTime": 1567574376.163183,
            "initiator": {
                "type": "parser",
                "url": "https://10.100.9.28/securetrack/pages/homePage/dashboard/dashboardMain.faces",
                "lineNumber": 42
            },
            "type": "Font",
            "frameId": "15AFFC9193B829A16FD799DE57028678",
            "hasUserGesture": false
        }
    },
    {
        "method": "Network.requestServedFromCache",
        "params": {
            "requestId": "1000029348.4288"
        }
    },
    {
        "method": "Network.loadingFinished",
        "params": {
            "requestId": "1000029348.4288",
            "timestamp": 257791.674396,
            "encodedDataLength": 0,
            "shouldReportCorbBlocking": false
        }
    }

when i remove all of the requests which are problematic (there are 3 requests, all related to this strange fontawesome-webfont url, with 3 events each, total 9 events) everything works great

[talShacharTufin]

could not create a gist, due to size of json events file, but here is an attached code

it shows where it fails, and how it succeeds when all 9 relevant events are removed from events list

2019_08_27_chrome_har_not_workingScenario.zip

[nathdebashish]

same issue I also hitting. both for SPA and simple website

[soulgalore]

@nathdebashish how do you generate the HAR, traces from Browsertime or puppeteer?

@talShacharTufin in some cases there are content for some web sites that are handled correctly by Chrome, and I think the way to "fix" that is to not be so strict as we are and just pass it. Let me have a look when I get the time!

[talShacharTufin]

@soulgalore just to be clear so i won't cause you any confusion. i'm not creating the har file i attached in a standard way inside the browser (by rightclicking the network tab and selecting "save har with content") i create it from code using puppeteer as i've shown here.

let events = [];
const client = await page.target().createCDPSession();
await client.send('Page.enable');
await client.send('Network.enable');
observe.forEach(method => {
    client.on(method, params => {
        events.push({ method, params });
    });
});

so lets not ignore the possibility that the way i create the har file is the issue here (i don't really understand it, i just copied and pasted it from somewhere and for the most part it works ok)

[soulgalore]

Yep you can inject your own event in your events. Ask the Puppeteer team how to do that right.

[nathdebashish]

@soulgalore just to be clear so i won't cause you any confusion. i'm not creating the har file i attached in a standard way inside the browser (by rightclicking the network tab and selecting "save har with content") i create it from code using puppeteer as i've shown here.

let events = [];
const client = await page.target().createCDPSession();
await client.send('Page.enable');
await client.send('Network.enable');
observe.forEach(method => {
  client.on(method, params => {
      events.push({ method, params });
  });
});

so lets not ignore the possibility that the way i create the har file is the issue here (i don't really understand it, i just copied and pasted it from somewhere and for the most part it works ok)

can pls provide this complete code snippet , so that I can try at my example. I have a single page application and need to capture har for page navigation

[nathdebashish]

@nathdebashish how do you generate the HAR, traces from Browsertime or puppeteer?

@talShacharTufin in some cases there are content for some web sites that are handled correctly by Chrome, and I think the way to "fix" that is to not be so strict as we are and just pass it. Let me have a look when I get the time!

I tried dumping HAR using Puppeteer-har ( which internally uses chrome-har ) and a puppeteer supported js script My application is Single page application

[Robinnnnn]

@nathdebashish I was having the same issue, but looks like the error was recently fixed in this PR: https://github.com/sitespeedio/chrome-har/pull/53

i upgraded to "chrome-har": "^0.11.2" and the error went away!