Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: XHR req method capture #1527

Merged
merged 7 commits into from
Nov 15, 2024
Merged
Show file tree
Hide file tree
Changes from 5 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 56 additions & 0 deletions cypress/e2e/session-recording.cy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -280,6 +280,62 @@ describe('Session recording', () => {
)
})
})

it('it captures XHR method correctly', () => {
Copy link
Member Author

Choose a reason for hiding this comment

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

these tests have a lot of duplication now, but I want to get this fix out

Copy link
Member

Choose a reason for hiding this comment

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

This test is pretty convincing, how would it have failed before?

Copy link
Member

Choose a reason for hiding this comment

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

The method = POST assertion?

Copy link
Member Author

Choose a reason for hiding this comment

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

yep... it was always GET before (or at least overwhelmingly GET I didn't check which)

Copy link
Member Author

Choose a reason for hiding this comment

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

and for clarity I validated the test failed before the change 😊

cy.get('[data-cy-xhr-call-button]').click()
cy.wait('@example.com')
cy.wait('@session-recording')
cy.phCaptures({ full: true }).then((captures) => {
const snapshots = captures.filter((c) => c.event === '$snapshot')

const capturedRequests: Record<string, any>[] = []
for (const snapshot of snapshots) {
for (const snapshotData of snapshot.properties['$snapshot_data']) {
if (snapshotData.type === 6) {
for (const req of snapshotData.data.payload.requests) {
capturedRequests.push(req)
}
}
}
}

const expectedCaptureds: [RegExp, string][] = [
[/http:\/\/localhost:\d+\/playground\/cypress\//, 'navigation'],
[/http:\/\/localhost:\d+\/static\/array.js/, 'script'],
[
/http:\/\/localhost:\d+\/decide\/\?v=3&ip=1&_=\d+&ver=1\.\d\d\d\.\d+&compression=base64/,
'xmlhttprequest',
],
[/http:\/\/localhost:\d+\/static\/recorder.js\?v=1\.\d\d\d\.\d+/, 'script'],
[/https:\/\/example.com/, 'xmlhttprequest'],
]

// yay, includes expected type 6 network data
expect(capturedRequests.length).to.equal(expectedCaptureds.length)
expectedCaptureds.forEach(([url, initiatorType], index) => {
expect(capturedRequests[index].name).to.match(url)
expect(capturedRequests[index].initiatorType).to.equal(initiatorType)
})

// the HTML file that cypress is operating on (playground/cypress/index.html)
// when the button for this test is click makes a post to https://example.com
const capturedFetchRequest = capturedRequests.find((cr) => cr.name === 'https://example.com/')
expect(capturedFetchRequest).to.not.be.undefined

expect(capturedFetchRequest.fetchStart).to.be.greaterThan(0) // proxy for including network timing info

expect(capturedFetchRequest.initiatorType).to.eql('xmlhttprequest')
expect(capturedFetchRequest.method).to.eql('POST')
expect(capturedFetchRequest.isInitial).to.be.undefined
expect(capturedFetchRequest.requestBody).to.eq('i am the xhr body')

expect(capturedFetchRequest.responseBody).to.eq(
JSON.stringify({
message: 'This is a JSON response',
})
)
})
})
})
})

Expand Down
22 changes: 22 additions & 0 deletions playground/cypress/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,28 @@
Make network call
</button>

<button data-cy-xhr-call-button onclick="makeXHRNetworkPOST()">
Make XHR post network call
</button>

<script>
function makeXHRNetworkPOST() {
const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://example.com');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = function () {
if (xhr.status >= 200 && xhr.status < 300) {
console.log('Response:', xhr.responseText);
} else {
console.error('Request failed with status:', xhr.status);
}
};
xhr.onerror = function () {
console.error('Network error');
};
xhr.send('i am the xhr body');
}
</script>
<br />

<button data-cy-feature-flag-button onclick="console.log(posthog.isFeatureEnabled('some-feature'))">
Expand Down
4 changes: 2 additions & 2 deletions src/entrypoints/recorder.ts
Original file line number Diff line number Diff line change
Expand Up @@ -309,7 +309,7 @@ function initXhrObserver(cb: networkCallback, win: IWindow, options: Required<Ne
.then((entry) => {
const requests = prepareRequest({
entry,
method: req.method,
method: method,
Copy link
Member Author

Choose a reason for hiding this comment

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

this is the fix... the method is provided to the XHR function when it is called so we should use it

status: xhr?.status,
networkRequest,
start,
Expand Down Expand Up @@ -386,7 +386,7 @@ function prepareRequest({
timeOrigin,
timestamp,
method: method,
initiatorType: entry ? (entry.initiatorType as InitiatorType) : initiatorType,
Copy link
Member Author

Choose a reason for hiding this comment

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

flips the choice here... if we're providing an initiator we should use it in preference to the detected one

they should always match

initiatorType: initiatorType ? initiatorType : entry ? (entry.initiatorType as InitiatorType) : undefined,
status,
requestHeaders: networkRequest.requestHeaders,
requestBody: networkRequest.requestBody,
Expand Down
4 changes: 0 additions & 4 deletions src/extensions/replay/sessionrecording.ts
Original file line number Diff line number Diff line change
Expand Up @@ -430,10 +430,6 @@ export class SessionRecording {
}

/**
pauldambra marked this conversation as resolved.
Show resolved Hide resolved
* Any one trigger can activate the session
* So, if they are all the same - return that value
* If either is disabled return the other's valu
* @private
*/
pauldambra marked this conversation as resolved.
Show resolved Hide resolved
private get triggerStatus(): TriggerStatus {
const eitherIsActivated =
Expand Down
Loading