-
-
Notifications
You must be signed in to change notification settings - Fork 1.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(replay): Capture replay mutation breadcrumbs & add experiment (#…
- Loading branch information
Showing
8 changed files
with
290 additions
and
20 deletions.
There are no files selected for viewing
16 changes: 16 additions & 0 deletions
16
packages/browser-integration-tests/suites/replay/largeMutations/defaultOptions/init.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
import * as Sentry from '@sentry/browser'; | ||
|
||
window.Sentry = Sentry; | ||
window.Replay = new Sentry.Replay({ | ||
flushMinDelay: 500, | ||
flushMaxDelay: 500, | ||
}); | ||
|
||
Sentry.init({ | ||
dsn: 'https://public@dsn.ingest.sentry.io/1337', | ||
sampleRate: 0, | ||
replaysSessionSampleRate: 1.0, | ||
replaysOnErrorSampleRate: 0.0, | ||
|
||
integrations: [window.Replay], | ||
}); |
41 changes: 41 additions & 0 deletions
41
packages/browser-integration-tests/suites/replay/largeMutations/defaultOptions/template.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,41 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<meta charset="utf-8" /> | ||
</head> | ||
<body> | ||
<button id="button-add">Add items</button> | ||
<button id="button-modify">Modify items</button> | ||
<button id="button-remove">Remove items</button> | ||
<ul class="list"></ul> | ||
|
||
<script> | ||
document.querySelector('#button-add').addEventListener('click', () => { | ||
const list = document.querySelector('.list'); | ||
for (let i = 0; i < 1000; i++) { | ||
const li = document.createElement('li'); | ||
li.textContent = `test list item: ${i}`; | ||
li.setAttribute('id', `${i}`); | ||
list.appendChild(li); | ||
} | ||
}); | ||
|
||
document.querySelector('#button-modify').addEventListener('click', () => { | ||
document.querySelectorAll('li').forEach(li => { | ||
el.setAttribute('js-is-checked', new Date().toISOString()); | ||
el.setAttribute('js-is-checked-2', new Date().toISOString()); | ||
el.setAttribute('js-is-checked-3', 'yes'); | ||
el.setAttribute('js-is-checked-4', 'yes'); | ||
el.setAttribute('js-is-checked-5', 'yes'); | ||
el.setAttribute('js-is-checked-6', 'yes'); | ||
}); | ||
}); | ||
|
||
document.querySelector('#button-remove').addEventListener('click', () => { | ||
document.querySelectorAll('li').forEach(li => { | ||
document.querySelector('ul').removeChild(li); | ||
}); | ||
}); | ||
</script> | ||
</body> | ||
</html> |
67 changes: 67 additions & 0 deletions
67
packages/browser-integration-tests/suites/replay/largeMutations/defaultOptions/test.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,67 @@ | ||
import { expect } from '@playwright/test'; | ||
|
||
import { sentryTest } from '../../../../utils/fixtures'; | ||
import { getReplayRecordingContent, shouldSkipReplayTest, waitForReplayRequest } from '../../../../utils/replayHelpers'; | ||
|
||
sentryTest( | ||
'handles large mutations with default options', | ||
async ({ getLocalTestPath, page, forceFlushReplay, browserName }) => { | ||
if (shouldSkipReplayTest() || ['webkit', 'firefox'].includes(browserName)) { | ||
sentryTest.skip(); | ||
} | ||
|
||
const reqPromise0 = waitForReplayRequest(page, 0); | ||
const reqPromise0b = waitForReplayRequest(page, 1); | ||
|
||
await page.route('https://dsn.ingest.sentry.io/**/*', route => { | ||
return route.fulfill({ | ||
status: 200, | ||
contentType: 'application/json', | ||
body: JSON.stringify({ id: 'test-id' }), | ||
}); | ||
}); | ||
|
||
const url = await getLocalTestPath({ testDir: __dirname }); | ||
|
||
await page.goto(url); | ||
await forceFlushReplay(); | ||
const res0 = await reqPromise0; | ||
await reqPromise0b; | ||
// A second request is sent right after initial snapshot, we want to wait for that to settle before we continue | ||
|
||
const reqPromise1 = waitForReplayRequest(page); | ||
|
||
void page.click('#button-add'); | ||
await forceFlushReplay(); | ||
const res1 = await reqPromise1; | ||
|
||
const reqPromise2 = waitForReplayRequest(page); | ||
|
||
void page.click('#button-modify'); | ||
await forceFlushReplay(); | ||
const res2 = await reqPromise2; | ||
|
||
const reqPromise3 = waitForReplayRequest(page); | ||
|
||
void page.click('#button-remove'); | ||
await forceFlushReplay(); | ||
const res3 = await reqPromise3; | ||
|
||
const replayData0 = getReplayRecordingContent(res0); | ||
const replayData1 = getReplayRecordingContent(res1); | ||
const replayData2 = getReplayRecordingContent(res2); | ||
const replayData3 = getReplayRecordingContent(res3); | ||
|
||
expect(replayData0.fullSnapshots.length).toBe(1); | ||
expect(replayData0.incrementalSnapshots.length).toBe(0); | ||
|
||
expect(replayData1.fullSnapshots.length).toBe(0); | ||
expect(replayData1.incrementalSnapshots.length).toBeGreaterThan(0); | ||
|
||
expect(replayData2.fullSnapshots.length).toBe(0); | ||
expect(replayData2.incrementalSnapshots.length).toBeGreaterThan(0); | ||
|
||
expect(replayData3.fullSnapshots.length).toBe(0); | ||
expect(replayData3.incrementalSnapshots.length).toBeGreaterThan(0); | ||
}, | ||
); |
20 changes: 20 additions & 0 deletions
20
packages/browser-integration-tests/suites/replay/largeMutations/mutationLimit/init.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
import * as Sentry from '@sentry/browser'; | ||
|
||
window.Sentry = Sentry; | ||
window.Replay = new Sentry.Replay({ | ||
flushMinDelay: 500, | ||
flushMaxDelay: 500, | ||
_experiments: { | ||
mutationLimit: 250, | ||
}, | ||
}); | ||
|
||
Sentry.init({ | ||
dsn: 'https://public@dsn.ingest.sentry.io/1337', | ||
sampleRate: 0, | ||
replaysSessionSampleRate: 1.0, | ||
replaysOnErrorSampleRate: 0.0, | ||
debug: true, | ||
|
||
integrations: [window.Replay], | ||
}); |
41 changes: 41 additions & 0 deletions
41
packages/browser-integration-tests/suites/replay/largeMutations/mutationLimit/template.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,41 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<meta charset="utf-8" /> | ||
</head> | ||
<body> | ||
<button id="button-add">Add items</button> | ||
<button id="button-modify">Modify items</button> | ||
<button id="button-remove">Remove items</button> | ||
<ul class="list"></ul> | ||
|
||
<script> | ||
document.querySelector('#button-add').addEventListener('click', () => { | ||
const list = document.querySelector('.list'); | ||
for (let i = 0; i < 1000; i++) { | ||
const li = document.createElement('li'); | ||
li.textContent = `test list item: ${i}`; | ||
li.setAttribute('id', `${i}`); | ||
list.appendChild(li); | ||
} | ||
}); | ||
|
||
document.querySelector('#button-modify').addEventListener('click', () => { | ||
document.querySelectorAll('li').forEach(li => { | ||
el.setAttribute('js-is-checked', new Date().toISOString()); | ||
el.setAttribute('js-is-checked-2', new Date().toISOString()); | ||
el.setAttribute('js-is-checked-3', 'yes'); | ||
el.setAttribute('js-is-checked-4', 'yes'); | ||
el.setAttribute('js-is-checked-5', 'yes'); | ||
el.setAttribute('js-is-checked-6', 'yes'); | ||
}); | ||
}); | ||
|
||
document.querySelector('#button-remove').addEventListener('click', () => { | ||
document.querySelectorAll('li').forEach(li => { | ||
document.querySelector('ul').removeChild(li); | ||
}); | ||
}); | ||
</script> | ||
</body> | ||
</html> |
69 changes: 69 additions & 0 deletions
69
packages/browser-integration-tests/suites/replay/largeMutations/mutationLimit/test.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,69 @@ | ||
import { expect } from '@playwright/test'; | ||
|
||
import { sentryTest } from '../../../../utils/fixtures'; | ||
import { getReplayRecordingContent, shouldSkipReplayTest, waitForReplayRequest } from '../../../../utils/replayHelpers'; | ||
|
||
sentryTest( | ||
'handles large mutations with _experiments.mutationLimit configured', | ||
async ({ getLocalTestPath, page, forceFlushReplay, browserName }) => { | ||
if (shouldSkipReplayTest() || ['webkit', 'firefox'].includes(browserName)) { | ||
sentryTest.skip(); | ||
} | ||
|
||
const reqPromise0 = waitForReplayRequest(page, 0); | ||
const reqPromise0b = waitForReplayRequest(page, 1); | ||
|
||
await page.route('https://dsn.ingest.sentry.io/**/*', route => { | ||
return route.fulfill({ | ||
status: 200, | ||
contentType: 'application/json', | ||
body: JSON.stringify({ id: 'test-id' }), | ||
}); | ||
}); | ||
|
||
const url = await getLocalTestPath({ testDir: __dirname }); | ||
|
||
await page.goto(url); | ||
const res0 = await reqPromise0; | ||
await reqPromise0b; | ||
// A second request is sent right after initial snapshot, we want to wait for that to settle before we continue | ||
|
||
const reqPromise1 = waitForReplayRequest(page); | ||
|
||
void page.click('#button-add'); | ||
await forceFlushReplay(); | ||
const res1 = await reqPromise1; | ||
|
||
const reqPromise2 = waitForReplayRequest(page); | ||
|
||
void page.click('#button-modify'); | ||
await forceFlushReplay(); | ||
const res2 = await reqPromise2; | ||
|
||
const reqPromise3 = waitForReplayRequest(page); | ||
|
||
void page.click('#button-remove'); | ||
await forceFlushReplay(); | ||
const res3 = await reqPromise3; | ||
|
||
const replayData0 = getReplayRecordingContent(res0); | ||
const replayData1 = getReplayRecordingContent(res1); | ||
const replayData2 = getReplayRecordingContent(res2); | ||
const replayData3 = getReplayRecordingContent(res3); | ||
|
||
expect(replayData0.fullSnapshots.length).toBe(1); | ||
expect(replayData0.incrementalSnapshots.length).toBe(0); | ||
|
||
// This includes both a full snapshot as well as some incremental snapshots | ||
expect(replayData1.fullSnapshots.length).toBe(1); | ||
expect(replayData1.incrementalSnapshots.length).toBeGreaterThan(0); | ||
|
||
// This does not trigger mutations, for whatever reason - so no full snapshot either! | ||
expect(replayData2.fullSnapshots.length).toBe(0); | ||
expect(replayData2.incrementalSnapshots.length).toBeGreaterThan(0); | ||
|
||
// This includes both a full snapshot as well as some incremental snapshots | ||
expect(replayData3.fullSnapshots.length).toBe(1); | ||
expect(replayData3.incrementalSnapshots.length).toBeGreaterThan(0); | ||
}, | ||
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters