fix(replay): Ensure circular references are handled (#7752)

Author: mydea

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

@@ -1,5 +1,6 @@
 import { EventType } from '@sentry-internal/rrweb';
 import type { Breadcrumb } from '@sentry/types';
+import { normalize } from '@sentry/utils';
 
 import type { ReplayContainer } from '../../types';
 import { addEvent } from '../../util/addEvent';
@@ -26,7 +27,7 @@ export function addBreadcrumbEvent(replay: ReplayContainer, breadcrumb: Breadcru
       timestamp: (breadcrumb.timestamp || 0) * 1000,
       data: {
         tag: 'breadcrumb',
-        payload: breadcrumb,
+        payload: normalize(breadcrumb),
       },
     });
 

packages/replay/test/unit/coreHandlers/util/addBreadcrumbEvent.test.ts

@@ -0,0 +1,50 @@
+import { BASE_TIMESTAMP } from '../../..';
+import { addBreadcrumbEvent } from '../../../../src/coreHandlers/util/addBreadcrumbEvent';
+import type { EventBufferArray } from '../../../../src/eventBuffer/EventBufferArray';
+import { setupReplayContainer } from '../../../utils/setupReplayContainer';
+
+jest.useFakeTimers();
+
+describe('Unit | coreHandlers | util | addBreadcrumbEvent', function () {
+  beforeEach(function () {
+    jest.setSystemTime(BASE_TIMESTAMP);
+  });
+
+  it('handles circular references', async () => {
+    const breadcrumb: any = {
+      category: 'console',
+      message: 'Test message',
+      thisIsNull: null,
+      thisIsUndefined: undefined,
+      timestamp: BASE_TIMESTAMP / 1000,
+    };
+    breadcrumb['circular'] = breadcrumb;
+
+    const replay = setupReplayContainer();
+    addBreadcrumbEvent(replay, breadcrumb);
+
+    await undefined;
+    await undefined;
+    await undefined;
+    await undefined;
+    await undefined;
+
+    expect((replay.eventBuffer as EventBufferArray).events).toEqual([
+      {
+        type: 5,
+        timestamp: BASE_TIMESTAMP,
+        data: {
+          tag: 'breadcrumb',
+          payload: {
+            category: 'console',
+            message: 'Test message',
+            thisIsNull: null,
+            thisIsUndefined: '[undefined]',
+            circular: '[Circular ~]',
+            timestamp: BASE_TIMESTAMP / 1000,
+          },
+        },
+      },
+    ]);
+  });
+});