Skip to content

feat(har): include WebSocket in .har#41015

Open
dcrousso wants to merge 1 commit into
microsoft:mainfrom
dcrousso:drousso/feat-har-websocket
Open

feat(har): include WebSocket in .har#41015
dcrousso wants to merge 1 commit into
microsoft:mainfrom
dcrousso:drousso/feat-har-websocket

Conversation

@dcrousso
Copy link
Copy Markdown

add an entry for each WebSocket when generating a .har

also include data for each sent/received frame in a custom property _webSocketMessages (for more info see https://developer.chrome.com/blog/new-in-devtools-76#websocket)

both Chrome and WebKit already capture the wallTime for the initial request and a timestamp for each subsequent message (i.e. diff the timestamp relative to the initial timestamp and add the wallTime in order to determine the current wallTime)

unfortunately Firefox does not have this so fall back to Date.now() / 1000

fixes #30315

@dcrousso
Copy link
Copy Markdown
Author

@microsoft-github-policy-service agree company="Microsoft"

}

private _addPageEventListeners(page: Page) {
if (this._page && page !== this._page)
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

don't we want to listen to all pages?

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it seems like it's possible to create a HarTracer that only looks at stuff for a particular Page

for example, you can see this check also in _createPageEntryIfNeeded and _onRequest

this._requestTimestamp = timestamp;
}

private _normalizeTimestamp(timestamp: number | undefined): number {
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

rename to _toWalltime?

}

setTimestampBaseline(wallTime: number, timestamp: number) {
this._requestWallTime = wallTime;
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In createHarEntry we only use startedDateTime and _monotonicTime both of which are computed on the playwright end at the moment the entry is created. Maybe it's good enough to have the same for the websocket frames?

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i figured since both Chromium and WebKit already have these values we might as well use them

but yeah if you feel strongly that we shouldn't then i absolutely can remove

Comment thread tests/library/har.spec.ts Outdated
const wsEntry = log.entries.find(e => e.request.url === wsUrl)!;
expect(wsEntry).toBeTruthy();
expect(wsEntry.response.status).toBe(101);
expect((wsEntry as any)._resourceType).toBe('websocket');
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cast the entry once to the har type to avoid repetitive as any

Copy link
Copy Markdown
Member

@yury-s yury-s left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In case of content: 'attach' we need to store the content as external resources, let's also add a test for that.

return;

const pageEntry = this._createPageEntryIfNeeded(page);
const harEntry = createHarEntry(pageEntry?.id, 'GET', url, page.mainFrame().guid, this._options);
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we'll need to populate headers too

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah i realized that after i uploaded this PR 😅

working on that right now

@github-actions

This comment has been minimized.

@github-actions

This comment has been minimized.

@dcrousso dcrousso force-pushed the drousso/feat-har-websocket branch from 91ad605 to 9f3d97c Compare May 27, 2026 21:14
@dcrousso dcrousso requested a review from yury-s May 27, 2026 21:15
@github-actions

This comment has been minimized.

@github-actions

This comment has been minimized.

@dcrousso dcrousso force-pushed the drousso/feat-har-websocket branch from 9f3d97c to b423303 Compare May 27, 2026 22:24
@github-actions

This comment has been minimized.

@github-actions

This comment has been minimized.

add an entry for each `WebSocket` when generating a `.har`

also include data for each sent/received frame in a custom property `_webSocketMessages` (for more info see <https://developer.chrome.com/blog/new-in-devtools-76#websocket>)

both Chrome and WebKit already capture the `wallTime` for the initial request and a `timestamp` for each subsequent message (i.e. diff the `timestamp` relative to the initial `timestamp` and add the `wallTime` in order to determine the current `wallTime`)

unfortunately Firefox does not have this so fall back to `Date.now() / 1000`
@dcrousso dcrousso force-pushed the drousso/feat-har-websocket branch from b423303 to 92e554b Compare May 27, 2026 23:21
@github-actions
Copy link
Copy Markdown
Contributor

Test results for "MCP"

7181 passed, 1113 skipped


Merge workflow run.

@github-actions
Copy link
Copy Markdown
Contributor

Test results for "tests 1"

1 flaky ⚠️ [chromium-library] › library/popup.spec.ts:261 › should not throw when click closes popup `@ubuntu-22.04-chromium-tip-of-tree`

43952 passed, 864 skipped


Merge workflow run.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature]: include websocket traffic in har file

2 participants