fix: Export support logs is not working (#2531)

Exporting logs is currently failing with this error message:
```
Uncaught TypeError TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'LinkedHashMap'
    |     property 'hashCodeMap' -> object with constructor 'InternalHashCodeMap'
    --- property 'host_0' closes the circle
    at getReduxDataString (/Users/ericlin/dev/web-client-ui/packages/log/src/LogExport.ts:125:15)
```

We are handling circular references in `makeSafeToStringify()` before
calling `JSON.stringify()`, but it seems that some of them are not being
handled properly. This was tricky to debug since it was unclear to me
where/how exactly it was failing. I spent some time trying to fix our
custom implementation before settling with a library,
[safe-stable-stringify](https://www.npmjs.com/package/safe-stable-stringify)
(MIT license), that would handle circular structures and BigInt in a
[performant](https://github.com/BridgeAR/safe-stable-stringify?tab=readme-ov-file#performance--benchmarks)
way.

There are a few differences between our previous custom implementation
vs `safe-stable-stringify`:
- Circular references are replaced with “[Circular]”, whereas before we
also showed the path that the reference points to. This is a requested
feature that doesn't seem will be worked on
BridgeAR/safe-stable-stringify#43
- The order of keys are different when compared to previous logs. By
default the library guarantees a deterministic key order instead of
relying on insertion order, but this can be disabled to match the former
behaviour if desired.
- BigInts are converted to a number instead of a string in this library

The blacklist was updated with new entries to reduce the log size and
prevent length errors when exporting:
- For instance, the `client` object, which was already blacklisted, was
also found in a few other paths, which have now been blacklisted as
well.

Tested by:
- Exporting logs on an account with many queries successfully with a
reasonable size (62kb)
- Comparing the result to logs from before this issue and verified that
useful data has not been omitted.

Note:
After more testing, I tried using the new blacklist with our original
custom implementation, and it appears to also work. I narrowed it down
to `draftManager/draftStorage`, which seemed to be causing the circular
structure error.

However, when using the library, there is no error when serializing this
key, albeit producing a 31mb log file, indicating that there is still
something wrong with our implementation. We could solve this specific
issue by blacklisting this key, but switching to a library might be a
better idea to prevent such cases in the future.

Author: ericlln

package-lock.json

@@ -22,7 +22,8 @@
   },
   "dependencies": {
     "event-target-shim": "^6.0.2",
-    "jszip": "^3.10.1"
+    "jszip": "^3.10.1",
+    "safe-stable-stringify": "^2.5.0"
   },
   "files": [
     "dist"

packages/log/package.json

@@ -21,7 +21,7 @@ describe('getReduxDataString', () => {
     const expected = JSON.stringify(
       {
         key1: 'value1',
-        key2: 'Circular ref to root',
+        key2: '[Circular]',
       },
       null,
       2
@@ -30,17 +30,12 @@ describe('getReduxDataString', () => {
   });
 
   it('should handle BigInt values', () => {
-    const reduxData = {
-      key1: BigInt('12345678901234567890'),
-    };
+    const reduxData = { key1: BigInt('12345678901234567890') };
     const result = getReduxDataString(reduxData);
-    const expected = JSON.stringify(
-      {
-        key1: '12345678901234567890',
-      },
-      null,
-      2
-    );
+    // Hardcode expected value since JSON.stringify would throw
+    const expected = `{
+  "key1": 12345678901234567890
+}`;
     expect(result).toBe(expected);
   });
 

packages/log/src/LogExport.test.ts

@@ -1,4 +1,5 @@
 import JSZip from 'jszip';
+import stringify from 'safe-stable-stringify';
 import type LogHistory from './LogHistory';
 
 // List of objects to blacklist
@@ -7,9 +8,14 @@ import type LogHistory from './LogHistory';
 export const DEFAULT_PATH_BLACKLIST: string[][] = [
   ['api'],
   ['client'],
+  ['clientUtils'],
   ['dashboardData', '*', 'connection'],
   ['dashboardData', '*', 'sessionWrapper'],
+  ['dashboardData', '*', 'openedMap'],
+  ['draftManager', 'draftStorage'],
   ['layoutStorage'],
+  ['schemaService', 'client'],
+  ['schemaService', 'schemaStorage'],
   ['storage'],
 ];
 
@@ -55,77 +61,18 @@ function isOnBlackList(currPath: string[], blacklist: string[][]): boolean {
   return false;
 }
 
-/**
- * Returns a new object that is safe to stringify
- * All circular references are replaced by the path to the value creating a circular ref
- * A circular ref will display 'Circular ref to root.someKey' in place of the circular ref
- * All BigInts are replaced with their toString since BigInts error JSON.stringify
- * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify#Exceptions
- *
- * This tries to stringify each key of the object as an easy way to determine if it is safe
- * If it fails to stringify, then the values that failed repeat the same steps recursively
- * The unsafe objects are kept in a map with their path (e.g. root.someKey.someOtherKey)
- * Then if the object is seen again, it must be a circular ref since that object could not be stringified safely
- *
- * @param obj Object to make safe to stringify
- * @param blacklist List of JSON paths to blacklist. A JSON path is a list representing the path to that value (e.g. client.data would be `['client', 'data']`)
- */
-function makeSafeToStringify(
-  obj: Record<string, unknown>,
-  blacklist: string[][],
-  path = 'root',
-  potentiallyCircularValues: Map<Record<string, unknown>, string> = new Map([
-    [obj, 'root'],
-  ])
-): Record<string, unknown> {
-  const output: Record<string, unknown> = {};
-
-  Object.entries(obj).forEach(([key, val]) => {
-    try {
-      JSON.stringify(val, stringifyReplacer(blacklist));
-      output[key] = val;
-    } catch (e) {
-      // The value must be a Circular object or BigInt here
-      const valRecord = val as Record<string, unknown>;
-
-      if (typeof val === 'bigint') {
-        output[key] = val.toString();
-      } else if (potentiallyCircularValues.has(valRecord)) {
-        // We've seen this object before, so it's a circular ref
-        output[key] = `Circular ref to ${potentiallyCircularValues.get(
-          valRecord
-        )}`;
-      } else {
-        // Haven't seen the object before, but somewhere in it there is a circular ref
-        // The ref could point to this object or just to another child
-        const curPath = `${path}.${key}`;
-        potentiallyCircularValues.set(valRecord, curPath);
-        // Convert the path to an array and remove the root
-        const curPathArray = curPath.split('.').slice(1);
-        // If the path is on the blacklist, it will eventually be replaced by undefined, so avoid the recursive call
-        if (!isOnBlackList(curPathArray, blacklist)) {
-          output[key] = makeSafeToStringify(
-            val as Record<string, unknown>,
-            blacklist,
-            curPath,
-            potentiallyCircularValues
-          );
-        }
-      }
-    }
-  });
-
-  return output;
-}
-
 export function getReduxDataString(
   reduxData: Record<string, unknown>,
   blacklist: string[][] = []
 ): string {
-  return JSON.stringify(
-    makeSafeToStringify(reduxData, blacklist),
-    stringifyReplacer(blacklist),
-    2 // Indent w/ 2 spaces
+  return (
+    // Using safe-stable-stringify which handles circular references and BigInt
+    // All circular references are replaced with "[Circular]", and BigInt values are converted to a number
+    stringify(
+      reduxData,
+      stringifyReplacer(blacklist),
+      2 // Indent w/ 2 spaces
+    ) ?? ''
   );
 }