Skip to content

Commit 333825c

Browse files
mydeamydea
committed
feat(replay): Throttle breadcrumbs to max 300/5s
1 parent fd7a092 commit 333825c

File tree

11 files changed

+423
-10
lines changed

11 files changed

+423
-10
lines changed

‎packages/browser-integration-tests/suites/replay/throttleBreadcrumbs/init.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import * as Sentry from '@sentry/browser';
2+
3+
window.Sentry = Sentry;
4+
window.Replay = new Sentry.Replay({
5+
flushMinDelay: 5000,
6+
flushMaxDelay: 5000,
7+
useCompression: false,
8+
});
9+
10+
Sentry.init({
11+
dsn: 'https://[email protected]/1337',
12+
sampleRate: 0,
13+
replaysSessionSampleRate: 1.0,
14+
replaysOnErrorSampleRate: 0.0,
15+
16+
integrations: [window.Replay],
17+
});

‎packages/browser-integration-tests/suites/replay/throttleBreadcrumbs/subject.js

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
window.loaded = [];
2+
const head = document.querySelector('head');
3+
4+
const COUNT = 250;
5+
6+
window.__isLoaded = () => {
7+
return window.loaded.length === COUNT * 2;
8+
};
9+
10+
document.querySelector('[data-network]').addEventListener('click', () => {
11+
const offset = window.loaded.length;
12+
13+
// Create many scripts
14+
for (let i = offset; i < offset + COUNT; i++) {
15+
const script = document.createElement('script');
16+
script.src = `/virtual-assets/script-${i}.js`;
17+
script.setAttribute('crossorigin', 'anonymous');
18+
head.appendChild(script);
19+
20+
script.addEventListener('load', () => {
21+
window.loaded.push(`script-${i}`);
22+
});
23+
}
24+
});
25+
26+
document.querySelector('[data-fetch]').addEventListener('click', () => {
27+
const offset = window.loaded.length;
28+
29+
// Make many fetch requests
30+
for (let i = offset; i < offset + COUNT; i++) {
31+
fetch(`/virtual-assets/fetch-${i}.json`).then(() => {
32+
window.loaded.push(`fetch-${i}`);
33+
});
34+
}
35+
});

‎packages/browser-integration-tests/suites/replay/throttleBreadcrumbs/template.html

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
</head>
6+
<body>
7+
<button data-fetch>Trigger fetch requests</button>
8+
<button data-network>Trigger network requests</button>
9+
</body>
10+
</html>

‎packages/browser-integration-tests/suites/replay/throttleBreadcrumbs/test.ts

