[Feature]: Adding blocked and queued time to the ResourceTiming

[vigneshshanmugam]

Feature request

To understand how much time the browser spent on a single request, Playwright already exposes the timing information to some extend that would help in figuring out the time spent on dns, ssl, connect, and download events.

To understand the timing data before the request was even fired, It would be great to have the ability to extract blocked, queued time which is not possible to obtain at the moment. Proposing to have more fields like requestSentTime/requestIssueTime, responseReceived and responseEndTime

https://github.com/microsoft/playwright/blob/master/src/server/network.ts#L274-L283

Usecase: Currently we directly hook on to the CDP protocol to understand the full timing information on all events including blocked, queued, proxy etc, Having these available in PW would make it cross browser and also helps remove the need for hooking in to CDP.

Would it be of interest from the PW team, I am happy to work on a PR. Thoughts?

[aslushnikov]

Would it be of interest from the PW team, I am happy to work on a PR. Thoughts?

@vigneshshanmugam This will require sending patches to our WebKit & Firefox as well, which has a relatively steep learning curve: https://github.com/microsoft/playwright/tree/master/browser_patches

Are you willing to deep dive there as well?

[pavelfeldman]

I don't think we need new patches upstream - we only need a timestamp in requestWillBeSent, which I think we already have.

[pavelfeldman]

@vigneshshanmugam are you up for sending a patch? You might need an extra line or two in Juggler, but other than that should be doable. The patch would need to expose requestTime on request.

[vigneshshanmugam]

Was thinking of extending the ResourceTiming info to this to make the calculation of blocked and other timings easier.

response.timing()
{
  issueTime: number
  startTime: number;
  domainLookupStart: number;
  domainLookupEnd: number;
  connectStart: number;
  secureConnectionStart: number;
  connectEnd: number;
  requestStart: number;
  responseStart: number;
  responseEnd: number
}

And can extract like

const queued = toMills(timing.issueTime - timing.startTime)
// etc

Am in on the right path here?

@pavelfeldman Sure happy to overlook there and work on a PR.

[vigneshshanmugam]

Came to conclusion to close the PR #7686 and add the blocked time to harTracer which can be calculated from startTime - dns/connect start.