fix: circular refs shouldn't explode capture

src/__tests__/extensions/replay/sessionrecording.test.ts

@@ -843,6 +843,47 @@ describe('SessionRecording', () => {
             expect(sessionRecording.started).toEqual(false)
         })
 
+        it('can emit when there are circular references', () => {
+            sessionRecording.afterDecideResponse(makeDecideResponse({ sessionRecording: { endpoint: '/s/' } }))
+            sessionRecording.startIfEnabledOrStop()
+
+            const someObject = { emit: 1 }
+            // the same object can be there multiple times
+            const circularObject: Record<string, any> = { emit: someObject, again: someObject }
+            // but a circular reference will be replaced
+            circularObject.circularReference = circularObject
+            _emit(createFullSnapshot(circularObject))
+
+            expect(sessionRecording['buffer']).toEqual({
+                data: [
+                    {
+                        again: {
+                            emit: 1,
+                        },
+                        circularReference: {
+                            again: {
+                                emit: 1,
+                            },
+                            // the circular reference is captured to the buffer,
+                            // but it didn't explode when estimating size
+                            circularReference: expect.any(Object),
+                            emit: {
+                                emit: 1,
+                            },
+                        },
+                        data: {},
+                        emit: {
+                            emit: 1,
+                        },
+                        type: 2,
+                    },
+                ],
+                sessionId: sessionId,
+                size: 149,
+                windowId: 'windowId',
+            })
+        })
+
         describe('console logs', () => {
             it('if not enabled, plugin is not used', () => {
                 posthog.config.enable_recording_console_log = false

src/extensions/replay/sessionrecording.ts

@@ -96,6 +96,7 @@ interface SnapshotBuffer {
     windowId: string
 
     readonly mostRecentSnapshotTimestamp: number | null
+
     add(properties: Properties): void
 }
 
@@ -137,6 +138,30 @@ const newQueuedEvent = (rrwebMethod: () => void): QueuedRRWebEvent => ({
 
 const LOGGER_PREFIX = '[SessionRecording]'
 
+function circularReferenceReplacer() {
+    const ancestors: any[] = []
+    return function (_key: string, value: any) {
+        if (isObject(value)) {
+            // `this` is the object that value is contained in,
+            // i.e., its direct parent.
+            while (ancestors.length > 0 && ancestors.at(-1) !== this) {
+                ancestors.pop()
+            }
+            if (ancestors.includes(value)) {
+                return '[Circular]'
+            }
+            ancestors.push(value)
+            return value
+        } else {
+            return value
+        }
+    }
+}
+
+function estimateSize(event: eventWithTime): number {
+    return JSON.stringify(event, circularReferenceReplacer()).length
+}
+
 export class SessionRecording {
     private _endpoint: string
     private flushBufferTimer?: any
@@ -479,6 +504,7 @@ export class SessionRecording {
             timestamp: timestamp(),
         })
     }
+
     private _startCapture() {
         if (isUndefined(Object.assign)) {
             // According to the rrweb docs, rrweb is not supported on IE11 and below:
@@ -786,7 +812,7 @@ export class SessionRecording {
 
         // TODO: Re-add ensureMaxMessageSize once we are confident in it
         const event = truncateLargeConsoleLogs(throttledEvent)
-        const size = JSON.stringify(event).length
+        const size = estimateSize(event)
 
         this._updateWindowAndSessionIds(event)