+115
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
import { expect } from '@playwright/test';
2+
3+
import { sentryTest } from '../../../utils/fixtures';
4+
import { getCustomRecordingEvents, shouldSkipReplayTest, waitForReplayRequest } from '../../../utils/replayHelpers';
5+
6+
const COUNT = 250;
7+
const THROTTLE_LIMIT = 300;
8+
9+
sentryTest(
10+
'throttles breadcrumbs when many requests are made at the same time',
11+
async ({ getLocalTestUrl, page, forceFlushReplay }) => {
12+
if (shouldSkipReplayTest()) {
13+
sentryTest.skip();
14+
}
15+
16+
const reqPromise0 = waitForReplayRequest(page, 0);
17+
18+
await page.route('https://dsn.ingest.sentry.io/**/*', route => {
19+
return route.fulfill({
20+
status: 200,
21+
contentType: 'application/json',
22+
body: JSON.stringify({ id: 'test-id' }),
23+
});
24+
});
25+
26+
let scriptsLoaded = 0;
27+
let fetchLoaded = 0;
28+
29+
await page.route('**/virtual-assets/script-**', route => {
30+
scriptsLoaded++;
31+
return route.fulfill({
32+
status: 200,
33+
contentType: 'text/javascript',
34+
body: `const aha = ${'xx'.repeat(20_000)};`,
35+
});
36+
});
37+
38+
await page.route('**/virtual-assets/fetch-**', route => {
39+
fetchLoaded++;
40+
return route.fulfill({
41+
status: 200,
42+
contentType: 'application/json',
43+
body: JSON.stringify({ fetchResponse: 'aa'.repeat(20_000) }),
44+
});
45+
});
46+
47+
const url = await getLocalTestUrl({ testDir: __dirname });
48+
49+
await page.goto(url);
50+
await reqPromise0;
51+
52+
const reqPromise1 = waitForReplayRequest(
53+
page,
54+
(_event, res) => {
55+
const { performanceSpans } = getCustomRecordingEvents(res);
56+
57+
return performanceSpans.some(span => span.op === 'resource.script');
58+
},
59+
5_000,
60+
);
61+
62+
await page.click('[data-network]');
63+
await page.click('[data-fetch]');
64+
65+
await page.waitForFunction('window.__isLoaded()');
66+
await forceFlushReplay();
67+
68+
const { performanceSpans, breadcrumbs } = getCustomRecordingEvents(await reqPromise1);
69+
70+
// All assets have been _loaded_
71+
expect(scriptsLoaded).toBe(COUNT);
72+
expect(fetchLoaded).toBe(COUNT);
73+
74+
// But only some have been captured by replay
75+
// We check for <= THROTTLE_LIMIT, as there have been some captured before, which take up some of the throttle limit
76+
expect(performanceSpans.length).toBeLessThanOrEqual(THROTTLE_LIMIT);
77+
expect(performanceSpans.length).toBeGreaterThan(THROTTLE_LIMIT - 10);
78+
79+
expect(breadcrumbs.filter(({ category }) => category === 'replay.throttled').length).toBe(1);
80+
81+
// Now we wait for 6s (5s + some wiggle room), and make some requests again
82+
await page.waitForTimeout(6_000);
83+
await forceFlushReplay();
84+
85+
const reqPromise2 = waitForReplayRequest(
86+
page,
87+
(_event, res) => {
88+
const { performanceSpans } = getCustomRecordingEvents(res);
89+
90+
return performanceSpans.some(span => span.op === 'resource.script');
91+
},
92+
5_000,
93+
);
94+
95+
await page.click('[data-network]');
96+
await page.click('[data-fetch]');
97+
98+
await forceFlushReplay();
99+
100+
const { performanceSpans: performanceSpans2, breadcrumbs: breadcrumbs2 } = getCustomRecordingEvents(
101+
await reqPromise2,
102+
);
103+
104+
// All assets have been _loaded_
105+
expect(scriptsLoaded).toBe(COUNT * 2);
106+
expect(fetchLoaded).toBe(COUNT * 2);
107+
108+
// But only some have been captured by replay
109+
// We check for <= THROTTLE_LIMIT, as there have been some captured before, which take up some of the throttle limit
110+
expect(performanceSpans2.length).toBeLessThanOrEqual(THROTTLE_LIMIT);
111+
expect(performanceSpans2.length).toBeGreaterThan(THROTTLE_LIMIT - 10);
112+
113+
expect(breadcrumbs2.filter(({ category }) => category === 'replay.throttled').length).toBe(1);
114+
},
115+
);

