feat(replay): Stop replay when event buffer exceeds max. size (#8315)

When the buffer exceeds ~20MB, stop the replay.

Closes #7657
Closes getsentry/team-replay#94

packages/replay/src/constants.ts

@@ -44,3 +44,6 @@ export const SLOW_CLICK_THRESHOLD = 3_000;
 export const SLOW_CLICK_SCROLL_TIMEOUT = 300;
 /* Clicks in this time period are considered e.g. double/triple clicks. */
 export const MULTI_CLICK_TIMEOUT = 1_000;
+
+/** When encountering a total segment size exceeding this size, stop the replay (as we cannot properly ingest it). */
+export const REPLAY_MAX_EVENT_BUFFER_SIZE = 20_000_000; // ~20MB

packages/replay/src/eventBuffer/EventBufferArray.ts

@@ -1,5 +1,7 @@
+import { REPLAY_MAX_EVENT_BUFFER_SIZE } from '../constants';
 import type { AddEventResult, EventBuffer, EventBufferType, RecordingEvent } from '../types';
 import { timestampToMs } from '../util/timestampToMs';
+import { EventBufferSizeExceededError } from '.';
 
 /**
  * A basic event buffer that does not do any compression.
@@ -8,6 +10,7 @@ import { timestampToMs } from '../util/timestampToMs';
 export class EventBufferArray implements EventBuffer {
  /** All the events that are buffered to be sent. */
  public events: RecordingEvent[];
+ private _totalSize = 0;
 
  public constructor() {
  this.events = [];
@@ -30,6 +33,12 @@ export class EventBufferArray implements EventBuffer {
 
  /** @inheritdoc */
  public async addEvent(event: RecordingEvent): Promise<AddEventResult> {
+ const eventSize = JSON.stringify(event).length;
+ this._totalSize += eventSize;
+ if (this._totalSize > REPLAY_MAX_EVENT_BUFFER_SIZE) {
+ throw new EventBufferSizeExceededError();
+ }
+
  this.events.push(event);
  }
 
@@ -40,14 +49,15 @@ export class EventBufferArray implements EventBuffer {
  // events member so that we do not lose new events while uploading
  // attachment.
  const eventsRet = this.events;
- this.events = [];
+ this.clear();
  resolve(JSON.stringify(eventsRet));
  });
  }
 
  /** @inheritdoc */
  public clear(): void {
  this.events = [];
+ this._totalSize = 0;
  }
 
  /** @inheritdoc */

packages/replay/src/eventBuffer/EventBufferCompressionWorker.ts

@@ -1,7 +1,9 @@
 import type { ReplayRecordingData } from '@sentry/types';
 
+import { REPLAY_MAX_EVENT_BUFFER_SIZE } from '../constants';
 import type { AddEventResult, EventBuffer, EventBufferType, RecordingEvent } from '../types';
 import { timestampToMs } from '../util/timestampToMs';
+import { EventBufferSizeExceededError } from '.';
 import { WorkerHandler } from './WorkerHandler';
 
 /**
@@ -11,6 +13,7 @@ import { WorkerHandler } from './WorkerHandler';
 export class EventBufferCompressionWorker implements EventBuffer {
  private _worker: WorkerHandler;
  private _earliestTimestamp: number | null;
+ private _totalSize = 0;
 
  public constructor(worker: Worker) {
  this._worker = new WorkerHandler(worker);
@@ -53,7 +56,14 @@ export class EventBufferCompressionWorker implements EventBuffer {
  this._earliestTimestamp = timestamp;
  }
 
- return this._sendEventToWorker(event);
+ const data = JSON.stringify(event);
+ this._totalSize += data.length;
+
+ if (this._totalSize > REPLAY_MAX_EVENT_BUFFER_SIZE) {
+ return Promise.reject(new EventBufferSizeExceededError());
+ }
+
+ return this._sendEventToWorker(data);
  }
 
  /**
@@ -66,6 +76,7 @@ export class EventBufferCompressionWorker implements EventBuffer {
  /** @inheritdoc */
  public clear(): void {
  this._earliestTimestamp = null;
+ this._totalSize = 0;
  // We do not wait on this, as we assume the order of messages is consistent for the worker
  void this._worker.postMessage('clear');
  }
@@ -78,8 +89,8 @@ export class EventBufferCompressionWorker implements EventBuffer {
  /**
  * Send the event to the worker.
  */
- private _sendEventToWorker(event: RecordingEvent): Promise<AddEventResult> {
- return this._worker.postMessage<void>('addEvent', JSON.stringify(event));
+ private _sendEventToWorker(data: string): Promise<AddEventResult> {
+ return this._worker.postMessage<void>('addEvent', data);
  }
 
  /**
@@ -89,6 +100,7 @@ export class EventBufferCompressionWorker implements EventBuffer {
  const response = await this._worker.postMessage<Uint8Array>('finish');
 
  this._earliestTimestamp = null;
+ this._totalSize = 0;
 
  return response;
  }

packages/replay/src/eventBuffer/index.ts

@@ -1,6 +1,7 @@
 import { getWorkerURL } from '@sentry-internal/replay-worker';
 import { logger } from '@sentry/utils';
 
+import { REPLAY_MAX_EVENT_BUFFER_SIZE } from '../constants';
 import type { EventBuffer } from '../types';
 import { EventBufferArray } from './EventBufferArray';
 import { EventBufferProxy } from './EventBufferProxy';
@@ -30,3 +31,10 @@ export function createEventBuffer({ useCompression }: CreateEventBufferParams):
  __DEBUG_BUILD__ && logger.log('[Replay] Using simple buffer');
  return new EventBufferArray();
 }
+
+/** This error indicates that the event buffer size exceeded the limit.. */
+export class EventBufferSizeExceededError extends Error {
+ public constructor() {
+ super(`Event buffer exceeded maximum size of ${REPLAY_MAX_EVENT_BUFFER_SIZE}.`);
+ }
+}

packages/replay/src/util/addEvent.ts

@@ -2,6 +2,7 @@ import { EventType } from '@sentry-internal/rrweb';
 import { getCurrentHub } from '@sentry/core';
 import { logger } from '@sentry/utils';
 
+import { EventBufferSizeExceededError } from '../eventBuffer';
 import type { AddEventResult, RecordingEvent, ReplayContainer, ReplayFrameEvent } from '../types';
 import { timestampToMs } from './timestampToMs';
 
@@ -56,8 +57,10 @@ export async function addEvent(
 
  return await replay.eventBuffer.addEvent(eventAfterPossibleCallback);
  } catch (error) {
+ const reason = error && error instanceof EventBufferSizeExceededError ? 'addEventSizeExceeded' : 'addEvent';
+
  __DEBUG_BUILD__ && logger.error(error);
- await replay.stop('addEvent');
+ await replay.stop(reason);
 
  const client = getCurrentHub().getClient();
 

packages/replay/test/unit/eventBuffer/EventBufferArray.test.ts

@@ -1,4 +1,5 @@
-import { createEventBuffer } from './../../../src/eventBuffer';
+import { REPLAY_MAX_EVENT_BUFFER_SIZE } from '../../../src/constants';
+import { createEventBuffer, EventBufferSizeExceededError } from './../../../src/eventBuffer';
 import { BASE_TIMESTAMP } from './../../index';
 
 const TEST_EVENT = { data: {}, timestamp: BASE_TIMESTAMP, type: 3 };
@@ -44,4 +45,56 @@ describe('Unit | eventBuffer | EventBufferArray', () => {
  expect(result1).toEqual(JSON.stringify([TEST_EVENT]));
  expect(result2).toEqual(JSON.stringify([]));
  });
+
+ describe('size limit', () => {
+ it('rejects if size exceeds limit', async function () {
+ const buffer = createEventBuffer({ useCompression: false });
+
+ const largeEvent = {
+ data: { a: 'a'.repeat(REPLAY_MAX_EVENT_BUFFER_SIZE / 3) },
+ timestamp: BASE_TIMESTAMP,
+ type: 3,
+ };
+
+ await buffer.addEvent(largeEvent);
+ await buffer.addEvent(largeEvent);
+
+ // Now it should error
+ await expect(() => buffer.addEvent(largeEvent)).rejects.toThrowError(EventBufferSizeExceededError);
+ });
+
+ it('resets size limit on clear', async function () {
+ const buffer = createEventBuffer({ useCompression: false });
+
+ const largeEvent = {
+ data: { a: 'a'.repeat(REPLAY_MAX_EVENT_BUFFER_SIZE / 3) },
+ timestamp: BASE_TIMESTAMP,
+ type: 3,
+ };
+
+ await buffer.addEvent(largeEvent);
+ await buffer.addEvent(largeEvent);
+
+ await buffer.clear();
+
+ await buffer.addEvent(largeEvent);
+ });
+
+ it('resets size limit on finish', async function () {
+ const buffer = createEventBuffer({ useCompression: false });
+
+ const largeEvent = {
+ data: { a: 'a'.repeat(REPLAY_MAX_EVENT_BUFFER_SIZE / 3) },
+ timestamp: BASE_TIMESTAMP,
+ type: 3,
+ };
+
+ await buffer.addEvent(largeEvent);
+ await buffer.addEvent(largeEvent);
+
+ await buffer.finish();
+
+ await buffer.addEvent(largeEvent);
+ });
+ });
 });

packages/replay/test/unit/eventBuffer/EventBufferCompressionWorker.test.ts

@@ -3,8 +3,9 @@ import 'jsdom-worker';
 import pako from 'pako';
 
 import { BASE_TIMESTAMP } from '../..';
+import { REPLAY_MAX_EVENT_BUFFER_SIZE } from '../../../src/constants';
 import { EventBufferProxy } from '../../../src/eventBuffer/EventBufferProxy';
-import { createEventBuffer } from './../../../src/eventBuffer';
+import { createEventBuffer, EventBufferSizeExceededError } from './../../../src/eventBuffer';
 
 const TEST_EVENT = { data: {}, timestamp: BASE_TIMESTAMP, type: 3 };
 
@@ -146,4 +147,71 @@ describe('Unit | eventBuffer | EventBufferCompressionWorker', () => {
 
  await expect(() => buffer.addEvent({ data: { o: 3 }, timestamp: BASE_TIMESTAMP, type: 3 })).rejects.toBeDefined();
  });
+
+ describe('size limit', () => {
+ it('rejects if size exceeds limit', async function () {
+ const buffer = createEventBuffer({
+ useCompression: true,
+ }) as EventBufferProxy;
+
+ expect(buffer).toBeInstanceOf(EventBufferProxy);
+ await buffer.ensureWorkerIsLoaded();
+
+ const largeEvent = {
+ data: { a: 'a'.repeat(REPLAY_MAX_EVENT_BUFFER_SIZE / 3) },
+ timestamp: BASE_TIMESTAMP,
+ type: 3,
+ };
+
+ await buffer.addEvent(largeEvent);
+ await buffer.addEvent(largeEvent);
+
+ // Now it should error
+ await expect(() => buffer.addEvent(largeEvent)).rejects.toThrowError(EventBufferSizeExceededError);
+ });
+
+ it('resets size limit on clear', async function () {
+ const buffer = createEventBuffer({
+ useCompression: true,
+ }) as EventBufferProxy;
+
+ expect(buffer).toBeInstanceOf(EventBufferProxy);
+ await buffer.ensureWorkerIsLoaded();
+
+ const largeEvent = {
+ data: { a: 'a'.repeat(REPLAY_MAX_EVENT_BUFFER_SIZE / 3) },
+ timestamp: BASE_TIMESTAMP,
+ type: 3,
+ };
+
+ await buffer.addEvent(largeEvent);
+ await buffer.addEvent(largeEvent);
+
+ await buffer.clear();
+
+ await buffer.addEvent(largeEvent);
+ });
+
+ it('resets size limit on finish', async function () {
+ const buffer = createEventBuffer({
+ useCompression: true,
+ }) as EventBufferProxy;
+
+ expect(buffer).toBeInstanceOf(EventBufferProxy);
+ await buffer.ensureWorkerIsLoaded();
+
+ const largeEvent = {
+ data: { a: 'a'.repeat(REPLAY_MAX_EVENT_BUFFER_SIZE / 3) },
+ timestamp: BASE_TIMESTAMP,
+ type: 3,
+ };
+
+ await buffer.addEvent(largeEvent);
+ await buffer.addEvent(largeEvent);
+
+ await buffer.finish();
+
+ await buffer.addEvent(largeEvent);
+ });
+ });
 });

