fix(replay): Ensure circular references are handled

Author: mydea

packages/replay/src/eventBuffer/EventBufferArray.ts

@@ -1,3 +1,5 @@
+import { normalize } from '@sentry/utils';
+
 import type { AddEventResult, EventBuffer, RecordingEvent } from '../types';
 
 /**
@@ -41,7 +43,7 @@ export class EventBufferArray implements EventBuffer {
       // attachment.
       const eventsRet = this.events;
       this.events = [];
-      resolve(JSON.stringify(eventsRet));
+      resolve(JSON.stringify(normalize(eventsRet)));
     });
   }
 }

packages/replay/src/eventBuffer/EventBufferCompressionWorker.ts

@@ -1,4 +1,5 @@
 import type { ReplayRecordingData } from '@sentry/types';
+import { normalize } from '@sentry/utils';
 
 import type { AddEventResult, EventBuffer, RecordingEvent } from '../types';
 import { WorkerHandler } from './WorkerHandler';
@@ -61,7 +62,7 @@ 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));
+    return this._worker.postMessage<void>('addEvent', JSON.stringify(normalize(event)));
   }
 
   /**

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

@@ -1,3 +1,4 @@
+import type { RecordingEvent } from '../../../src/types';
 import { createEventBuffer } from './../../../src/eventBuffer';
 import { BASE_TIMESTAMP } from './../../index';
 
@@ -42,4 +43,17 @@ describe('Unit | eventBuffer | EventBufferArray', () => {
     expect(result1).toEqual(JSON.stringify([TEST_EVENT]));
     expect(result2).toEqual(JSON.stringify([]));
   });
+
+  it('handles circular references', async function () {
+    const buffer = createEventBuffer({ useCompression: false });
+
+    const event: RecordingEvent = { data: {}, timestamp: BASE_TIMESTAMP, type: 3 };
+    (event.data as any).child = event;
+
+    buffer.addEvent(event);
+
+    const result = await buffer.finish();
+
+    expect(result).toEqual(`[{"data":{"child":"[Circular ~]"},"timestamp":${BASE_TIMESTAMP},"type":3}]`);
+  });
 });

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

@@ -4,6 +4,7 @@ import pako from 'pako';
 
 import { BASE_TIMESTAMP } from '../..';
 import { EventBufferProxy } from '../../../src/eventBuffer/EventBufferProxy';
+import type { RecordingEvent } from '../../../src/types';
 import { createEventBuffer } from './../../../src/eventBuffer';
 
 const TEST_EVENT = { data: {}, timestamp: BASE_TIMESTAMP, type: 3 };
@@ -145,4 +146,26 @@ describe('Unit | eventBuffer | EventBufferCompressionWorker', () => {
 
     await expect(() => buffer.addEvent({ data: { o: 3 }, timestamp: BASE_TIMESTAMP, type: 3 })).rejects.toBeDefined();
   });
+
+  it('handles circular references', async function () {
+    const buffer = createEventBuffer({
+      useCompression: true,
+    }) as EventBufferProxy;
+
+    expect(buffer).toBeInstanceOf(EventBufferProxy);
+
+    // Ensure worker is ready
+    await buffer.ensureWorkerIsLoaded();
+
+    const event: RecordingEvent = { data: {}, timestamp: BASE_TIMESTAMP, type: 3 };
+    (event.data as any).child = event;
+
+    buffer.addEvent(event);
+
+    const result = await buffer.finish();
+    expect(result).toBeInstanceOf(Uint8Array);
+    const restored = pako.inflate(result as Uint8Array, { to: 'string' });
+
+    expect(restored).toEqual(`[{"data":{"child":"[Circular ~]"},"timestamp":${BASE_TIMESTAMP},"type":3}]`);
+  });
 });