‎packages/replay/.eslintrc.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,9 @@ module.exports = {
88
overrides: [
99
{
1010
files: ['src/**/*.ts'],
11-
rules: {},
11+
rules: {
12+
'@sentry-internal/sdk/no-unsupported-es6-methods': 'off',
13+
},
1214
},
1315
{
1416
files: ['jest.setup.ts', 'jest.config.ts'],

‎packages/replay/src/coreHandlers/util/addBreadcrumbEvent.ts

+1-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import type { Breadcrumb } from '@sentry/types';
33
import { normalize } from '@sentry/utils';
44

55
import type { ReplayContainer } from '../../types';
6-
import { addEvent } from '../../util/addEvent';
76

87
/**
98
* Add a breadcrumb event to replay.
@@ -20,7 +19,7 @@ export function addBreadcrumbEvent(replay: ReplayContainer, breadcrumb: Breadcru
2019
}
2120

2221
replay.addUpdate(() => {
23-
void addEvent(replay, {
22+
void replay.throttledAddEvent({
2423
type: EventType.Custom,
2524
// TODO: We were converting from ms to seconds for breadcrumbs, spans,
2625
// but maybe we should just keep them as milliseconds

‎packages/replay/src/replay.ts

+49-1
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import type {
2323
EventBuffer,
2424
InternalEventContext,
2525
PopEventContext,
26+
RecordingEvent,
2627
RecordingOptions,
2728
ReplayContainer as ReplayContainerInterface,
2829
ReplayPluginOptions,
@@ -41,6 +42,8 @@ import { getHandleRecordingEmit } from './util/handleRecordingEmit';
4142
import { isExpired } from './util/isExpired';
4243
import { isSessionExpired } from './util/isSessionExpired';
4344
import { sendReplay } from './util/sendReplay';
45+
import type { SKIPPED } from './util/throttle';
46+
import { throttle, THROTTLED } from './util/throttle';
4447

4548
/**
4649
* The main replay container class, which holds all the state and methods for recording and sending replays.
@@ -74,6 +77,11 @@ export class ReplayContainer implements ReplayContainerInterface {
7477
maxSessionLife: MAX_SESSION_LIFE,
7578
} as const;
7679

80+
private _throttledAddEvent: (
81+
event: RecordingEvent,
82+
isCheckout?: boolean,
83+
) => typeof THROTTLED | typeof SKIPPED | Promise<AddEventResult | null>;
84+
7785
/**
7886
* Options to pass to `rrweb.record()`
7987
*/
@@ -135,6 +143,14 @@ export class ReplayContainer implements ReplayContainerInterface {
135143
this._debouncedFlush = debounce(() => this._flush(), this._options.flushMinDelay, {
136144
maxWait: this._options.flushMaxDelay,
137145
});
146+
147+
this._throttledAddEvent = throttle(
148+
(event: RecordingEvent, isCheckout?: boolean) => addEvent(this, event, isCheckout),
149+
// Max 300 events...
150+
300,
151+
// ... per 5s
152+
5,
153+
);
138154
}
139155

140156
/** Get the event context. */
@@ -545,6 +561,38 @@ export class ReplayContainer implements ReplayContainerInterface {
545561
this._context.urls.push(url);
546562
}
547563

564+
/**
565+
* Add a breadcrumb event, that may be throttled.
566+
* If it was throttled, we add a custom breadcrumb to indicate that.
567+
*/
568+
public throttledAddEvent(
569+
event: RecordingEvent,
570+
isCheckout?: boolean,
571+
): typeof THROTTLED | typeof SKIPPED | Promise<AddEventResult | null> {
572+
const res = this._throttledAddEvent(event, isCheckout);
573+
574+
// If this is THROTTLED, it means we have throttled the event for the first time
575+
// In this case, we want to add a breadcrumb indicating that something was skipped
576+
if (res === THROTTLED) {
577+
const breadcrumb = createBreadcrumb({
578+
category: 'replay.throttled',
579+
});
580+
581+
this.addUpdate(() => {
582+
void addEvent(this, {
583+
type: EventType.Custom,
584+
timestamp: breadcrumb.timestamp || 0,
585+
data: {
586+
tag: 'breadcrumb',
587+
payload: breadcrumb,
588+
},
589+
});
590+
});
591+
}
592+
593+
return res;
594+
}
595+
548596
/**
549597
* Initialize and start all listeners to varying events (DOM,
550598
* Performance Observer, Recording, Sentry SDK, etc)
@@ -783,7 +831,7 @@ export class ReplayContainer implements ReplayContainerInterface {
783831
*/
784832
private _createCustomBreadcrumb(breadcrumb: Breadcrumb): void {
785833
this.addUpdate(() => {
786-
void addEvent(this, {
834+
void this.throttledAddEvent({
787835
type: EventType.Custom,
788836
timestamp: breadcrumb.timestamp || 0,
789837
data: {

‎packages/replay/src/types.ts

+5
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import type {
88
} from '@sentry/types';
99

1010
import type { eventWithTime, recordOptions } from './types/rrweb';
11+
import type { SKIPPED, THROTTLED } from './util/throttle';
1112

1213
export type RecordingEvent = eventWithTime;
1314
export type RecordingOptions = recordOptions;
@@ -498,6 +499,10 @@ export interface ReplayContainer {
498499
session: Session | undefined;
499500
recordingMode: ReplayRecordingMode;
500501
timeouts: Timeouts;
502+
throttledAddEvent: (
503+
event: RecordingEvent,
504+
isCheckout?: boolean,
505+
) => typeof THROTTLED | typeof SKIPPED | Promise<AddEventResult | null>;
501506
isEnabled(): boolean;
502507
isPaused(): boolean;
503508
getContext(): InternalEventContext;

‎packages/replay/src/util/createPerformanceSpans.ts

+8-6
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,16 @@
11
import { EventType } from '@sentry-internal/rrweb';
22

33
import type { AddEventResult, AllEntryData, ReplayContainer, ReplayPerformanceEntry } from '../types';
4-
import { addEvent } from './addEvent';
54

65
/**
7-
* Create a "span" for each performance entry. The parent transaction is `this.replayEvent`.
6+
* Create a "span" for each performance entry.
87
*/
98
export function createPerformanceSpans(
109
replay: ReplayContainer,
1110
entries: ReplayPerformanceEntry<AllEntryData>[],
1211
): Promise<AddEventResult | null>[] {
13-
return entries.map(({ type, start, end, name, data }) =>
14-
addEvent(replay, {
12+
return entries.map(({ type, start, end, name, data }) => {
13+
const response = replay.throttledAddEvent({
1514
type: EventType.Custom,
1615
timestamp: start,
1716
data: {
@@ -24,6 +23,9 @@ export function createPerformanceSpans(
2423
data,
2524
},
2625
},
27-
}),
28-
);
26+
});
27+
28+
// If response is a string, it means its either THROTTLED or SKIPPED
29+
return typeof response === 'string' ? Promise.resolve(null) : response;
30+
});
2931
}

0 commit comments

Comments
 (0)