improvement(storeUserSession) guard object stringifier against circul…

…ar references (#715)

CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Next
 
+- Improvement (`@grafana/faro-web-sdk`): Guards user session stringifier against circular object
+  references (#715)
+
 ## 1.11.0
 
 - Improvement (`@grafana/faro-web-sdk`): The console instrumentation now sends an `Error` signal

packages/web-sdk/src/instrumentations/session/sessionManager/PersistentSessionsManager.test.ts

@@ -217,4 +217,21 @@ describe('Persistent Sessions Manager.', () => {
     const newSession: FaroUserSession = JSON.parse(mockStorage[STORAGE_KEY]!);
     expect(newSession.sessionId).toBe(manualSetSessionId);
   });
+
+  it('Stores in the locals storage even if it contains objects with circular references.', () => {
+    const circularObject = { a: 'b' };
+    (circularObject as any).circular = circularObject;
+
+    const storedSession = {
+      sessionId: mockInitialSessionId,
+      isSampled: true,
+      circularObject,
+      lastActivity: fakeSystemTime,
+      started: fakeSystemTime,
+    };
+
+    expect(() => {
+      PersistentSessionsManager.storeUserSession(storedSession);
+    }).not.toThrow();
+  });
 });

packages/web-sdk/src/instrumentations/session/sessionManager/PersistentSessionsManager.ts

@@ -2,6 +2,7 @@ import { faro } from '@grafana/faro-core';
 import type { Meta } from '@grafana/faro-core';
 
 import { throttle } from '../../../utils';
+import { getCircularDependencyReplacer } from '../../../utils/json';
 import { getItem, removeItem, setItem, webStorageType } from '../../../utils/webStorage';
 
 import { isSampled } from './sampling';
@@ -27,7 +28,11 @@ export class PersistentSessionsManager {
   }
 
   static storeUserSession(session: FaroUserSession): void {
-    setItem(STORAGE_KEY, JSON.stringify(session), PersistentSessionsManager.storageTypeLocal);
+    setItem(
+      STORAGE_KEY,
+      JSON.stringify(session, getCircularDependencyReplacer()),
+      PersistentSessionsManager.storageTypeLocal
+    );
   }
 
   static fetchUserSession(): FaroUserSession | null {

packages/web-sdk/src/instrumentations/session/sessionManager/VolatileSessionManager.ts

@@ -2,6 +2,7 @@ import { faro } from '@grafana/faro-core';
 import type { Meta } from '@grafana/faro-core';
 
 import { throttle } from '../../../utils';
+import { getCircularDependencyReplacer } from '../../../utils/json';
 import { getItem, removeItem, setItem, webStorageType } from '../../../utils/webStorage';
 
 import { isSampled } from './sampling';
@@ -27,7 +28,11 @@ export class VolatileSessionsManager {
   }
 
   static storeUserSession(session: FaroUserSession): void {
-    setItem(STORAGE_KEY, JSON.stringify(session), VolatileSessionsManager.storageTypeSession);
+    setItem(
+      STORAGE_KEY,
+      JSON.stringify(session, getCircularDependencyReplacer()),
+      VolatileSessionsManager.storageTypeSession
+    );
   }
 
   static fetchUserSession(): FaroUserSession | null {

packages/web-sdk/src/instrumentations/session/sessionManager/VolatileSessionsManager.test.ts

@@ -183,7 +183,7 @@ describe('Volatile Sessions Manager.', () => {
     expect(mockOnNewSessionCreated).toHaveBeenCalledWith(oldStoredMeta, matchNewSessionMeta);
   });
 
-  it('Creates a new Faro user session if setSession(§) is called outside the Faro session manager.', () => {
+  it('Creates a new Faro user session if setSession() is called outside the Faro session manager.', () => {
     const mockIsSampled = jest.fn();
     jest.spyOn(samplingModule, 'isSampled').mockImplementation(mockIsSampled);
 
@@ -206,4 +206,21 @@ describe('Volatile Sessions Manager.', () => {
     const newSession: FaroUserSession = JSON.parse(mockStorage[STORAGE_KEY]!);
     expect(newSession.sessionId).toBe(manualSetSessionId);
   });
+
+  it('Stores in the locals storage even if it contains objects with circular references.', () => {
+    const circularObject = { a: 'b' };
+    (circularObject as any).circular = circularObject;
+
+    const storedSession = {
+      sessionId: mockInitialSessionId,
+      isSampled: true,
+      circularObject,
+      lastActivity: fakeSystemTime,
+      started: fakeSystemTime,
+    };
+
+    expect(() => {
+      VolatileSessionsManager.storeUserSession(storedSession);
+    }).not.toThrow();
+  });
 });

packages/web-sdk/src/utils/json.test.ts

@@ -0,0 +1,12 @@
+import { getCircularDependencyReplacer } from './json';
+
+describe('json', () => {
+  it('replace circular references with null value', () => {
+    const replacer = getCircularDependencyReplacer();
+
+    const obj = { a: 1 };
+    (obj as any).circular = obj;
+
+    expect(JSON.stringify(obj, replacer)).toBe('{"a":1,"circular":null}');
+  });
+});

packages/web-sdk/src/utils/json.ts

@@ -0,0 +1,12 @@
+export function getCircularDependencyReplacer() {
+  const valueSeen = new WeakSet();
+  return function (_key: string | Symbol, value: unknown) {
+    if (typeof value === 'object' && value !== null) {
+      if (valueSeen.has(value)) {
+        return null;
+      }
+      valueSeen.add(value);
+    }
+    return value;
+  };
+}