fix(devtools): optimize object sanitization logic (angular#64234)

Previously this would take ~3500ms adev.

This updated logic avoids the constant JSON.stringify implementation and instead checks for serializable values directly.

After this change this code path for adev takes less than 20ms.

(Benchmarks taken on an M1 Macbook Pro)

PR Close angular#64234

Author: AleksanderBodurri

devtools/projects/ng-devtools-backend/src/lib/serialization-utils.spec.ts

@@ -25,7 +25,7 @@ describe('sanitizeObject', () => {
       baz: 42,
       qux: true,
       quux: null,
-      corge: undefined,
+      corge: '[Non-serializable data]',
       grault: [1, 2, 3],
       garply: {a: 'a', b: 'b'},
     });
@@ -43,6 +43,22 @@ describe('sanitizeObject', () => {
     });
   });
 
+  it('should remove nested function', () => {
+    const foo = {
+      bar: 'bar',
+      baz: {
+        qux: () => 'qux',
+      },
+    };
+
+    expect(sanitizeObject(foo)).toEqual({
+      bar: 'bar',
+      baz: {
+        qux: '[Non-serializable data]',
+      },
+    });
+  });
+
   it('should strip cyclic references', () => {
     const bar: any = {foo: null};
     const foo = {
@@ -51,7 +67,9 @@ describe('sanitizeObject', () => {
     bar.foo = foo;
 
     expect(sanitizeObject(foo)).toEqual({
-      bar: '[Non-serializable data]',
+      bar: {
+        foo: '[Circular]',
+      },
     });
   });
 });

devtools/projects/ng-devtools-backend/src/lib/serialization-utils.ts

@@ -7,31 +7,45 @@
  */
 
 export function sanitizeObject(obj: any): any {
-  if (obj === null || typeof obj !== 'object') {
-    return isPortSerializable(obj) ? obj : '[Non-serializable data]';
-  }
+  // Keep track of visited objects to detect circular references.
+  const seen = new WeakSet();
 
-  if (Array.isArray(obj)) {
-    return obj.map(sanitizeObject);
-  }
+  function recurse(value: any): any {
+    // Primitives and null
+    if (value === null || typeof value !== 'object') {
+      // Some primitives are not serializable
+      if (
+        typeof value === 'function' ||
+        typeof value === 'symbol' ||
+        typeof value === 'bigint' ||
+        value === undefined
+      ) {
+        return '[Non-serializable data]';
+      }
 
-  const result: Record<string, any> = {};
-  for (const [key, value] of Object.entries(obj)) {
-    result[key] = isPortSerializable(value) ? value : '[Non-serializable data]';
-  }
-  return result;
-}
+      // Most other primitives are serializable
+      return value;
+    }
 
-// This is specific to chrome.runtime.Port which like JSON.stringify, cannot serialize cyclic objects
-function isPortSerializable(value: any): boolean {
-  if (typeof value === 'function') {
-    return false; // Functions are not serializable but JSON.stringify doesn't throw, it strips them out
-  }
+    // Down here we only have objects
+    // Check for circular references
+    if (seen.has(value)) {
+      return '[Circular]';
+    }
+    seen.add(value);
+
+    // Recursively serialize arrays
+    if (Array.isArray(value)) {
+      return value.map(recurse);
+    }
 
-  try {
-    JSON.stringify(value); // This mimics the runtime's limitations closely
-    return true;
-  } catch {
-    return false;
+    // Recursively serialize objects
+    const result: Record<string, any> = {};
+    for (const [key, propValue] of Object.entries(value)) {
+      result[key] = recurse(propValue);
+    }
+    return result;
   }
+
+  return recurse(obj);
 }