fix(console): JSON.stringify cannot serialize cyclical structures and event pooling issue

Author: purrseus

src/interceptors/ConsoleInterceptor.ts

@@ -20,69 +20,88 @@ export default class ConsoleInterceptor extends Interceptor<ConsoleHandlers> {
     callback: null,
   };
 
+  private isSyntheticEvent(event: any): boolean {
+    return (
+      event !== null &&
+      typeof event === 'object' &&
+      'nativeEvent' in event &&
+      'currentTarget' in event &&
+      'target' in event &&
+      typeof event.preventDefault === 'function'
+    );
+  }
+
+  private snapshotSyntheticEvent(event: any): Record<string, unknown> {
+    try {
+      return JSON.parse(JSON.stringify(event));
+    } catch {
+      return {
+        '[SyntheticEvent]':
+          'Could not snapshot event. Seem like this event has circular references. You can extract specific properties from the event object to see the details (e.g., event.target.value)',
+      };
+    }
+  }
+
+  private callback(type: string, args: any[]) {
+    const snapshotArgs = args.map(arg =>
+      this.isSyntheticEvent(arg) ? this.snapshotSyntheticEvent(arg) : arg,
+    );
+    this.handlers.callback?.(type, snapshotArgs);
+  }
+
   @frozen
   enableInterception(): void {
     if (this.isInterceptorEnabled) return;
 
-    const callback = this.handlers.callback;
+    const callback = this.callback.bind(this);
 
     console.error = function (...args) {
-      callback?.('error', args);
-
+      callback('error', args);
       originalConsoleError.call(this, ...args);
     };
 
     console.info = function (...args) {
-      callback?.('info', args);
-
+      callback('info', args);
       originalConsoleInfo.call(this, ...args);
     };
 
     console.log = function (...args) {
-      callback?.('log', args);
-
+      callback('log', args);
       originalConsoleLog.call(this, ...args);
     };
 
     console.warn = function (...args) {
-      callback?.('warn', args);
-
+      callback('warn', args);
       originalConsoleWarn.call(this, ...args);
     };
 
     console.trace = function (...args) {
-      callback?.('trace', args);
-
+      callback('trace', args);
       originalConsoleTrace.call(this, ...args);
     };
 
     console.debug = function (...args) {
-      callback?.('debug', args);
-
+      callback('debug', args);
       originalConsoleDebug.call(this, ...args);
     };
 
     console.table = function (...args: Parameters<typeof originalConsoleTable>) {
-      callback?.('table', args);
-
+      callback('table', args);
       originalConsoleTable.call(this, ...args);
     };
 
     console.groupCollapsed = function (...args) {
-      callback?.('groupCollapsed', args);
-
+      callback('groupCollapsed', args);
       originalConsoleGroupCollapsed.call(this, ...args);
     };
 
     console.groupEnd = function (...args) {
-      callback?.('groupEnd', args);
-
+      callback('groupEnd', args);
       originalConsoleGroupEnd.call(this, ...args);
     };
 
     console.group = function (...args) {
-      callback?.('group', args);
-
+      callback('group', args);
       originalConsoleGroup.call(this, ...args);
     };