safeStringify & %c support

package.json

@@ -49,6 +49,7 @@
   "dependencies": {
     "@hawk.so/types": "^0.1.20",
     "error-stack-parser": "^2.1.4",
+    "safe-stringify": "^1.1.1",
     "vite-plugin-dts": "^4.2.4"
   }
 }

src/addons/consoleCatcher.ts

@@ -1,7 +1,7 @@
 /**
  * @file Module for intercepting console logs with stack trace capture
  */
-
+import safeStringify from 'safe-stringify';
 import type { ConsoleLogEvent } from '@hawk.so/types';
 
 const createConsoleCatcher = (): {
@@ -13,6 +13,72 @@ const createConsoleCatcher = (): {
   const consoleOutput: ConsoleLogEvent[] = [];
   let isInitialized = false;
 
+  /**
+   * Converts any argument to its string representation
+   *
+   * @param arg - Console arguments
+   */
+  const stringifyArg = (arg: unknown): string => {
+    if (typeof arg === 'string') {
+      return arg;
+    }
+    if (typeof arg === 'number' || typeof arg === 'boolean') {
+      return String(arg);
+    }
+
+    return safeStringify(arg);
+  };
+
+  /**
+   * Formats console arguments handling %c directives
+   *
+   * @param args - Console arguments that may include %c style 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(stringifyArg).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(stringifyArg)
+      .join(' ');
+
+    return {
+      message: message + (remainingArgs ? ' ' + remainingArgs : ''),
+      styles,
+    };
+  };
+
   const addToConsoleOutput = (logEvent: ConsoleLogEvent): void => {
     if (consoleOutput.length >= MAX_LOGS) {
       consoleOutput.shift();
@@ -53,7 +119,13 @@ 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') {
@@ -63,15 +135,19 @@ const createConsoleCatcher = (): {
         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(),
+            styles,
           };
 
           addToConsoleOutput(logEvent);
@@ -93,4 +169,6 @@ const createConsoleCatcher = (): {
 };
 
 const consoleCatcher = createConsoleCatcher();
-export const { initConsoleCatcher, getConsoleLogStack, addErrorEvent } = consoleCatcher;
+
+export const { initConsoleCatcher, getConsoleLogStack, addErrorEvent } =
+  consoleCatcher;

yarn.lock

@@ -2619,6 +2619,11 @@ safe-regex-test@^1.0.3:
     es-errors "^1.3.0"
     is-regex "^1.1.4"
 
+safe-stringify@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/safe-stringify/-/safe-stringify-1.1.1.tgz#f4240f506d041f58374d6106e2a5850f6b1ce576"
+  integrity sha512-YSzQLuwp06fuvJD1h6+vVNFYZoXmDs5UUNPUbTvQK7Ap+L0qD4Vp+sN434C+pdS3prVVlUfQdNeiEIgxox/kUQ==
+
 semver@^6.3.1:
   version "6.3.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"