safeStringify & %c support

Author: Dobrunia

src/addons/consoleCatcher.ts

@@ -2,7 +2,7 @@
  * @file Module for intercepting console logs with stack trace capture
  */
 
-import type { ConsoleLogEvent } from '@hawk.so/types';
+import type { ConsoleLogEvent } from "@hawk.so/types";
 
 const createConsoleCatcher = (): {
   initConsoleCatcher: () => void;
@@ -13,6 +13,66 @@ const createConsoleCatcher = (): {
   const consoleOutput: ConsoleLogEvent[] = [];
   let isInitialized = false;
 
+  /**
+   * Safely stringifies objects handling circular references
+   */
+  const safeStringify = (obj: unknown): string => {
+    const seen = new WeakSet();
+    return JSON.stringify(obj, (key, value) => {
+      if (typeof value === "object" && value !== null) {
+        if (seen.has(value)) {
+          return "[Circular]";
+        }
+        seen.add(value);
+      }
+      return value;
+    });
+  };
+
+  /**
+   * Formats console arguments handling %c directives
+   */
+  const formatConsoleArgs = (
+    args: unknown[]
+  ): { message: string; styles: string[] } => {
+    if (args.length === 0) return { message: "", styles: [] };
+
+    const firstArg = args[0];
+    if (typeof firstArg !== "string" || !firstArg.includes("%c")) {
+      return {
+        message: args
+          .map((arg) => (typeof arg === "string" ? arg : safeStringify(arg)))
+          .join(" "),
+        styles: [],
+      };
+    }
+
+    // Handle %c formatting
+    const message = args[0] as string;
+    const styles: string[] = [];
+
+    // Extract styles from arguments
+    let styleIndex = 0;
+    for (let i = 1; i < args.length; i++) {
+      const arg = args[i];
+      if (typeof arg === "string" && message.indexOf("%c", styleIndex) !== -1) {
+        styles.push(arg);
+        styleIndex = message.indexOf("%c", styleIndex) + 2;
+      }
+    }
+
+    // Add remaining arguments that aren't styles
+    const remainingArgs = args
+      .slice(styles.length + 1)
+      .map((arg) => (typeof arg === "string" ? arg : safeStringify(arg)))
+      .join(" ");
+
+    return {
+      message: message + (remainingArgs ? " " + remainingArgs : ""),
+      styles,
+    };
+  };
+
   const addToConsoleOutput = (logEvent: ConsoleLogEvent): void => {
     if (consoleOutput.length >= MAX_LOGS) {
       consoleOutput.shift();
@@ -25,24 +85,24 @@ const createConsoleCatcher = (): {
   ): ConsoleLogEvent => {
     if (event instanceof ErrorEvent) {
       return {
-        method: 'error',
+        method: "error",
         timestamp: new Date(),
-        type: event.error?.name || 'Error',
+        type: event.error?.name || "Error",
         message: event.error?.message || event.message,
-        stack: event.error?.stack || '',
+        stack: event.error?.stack || "",
         fileLine: event.filename
           ? `${event.filename}:${event.lineno}:${event.colno}`
-          : '',
+          : "",
       };
     }
 
     return {
-      method: 'error',
+      method: "error",
       timestamp: new Date(),
-      type: 'UnhandledRejection',
+      type: "UnhandledRejection",
       message: event.reason?.message || String(event.reason),
-      stack: event.reason?.stack || '',
-      fileLine: '',
+      stack: event.reason?.stack || "",
+      fileLine: "",
     };
   };
 
@@ -53,25 +113,34 @@ const createConsoleCatcher = (): {
       }
 
       isInitialized = true;
-      const consoleMethods: string[] = ['log', 'warn', 'error', 'info', 'debug'];
+      const consoleMethods: string[] = [
+        "log",
+        "warn",
+        "error",
+        "info",
+        "debug",
+      ];
 
       consoleMethods.forEach((method) => {
-        if (typeof window.console[method] !== 'function') {
+        if (typeof window.console[method] !== "function") {
           return;
         }
 
         const oldFunction = window.console[method].bind(window.console);
 
         window.console[method] = function (...args: unknown[]): void {
-          const stack = new Error().stack?.split('\n').slice(2).join('\n') || '';
+          const stack =
+            new Error().stack?.split("\n").slice(2).join("\n") || "";
+          const { message, styles } = formatConsoleArgs(args);
 
           const logEvent: ConsoleLogEvent = {
             method,
             timestamp: new Date(),
             type: method,
-            message: args.map((arg) => typeof arg === 'string' ? arg : JSON.stringify(arg)).join(' '),
+            message,
             stack,
-            fileLine: stack.split('\n')[0]?.trim(),
+            fileLine: stack.split("\n")[0]?.trim(),
+            styles,
           };
 
           addToConsoleOutput(logEvent);
@@ -87,10 +156,11 @@ const createConsoleCatcher = (): {
     },
 
     getConsoleLogStack(): ConsoleLogEvent[] {
-      return [ ...consoleOutput ];
+      return [...consoleOutput];
     },
   };
 };
 
 const consoleCatcher = createConsoleCatcher();
-export const { initConsoleCatcher, getConsoleLogStack, addErrorEvent } = consoleCatcher;
+export const { initConsoleCatcher, getConsoleLogStack, addErrorEvent } =
+  consoleCatcher;