Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(replay): Throttle breadcrumbs to max 300/5s
- Loading branch information
Showing
11 changed files
with
442 additions
and
10 deletions.
There are no files selected for viewing
17 changes: 17 additions & 0 deletions
17
packages/browser-integration-tests/suites/replay/throttleBreadcrumbs/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,17 @@ | ||
import * as Sentry from '@sentry/browser'; | ||
|
||
window.Sentry = Sentry; | ||
window.Replay = new Sentry.Replay({ | ||
flushMinDelay: 5000, | ||
flushMaxDelay: 5000, | ||
useCompression: false, | ||
}); | ||
|
||
Sentry.init({ | ||
dsn: 'https://public@dsn.ingest.sentry.io/1337', | ||
sampleRate: 0, | ||
replaysSessionSampleRate: 1.0, | ||
replaysOnErrorSampleRate: 0.0, | ||
|
||
integrations: [window.Replay], | ||
}); |
35 changes: 35 additions & 0 deletions
35
packages/browser-integration-tests/suites/replay/throttleBreadcrumbs/subject.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,35 @@ | ||
window.loaded = []; | ||
const head = document.querySelector('head'); | ||
|
||
const COUNT = 250; | ||
|
||
window.__isLoaded = (run = 1) => { | ||
return window.loaded.length === COUNT * 2 * run; | ||
}; | ||
|
||
document.querySelector('[data-network]').addEventListener('click', () => { | ||
const offset = window.loaded.length; | ||
|
||
// Create many scripts | ||
for (let i = offset; i < offset + COUNT; i++) { | ||
const script = document.createElement('script'); | ||
script.src = `/virtual-assets/script-${i}.js`; | ||
script.setAttribute('crossorigin', 'anonymous'); | ||
head.appendChild(script); | ||
|
||
script.addEventListener('load', () => { | ||
window.loaded.push(`script-${i}`); | ||
}); | ||
} | ||
}); | ||
|
||
document.querySelector('[data-fetch]').addEventListener('click', () => { | ||
const offset = window.loaded.length; | ||
|
||
// Make many fetch requests | ||
for (let i = offset; i < offset + COUNT; i++) { | ||
fetch(`/virtual-assets/fetch-${i}.json`).then(() => { | ||
window.loaded.push(`fetch-${i}`); | ||
}); | ||
} | ||
}); |
10 changes: 10 additions & 0 deletions
10
packages/browser-integration-tests/suites/replay/throttleBreadcrumbs/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,10 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<meta charset="utf-8" /> | ||
</head> | ||
<body> | ||
<button data-fetch>Trigger fetch requests</button> | ||
<button data-network>Trigger network requests</button> | ||
</body> | ||
</html> |
134 changes: 134 additions & 0 deletions
134
packages/browser-integration-tests/suites/replay/throttleBreadcrumbs/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,134 @@ | ||
import { expect } from '@playwright/test'; | ||
|
||
import { sentryTest } from '../../../utils/fixtures'; | ||
import { getCustomRecordingEvents, shouldSkipReplayTest, waitForReplayRequest } from '../../../utils/replayHelpers'; | ||
|
||
const COUNT = 250; | ||
const THROTTLE_LIMIT = 300; | ||
|
||
sentryTest( | ||
'throttles breadcrumbs when many requests are made at the same time', | ||
async ({ getLocalTestUrl, page, forceFlushReplay, browserName }) => { | ||
if (shouldSkipReplayTest() || browserName !== 'chromium') { | ||
sentryTest.skip(); | ||
} | ||
|
||
const reqPromise0 = waitForReplayRequest(page, 0); | ||
|
||
await page.route('https://dsn.ingest.sentry.io/**/*', route => { | ||
return route.fulfill({ | ||
status: 200, | ||
contentType: 'application/json', | ||
body: JSON.stringify({ id: 'test-id' }), | ||
}); | ||
}); | ||
|
||
let scriptsLoaded = 0; | ||
let fetchLoaded = 0; | ||
|
||
await page.route('**/virtual-assets/script-**', route => { | ||
scriptsLoaded++; | ||
return route.fulfill({ | ||
status: 200, | ||
contentType: 'text/javascript', | ||
body: `const aha = ${'xx'.repeat(20_000)};`, | ||
}); | ||
}); | ||
|
||
await page.route('**/virtual-assets/fetch-**', route => { | ||
fetchLoaded++; | ||
return route.fulfill({ | ||
status: 200, | ||
contentType: 'application/json', | ||
body: JSON.stringify({ fetchResponse: 'aa'.repeat(20_000) }), | ||
}); | ||
}); | ||
|
||
const url = await getLocalTestUrl({ testDir: __dirname }); | ||
|
||
await page.goto(url); | ||
await reqPromise0; | ||
|
||
const reqPromise1 = waitForReplayRequest( | ||
page, | ||
(_event, res) => { | ||
const { performanceSpans } = getCustomRecordingEvents(res); | ||
|
||
return performanceSpans.some(span => span.op === 'resource.script'); | ||
}, | ||
10_000, | ||
); | ||
const reqPromise1Breadcrumbs = waitForReplayRequest( | ||
page, | ||
(_event, res) => { | ||
const { breadcrumbs } = getCustomRecordingEvents(res); | ||
|
||
return breadcrumbs.some(breadcrumb => breadcrumb.category === 'replay.throttled'); | ||
}, | ||
10_000, | ||
); | ||
|
||
await page.click('[data-network]'); | ||
await page.click('[data-fetch]'); | ||
|
||
await page.waitForFunction('window.__isLoaded()'); | ||
await forceFlushReplay(); | ||
|
||
const { performanceSpans } = getCustomRecordingEvents(await reqPromise1); | ||
const { breadcrumbs } = getCustomRecordingEvents(await reqPromise1Breadcrumbs); | ||
|
||
// All assets have been _loaded_ | ||
expect(scriptsLoaded).toBe(COUNT); | ||
expect(fetchLoaded).toBe(COUNT); | ||
|
||
// But only some have been captured by replay | ||
// We check for <= THROTTLE_LIMIT, as there have been some captured before, which take up some of the throttle limit | ||
expect(performanceSpans.length).toBeLessThanOrEqual(THROTTLE_LIMIT); | ||
expect(performanceSpans.length).toBeGreaterThan(THROTTLE_LIMIT - 50); | ||
|
||
expect(breadcrumbs.filter(({ category }) => category === 'replay.throttled').length).toBe(1); | ||
|
||
// Now we wait for 6s (5s + some wiggle room), and make some requests again | ||
await page.waitForTimeout(6_000); | ||
await forceFlushReplay(); | ||
|
||
const reqPromise2 = waitForReplayRequest( | ||
page, | ||
(_event, res) => { | ||
const { performanceSpans } = getCustomRecordingEvents(res); | ||
|
||
return performanceSpans.some(span => span.op === 'resource.script'); | ||
}, | ||
10_000, | ||
); | ||
const reqPromise2Breadcrumbs = waitForReplayRequest( | ||
page, | ||
(_event, res) => { | ||
const { breadcrumbs } = getCustomRecordingEvents(res); | ||
|
||
return breadcrumbs.some(breadcrumb => breadcrumb.category === 'replay.throttled'); | ||
}, | ||
10_000, | ||
); | ||
|
||
await page.click('[data-network]'); | ||
await page.click('[data-fetch]'); | ||
|
||
await page.waitForFunction('window.__isLoaded(2)'); | ||
await forceFlushReplay(); | ||
|
||
const { performanceSpans: performanceSpans2 } = getCustomRecordingEvents(await reqPromise2); | ||
const { breadcrumbs: breadcrumbs2 } = getCustomRecordingEvents(await reqPromise2Breadcrumbs); | ||
|
||
// All assets have been _loaded_ | ||
expect(scriptsLoaded).toBe(COUNT * 2); | ||
expect(fetchLoaded).toBe(COUNT * 2); | ||
|
||
// But only some have been captured by replay | ||
// We check for <= THROTTLE_LIMIT, as there have been some captured before, which take up some of the throttle limit | ||
expect(performanceSpans2.length).toBeLessThanOrEqual(THROTTLE_LIMIT); | ||
expect(performanceSpans2.length).toBeGreaterThan(THROTTLE_LIMIT - 50); | ||
|
||
expect(breadcrumbs2.filter(({ category }) => category === 'replay.throttled').length).toBe(1); | ||
}, | ||
); |
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
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
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
Oops, something went wrong.