Feature Request: Request Additional Event Tracking

[asos-dominicjomaa]

Context

This application has a Stats module listens for a number of Page and Network events.

Feature Request

Would be handy to have some kind of hook on the run command (similar to prehook) to request additional events and their data into the page level or entry level. That way a user can expand the analysis surface area and look for more events. Perhaps even wider than just page/network such as PerformanceTime line etc.

[cyrus-and]

Thet's literally why I introduced pre/post hooks, take a look at this example:

const CHC = require('chrome-har-capturer');

const events = [];

async function preHook(url, {PerformanceTimeline}) {
    await PerformanceTimeline.enable({
        eventTypes: [
            'largest-contentful-paint'
        ]
    });

    PerformanceTimeline.timelineEventAdded(({event}) => {
        events.push(event);
    });
}

async function postHook(url, client) {
    return events;
}

CHC.run(['https://github.com'], {
    preHook, postHook
}).on('har', (har) => {
    console.log(JSON.stringify(har, 4, null));
});

[asos-dominicjomaa]

After trying this I was wondering if there was a simple way to associate the event returned to a given page id returned in the final HAR? The intention of my feature request was that feature would inject the results of those events as the onLoad and onContentLoad values are already.

Event:

{
  event: {
    frameId: '9216A84D857D13A2277C52BE7098AABA',
    type: 'largest-contentful-paint',
    name: '',
    time: 1698768276.1666,
    lcpDetails: { renderTime: 1698768276.1666, loadTime: 0, size: 3782 }
  }
}

Page Entry:

{
    id: "page_1_13393034617828747",
    title: "https://test.asosservices.com/harness/dragon",
    startedDateTime: "2023-10-31T16:04:32.938Z",
    pageTimings: {
      onContentLoad: 2109.0390000343323,
      onLoad: 2644.6480000019073
    }
}

[cyrus-and]

What do you mean? The extra stuff returned by the post hook is placed under the _user key on the pages[...] object, hence is implicitly associated. For example:

[...]
json.log.pages = [];
json.log.pages[0] = {};
json.log.pages[0]._user = [];
json.log.pages[0]._user[0] = {};
json.log.pages[0]._user[0].frameId = "33139BEE8CC321FD90717D80EB354370";
json.log.pages[0]._user[0].lcpDetails = {};
json.log.pages[0]._user[0].lcpDetails.loadTime = 1698769780.1577997;
json.log.pages[0]._user[0].lcpDetails.nodeId = 10;
json.log.pages[0]._user[0].lcpDetails.renderTime = 0;
json.log.pages[0]._user[0].lcpDetails.size = 234232;
json.log.pages[0]._user[0].lcpDetails.url = "https://github.githubassets.com/assets/lines-hero-6c09abf3dd42.svg";
json.log.pages[0]._user[0].name = "";
json.log.pages[0]._user[0].time = 1698769780.1577997;
json.log.pages[0]._user[0].type = "largest-contentful-paint";
json.log.pages[0].id = "page_1_24902485208099057";
json.log.pages[0].pageTimings = {};
json.log.pages[0].pageTimings.onContentLoad = 690.8409999608994;
json.log.pages[0].pageTimings.onLoad = 788.7079999446869;
json.log.pages[0].startedDateTime = "2023-10-31T16:29:39.685Z";
json.log.pages[0].title = "https://github.com";
[...]

[asos-dominicjomaa]

Gotcha, thanks for the help!