packages/replay/test/unit/util/addEvent.test.ts

@@ -1,6 +1,7 @@
 import 'jsdom-worker';
 
 import { BASE_TIMESTAMP } from '../..';
+import { REPLAY_MAX_EVENT_BUFFER_SIZE } from '../../../src/constants';
 import type { EventBufferProxy } from '../../../src/eventBuffer/EventBufferProxy';
 import { addEvent } from '../../../src/util/addEvent';
 import { setupReplayContainer } from '../../utils/setupReplayContainer';
@@ -29,4 +30,31 @@ describe('Unit | util | addEvent', () => {
 
  expect(replay.isEnabled()).toEqual(false);
  });
+
+ it('stops when exceeding buffer size limit', async function () {
+ jest.setSystemTime(BASE_TIMESTAMP);
+
+ const replay = setupReplayContainer({
+ options: {
+ useCompression: true,
+ },
+ });
+
+ const largeEvent = {
+ data: { a: 'a'.repeat(REPLAY_MAX_EVENT_BUFFER_SIZE / 3) },
+ timestamp: BASE_TIMESTAMP,
+ type: 3,
+ };
+
+ await (replay.eventBuffer as EventBufferProxy).ensureWorkerIsLoaded();
+
+ await addEvent(replay, largeEvent);
+ await addEvent(replay, largeEvent);
+
+ expect(replay.isEnabled()).toEqual(true);
+
+ await addEvent(replay, largeEvent);
+
+ expect(replay.isEnabled()).toEqual(false);
+ });
 });