diff --git a/packages/browser-integration-tests/suites/replay/throttleBreadcrumbs/init.js b/packages/browser-integration-tests/suites/replay/throttleBreadcrumbs/init.js
new file mode 100644
index 000000000000..11207b23752d
--- /dev/null
+++ b/packages/browser-integration-tests/suites/replay/throttleBreadcrumbs/init.js
@@ -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],
+});
diff --git a/packages/browser-integration-tests/suites/replay/throttleBreadcrumbs/subject.js b/packages/browser-integration-tests/suites/replay/throttleBreadcrumbs/subject.js
new file mode 100644
index 000000000000..30ba4b350700
--- /dev/null
+++ b/packages/browser-integration-tests/suites/replay/throttleBreadcrumbs/subject.js
@@ -0,0 +1,8 @@
+const COUNT = 400;
+
+document.querySelector('[data-console]').addEventListener('click', () => {
+ // Call console.log() many times
+ for (let i = 0; i < COUNT; i++) {
+ console.log(`testing ${i}`);
+ }
+});
diff --git a/packages/browser-integration-tests/suites/replay/throttleBreadcrumbs/template.html b/packages/browser-integration-tests/suites/replay/throttleBreadcrumbs/template.html
new file mode 100644
index 000000000000..07807a41f8c8
--- /dev/null
+++ b/packages/browser-integration-tests/suites/replay/throttleBreadcrumbs/template.html
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
diff --git a/packages/browser-integration-tests/suites/replay/throttleBreadcrumbs/test.ts b/packages/browser-integration-tests/suites/replay/throttleBreadcrumbs/test.ts
new file mode 100644
index 000000000000..17f4210624a0
--- /dev/null
+++ b/packages/browser-integration-tests/suites/replay/throttleBreadcrumbs/test.ts
@@ -0,0 +1,41 @@
+import { expect } from '@playwright/test';
+
+import { sentryTest } from '../../../utils/fixtures';
+import { getCustomRecordingEvents, shouldSkipReplayTest, waitForReplayRequest } from '../../../utils/replayHelpers';
+
+const THROTTLE_LIMIT = 300;
+
+sentryTest(
+ 'throttles breadcrumbs when many `console.log` are made at the same time',
+ async ({ getLocalTestUrl, page, forceFlushReplay, browserName }) => {
+ if (shouldSkipReplayTest() || browserName !== 'chromium') {
+ sentryTest.skip();
+ }
+
+ const reqPromise0 = waitForReplayRequest(page, 0);
+ const reqPromise1 = 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 getLocalTestUrl({ testDir: __dirname });
+
+ await page.goto(url);
+ await reqPromise0;
+
+ await page.click('[data-console]');
+ await forceFlushReplay();
+
+ const { breadcrumbs } = getCustomRecordingEvents(await reqPromise1);
+
+ // 1 click breadcrumb + 1 throttled breadcrumb is why console logs are less
+ // than throttle limit
+ expect(breadcrumbs.length).toBe(THROTTLE_LIMIT);
+ expect(breadcrumbs.filter(breadcrumb => breadcrumb.category === 'replay.throttled').length).toBe(1);
+ },
+);
diff --git a/packages/browser-integration-tests/utils/replayHelpers.ts b/packages/browser-integration-tests/utils/replayHelpers.ts
index 415dcd667414..ec332edea74d 100644
--- a/packages/browser-integration-tests/utils/replayHelpers.ts
+++ b/packages/browser-integration-tests/utils/replayHelpers.ts
@@ -34,6 +34,25 @@ export type IncrementalRecordingSnapshot = eventWithTime & {
export type RecordingSnapshot = FullRecordingSnapshot | IncrementalRecordingSnapshot;
+/** Returns the replay event from the given request, or undefined if this is not a replay request. */
+export function getReplayEventFromRequest(req: Request): ReplayEvent | undefined {
+ const postData = req.postData();
+ if (!postData) {
+ return undefined;
+ }
+
+ try {
+ const event = envelopeRequestParser(req);
+
+ if (!isReplayEvent(event)) {
+ return undefined;
+ }
+
+ return event;
+ } catch {
+ return undefined;
+ }
+}
/**
* Waits for a replay request to be sent by the page and returns it.
*
@@ -58,18 +77,13 @@ export function waitForReplayRequest(
res => {
const req = res.request();
- const postData = req.postData();
- if (!postData) {
+ const event = getReplayEventFromRequest(req);
+
+ if (!event) {
return false;
}
try {
- const event = envelopeRequestParser(req);
-
- if (!isReplayEvent(event)) {
- return false;
- }
-
if (callback) {
return callback(event, res);
}
diff --git a/packages/replay/.eslintrc.js b/packages/replay/.eslintrc.js
index da006cf432a2..6db928fcb1b9 100644
--- a/packages/replay/.eslintrc.js
+++ b/packages/replay/.eslintrc.js
@@ -8,7 +8,9 @@ module.exports = {
overrides: [
{
files: ['src/**/*.ts'],
- rules: {},
+ rules: {
+ '@sentry-internal/sdk/no-unsupported-es6-methods': 'off',
+ },
},
{
files: ['jest.setup.ts', 'jest.config.ts'],
diff --git a/packages/replay/src/coreHandlers/util/addBreadcrumbEvent.ts b/packages/replay/src/coreHandlers/util/addBreadcrumbEvent.ts
index cbb998d499d4..947fb12f1ae4 100644
--- a/packages/replay/src/coreHandlers/util/addBreadcrumbEvent.ts
+++ b/packages/replay/src/coreHandlers/util/addBreadcrumbEvent.ts
@@ -3,7 +3,6 @@ import type { Breadcrumb } from '@sentry/types';
import { normalize } from '@sentry/utils';
import type { ReplayContainer } from '../../types';
-import { addEvent } from '../../util/addEvent';
/**
* Add a breadcrumb event to replay.
@@ -20,7 +19,7 @@ export function addBreadcrumbEvent(replay: ReplayContainer, breadcrumb: Breadcru
}
replay.addUpdate(() => {
- void addEvent(replay, {
+ void replay.throttledAddEvent({
type: EventType.Custom,
// TODO: We were converting from ms to seconds for breadcrumbs, spans,
// but maybe we should just keep them as milliseconds
diff --git a/packages/replay/src/replay.ts b/packages/replay/src/replay.ts
index 52c772f57c21..53f263b5fa3f 100644
--- a/packages/replay/src/replay.ts
+++ b/packages/replay/src/replay.ts
@@ -24,6 +24,7 @@ import type {
EventBuffer,
InternalEventContext,
PopEventContext,
+ RecordingEvent,
RecordingOptions,
ReplayContainer as ReplayContainerInterface,
ReplayPluginOptions,
@@ -42,6 +43,8 @@ import { getHandleRecordingEmit } from './util/handleRecordingEmit';
import { isExpired } from './util/isExpired';
import { isSessionExpired } from './util/isSessionExpired';
import { sendReplay } from './util/sendReplay';
+import type { SKIPPED } from './util/throttle';
+import { throttle, THROTTLED } from './util/throttle';
/**
* The main replay container class, which holds all the state and methods for recording and sending replays.
@@ -75,6 +78,11 @@ export class ReplayContainer implements ReplayContainerInterface {
maxSessionLife: MAX_SESSION_LIFE,
} as const;
+ private _throttledAddEvent: (
+ event: RecordingEvent,
+ isCheckout?: boolean,
+ ) => typeof THROTTLED | typeof SKIPPED | Promise;
+
/**
* Options to pass to `rrweb.record()`
*/
@@ -136,6 +144,14 @@ export class ReplayContainer implements ReplayContainerInterface {
this._debouncedFlush = debounce(() => this._flush(), this._options.flushMinDelay, {
maxWait: this._options.flushMaxDelay,
});
+
+ this._throttledAddEvent = throttle(
+ (event: RecordingEvent, isCheckout?: boolean) => addEvent(this, event, isCheckout),
+ // Max 300 events...
+ 300,
+ // ... per 5s
+ 5,
+ );
}
/** Get the event context. */
@@ -565,6 +581,39 @@ export class ReplayContainer implements ReplayContainerInterface {
this._context.urls.push(url);
}
+ /**
+ * Add a breadcrumb event, that may be throttled.
+ * If it was throttled, we add a custom breadcrumb to indicate that.
+ */
+ public throttledAddEvent(
+ event: RecordingEvent,
+ isCheckout?: boolean,
+ ): typeof THROTTLED | typeof SKIPPED | Promise {
+ const res = this._throttledAddEvent(event, isCheckout);
+
+ // If this is THROTTLED, it means we have throttled the event for the first time
+ // In this case, we want to add a breadcrumb indicating that something was skipped
+ if (res === THROTTLED) {
+ const breadcrumb = createBreadcrumb({
+ category: 'replay.throttled',
+ });
+
+ this.addUpdate(() => {
+ void addEvent(this, {
+ type: EventType.Custom,
+ timestamp: breadcrumb.timestamp || 0,
+ data: {
+ tag: 'breadcrumb',
+ payload: breadcrumb,
+ metric: true,
+ },
+ });
+ });
+ }
+
+ return res;
+ }
+
/**
* Initialize and start all listeners to varying events (DOM,
* Performance Observer, Recording, Sentry SDK, etc)
@@ -803,7 +852,7 @@ export class ReplayContainer implements ReplayContainerInterface {
*/
private _createCustomBreadcrumb(breadcrumb: Breadcrumb): void {
this.addUpdate(() => {
- void addEvent(this, {
+ void this.throttledAddEvent({
type: EventType.Custom,
timestamp: breadcrumb.timestamp || 0,
data: {
diff --git a/packages/replay/src/types.ts b/packages/replay/src/types.ts
index ebea87d0f363..3d1d8616bb79 100644
--- a/packages/replay/src/types.ts
+++ b/packages/replay/src/types.ts
@@ -8,6 +8,7 @@ import type {
} from '@sentry/types';
import type { eventWithTime, recordOptions } from './types/rrweb';
+import type { SKIPPED, THROTTLED } from './util/throttle';
export type RecordingEvent = eventWithTime;
export type RecordingOptions = recordOptions;
@@ -522,6 +523,10 @@ export interface ReplayContainer {
session: Session | undefined;
recordingMode: ReplayRecordingMode;
timeouts: Timeouts;
+ throttledAddEvent: (
+ event: RecordingEvent,
+ isCheckout?: boolean,
+ ) => typeof THROTTLED | typeof SKIPPED | Promise;
isEnabled(): boolean;
isPaused(): boolean;
getContext(): InternalEventContext;
diff --git a/packages/replay/src/util/createPerformanceSpans.ts b/packages/replay/src/util/createPerformanceSpans.ts
index cd7a20ddf74a..86de4eb9f958 100644
--- a/packages/replay/src/util/createPerformanceSpans.ts
+++ b/packages/replay/src/util/createPerformanceSpans.ts
@@ -1,17 +1,16 @@
import { EventType } from '@sentry-internal/rrweb';
import type { AddEventResult, AllEntryData, ReplayContainer, ReplayPerformanceEntry } from '../types';
-import { addEvent } from './addEvent';
/**
- * Create a "span" for each performance entry. The parent transaction is `this.replayEvent`.
+ * Create a "span" for each performance entry.
*/
export function createPerformanceSpans(
replay: ReplayContainer,
entries: ReplayPerformanceEntry[],
): Promise[] {
- return entries.map(({ type, start, end, name, data }) =>
- addEvent(replay, {
+ return entries.map(({ type, start, end, name, data }) => {
+ const response = replay.throttledAddEvent({
type: EventType.Custom,
timestamp: start,
data: {
@@ -24,6 +23,9 @@ export function createPerformanceSpans(
data,
},
},
- }),
- );
+ });
+
+ // If response is a string, it means its either THROTTLED or SKIPPED
+ return typeof response === 'string' ? Promise.resolve(null) : response;
+ });
}
diff --git a/packages/replay/src/util/throttle.ts b/packages/replay/src/util/throttle.ts
new file mode 100644
index 000000000000..66ce6ed0cdfb
--- /dev/null
+++ b/packages/replay/src/util/throttle.ts
@@ -0,0 +1,55 @@
+export const THROTTLED = '__THROTTLED';
+export const SKIPPED = '__SKIPPED';
+
+/**
+ * Create a throttled function off a given function.
+ * When calling the throttled function, it will call the original function only
+ * if it hasn't been called more than `maxCount` times in the last `durationSeconds`.
+ *
+ * Returns `THROTTLED` if throttled for the first time, after that `SKIPPED`,
+ * or else the return value of the original function.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function throttle any>(
+ fn: T,
+ maxCount: number,
+ durationSeconds: number,
+): (...rest: Parameters) => ReturnType | typeof THROTTLED | typeof SKIPPED {
+ const counter = new Map();
+
+ const _cleanup = (now: number): void => {
+ const threshold = now - durationSeconds;
+ counter.forEach((_value, key) => {
+ if (key < threshold) {
+ counter.delete(key);
+ }
+ });
+ };
+
+ const _getTotalCount = (): number => {
+ return [...counter.values()].reduce((a, b) => a + b, 0);
+ };
+
+ let isThrottled = false;
+
+ return (...rest: Parameters): ReturnType | typeof THROTTLED | typeof SKIPPED => {
+ // Date in second-precision, which we use as basis for the throttling
+ const now = Math.floor(Date.now() / 1000);
+
+ // First, make sure to delete any old entries
+ _cleanup(now);
+
+ // If already over limit, do nothing
+ if (_getTotalCount() >= maxCount) {
+ const wasThrottled = isThrottled;
+ isThrottled = true;
+ return wasThrottled ? SKIPPED : THROTTLED;
+ }
+
+ isThrottled = false;
+ const count = counter.get(now) || 0;
+ counter.set(now, count + 1);
+
+ return fn(...rest);
+ };
+}
diff --git a/packages/replay/test/unit/util/throttle.test.ts b/packages/replay/test/unit/util/throttle.test.ts
new file mode 100644
index 000000000000..4f1c0bc9f6a2
--- /dev/null
+++ b/packages/replay/test/unit/util/throttle.test.ts
@@ -0,0 +1,125 @@
+import { BASE_TIMESTAMP } from '../..';
+import { SKIPPED, throttle, THROTTLED } from '../../../src/util/throttle';
+
+jest.useFakeTimers();
+
+describe('Unit | util | throttle', () => {
+ it('executes when not hitting the limit', () => {
+ const now = BASE_TIMESTAMP;
+ jest.setSystemTime(now);
+
+ const callback = jest.fn();
+ const fn = throttle(callback, 100, 60);
+
+ fn();
+ fn();
+ fn();
+
+ expect(callback).toHaveBeenCalledTimes(3);
+
+ jest.advanceTimersByTime(59_000);
+
+ fn();
+ fn();
+
+ expect(callback).toHaveBeenCalledTimes(5);
+
+ jest.advanceTimersByTime(1_000);
+
+ fn();
+
+ expect(callback).toHaveBeenCalledTimes(6);
+
+ jest.advanceTimersByTime(1_000);
+
+ fn();
+
+ expect(callback).toHaveBeenCalledTimes(7);
+ });
+
+ it('stops executing when hitting the limit', () => {
+ const now = BASE_TIMESTAMP;
+ jest.setSystemTime(now);
+ const callback = jest.fn();
+ const fn = throttle(callback, 5, 60);
+
+ fn();
+ fn();
+ fn();
+
+ expect(callback).toHaveBeenCalledTimes(3);
+
+ jest.advanceTimersByTime(59_000);
+
+ fn();
+ fn();
+
+ expect(callback).toHaveBeenCalledTimes(5);
+
+ jest.advanceTimersByTime(1_000);
+
+ fn();
+ fn();
+ fn();
+ fn();
+
+ expect(callback).toHaveBeenCalledTimes(5);
+
+ // Now, the first three will "expire", so we can add three more
+ jest.advanceTimersByTime(1_000);
+
+ fn();
+ fn();
+ fn();
+ fn();
+
+ expect(callback).toHaveBeenCalledTimes(8);
+ });
+
+ it('has correct return value', () => {
+ const now = BASE_TIMESTAMP;
+ jest.setSystemTime(now);
+
+ const callback = jest.fn(() => 'foo');
+ const fn = throttle(callback, 5, 60);
+
+ expect(fn()).toBe('foo');
+ expect(fn()).toBe('foo');
+ expect(fn()).toBe('foo');
+ expect(fn()).toBe('foo');
+ expect(fn()).toBe('foo');
+ expect(fn()).toBe(THROTTLED);
+ expect(fn()).toBe(SKIPPED);
+ expect(fn()).toBe(SKIPPED);
+
+ // After 61s, should be reset
+ jest.advanceTimersByTime(61_000);
+
+ expect(fn()).toBe('foo');
+ expect(fn()).toBe('foo');
+ expect(fn()).toBe('foo');
+ expect(fn()).toBe('foo');
+ expect(fn()).toBe('foo');
+ expect(fn()).toBe(THROTTLED);
+ expect(fn()).toBe(SKIPPED);
+ expect(fn()).toBe(SKIPPED);
+ });
+
+ it('passes args correctly', () => {
+ const now = BASE_TIMESTAMP;
+ jest.setSystemTime(now);
+
+ const originalFunction = (a: number, b: number) => a + b;
+ const callback = jest.fn(originalFunction);
+ const fn = throttle(callback, 5, 60);
+
+ expect(fn(1, 2)).toBe(3);
+ expect(fn(1, 2)).toBe(3);
+ expect(fn(1, 2)).toBe(3);
+ expect(fn(1, 2)).toBe(3);
+ expect(fn(1, 2)).toBe(3);
+ expect(fn(1, 2)).toBe(THROTTLED);
+ expect(fn(1, 2)).toBe(SKIPPED);
+ expect(fn(1, 2)).toBe(SKIPPED);
+ });
+});