refactor(core): Fix sanitizer

Author: Reversean

packages/core/src/index.ts

@@ -3,6 +3,7 @@ export { HawkUserManager } from './users/hawk-user-manager';
 export type { Logger, LogType } from './logger/logger';
 export { isLoggerSet, setLogger, resetLogger, log } from './logger/logger';
 export { Sanitizer } from './modules/sanitizer';
+export type { SanitizerTypeHandler } from './modules/sanitizer';
 export { StackParser } from './modules/stack-parser';
 export { buildElementSelector } from './utils/selector';
 export type { Transport } from './transports/transport';

packages/core/src/modules/fetch-timer.ts

@@ -1,4 +1,4 @@
-import { log } from '@hawk.so/core';
+import { log } from '../logger/logger';
 
 /**
  * Sends AJAX request and wait for some time.

packages/core/src/modules/sanitizer.ts

@@ -1,10 +1,28 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { isPlainObject } from '../utils/validation';
 
+/**
+ * Custom type handler for Sanitizer.
+ *
+ * Allows user to register their own formatters from external packages.
+ */
+export interface SanitizerTypeHandler {
+  /**
+   * Checks if this handler should be applied to given value
+   *
+   * @returns `true`
+   */
+  check: (target: any) => boolean;
+
+  /**
+   * Formats the value into a sanitized representation
+   */
+  format: (target: any) => any;
+}
+
 /**
  * This class provides methods for preparing data to sending to Hawk
  * - trim long strings
- * - represent html elements like <div ...> as "<div>" instead of "{}"
  * - represent big objects as "<big object>"
  * - represent class as <class SomeClass> or <instance of SomeClass>
  */
@@ -30,6 +48,13 @@ export class Sanitizer {
    */
   private static readonly maxArrayLength: number = 10;
 
+  /**
+   * Custom type handlers registered via {@link registerHandler}.
+   *
+   * Checked in {@link sanitize} before built-in type checks.
+   */
+  private static readonly customHandlers: SanitizerTypeHandler[] = [];
+
   /**
    * Check if passed variable is an object
    *
@@ -39,6 +64,17 @@ export class Sanitizer {
     return isPlainObject(target);
   }
 
+  /**
+   * Register a custom type handler.
+   * Handlers are checked before built-in type checks, in reverse registration order
+   * (last registered = highest priority).
+   *
+   * @param handler - handler to register
+   */
+  public static registerHandler(handler: SanitizerTypeHandler): void {
+    Sanitizer.customHandlers.unshift(handler);
+  }
+
   /**
    * Apply sanitizing for array/object/primitives
    *
@@ -62,19 +98,21 @@ export class Sanitizer {
      */
     if (Sanitizer.isArray(data)) {
       return this.sanitizeArray(data, depth + 1, seen);
+    }
 
-      /**
-       * If value is an Element, format it as string with outer HTML
-       * HTMLDivElement -> "<div ...></div>"
-       */
-    } else if (Sanitizer.isElement(data)) {
-      return Sanitizer.formatElement(data);
+    // Check additional handlers provided by env-specific modules or users
+    // to sanitize some additional cases (e.g. specific object types)
+    for (const handler of Sanitizer.customHandlers) {
+      if (handler.check(data)) {
+        return handler.format(data);
+      }
+    }
 
-      /**
-       * If values is a not-constructed class, it will be formatted as "<class SomeClass>"
-       * class Editor {...} -> <class Editor>
-       */
-    } else if (Sanitizer.isClassPrototype(data)) {
+    /**
+     * If values is a not-constructed class, it will be formatted as "<class SomeClass>"
+     * class Editor {...} -> <class Editor>
+     */
+    if (Sanitizer.isClassPrototype(data)) {
       return Sanitizer.formatClassPrototype(data);
 
       /**
@@ -133,7 +171,9 @@ export class Sanitizer {
    * @param depth - current depth of recursion
    * @param seen - Set of already seen objects to prevent circular references
    */
-  private static sanitizeObject(data: { [key: string]: any }, depth: number, seen: WeakSet<object>): Record<string, any> | '<deep object>' | '<big object>' {
+  private static sanitizeObject(data: {
+    [key: string]: any
+  }, depth: number, seen: WeakSet<object>): Record<string, any> | '<deep object>' | '<big object>' {
     /**
      * If the maximum depth is reached, return a placeholder
      */
@@ -207,24 +247,6 @@ export class Sanitizer {
     return typeof target === 'string';
   }
 
-  /**
-   * Return string representation of the object type
-   *
-   * @param object - object to get type
-   */
-  private static typeOf(object: any): string {
-    return Object.prototype.toString.call(object).match(/\s([a-zA-Z]+)/)[1].toLowerCase();
-  }
-
-  /**
-   * Check if passed variable is an HTML Element
-   *
-   * @param target - variable to check
-   */
-  private static isElement(target: any): boolean {
-    return target instanceof Element;
-  }
-
   /**
    * Return name of a passed class
    *
@@ -250,31 +272,12 @@ export class Sanitizer {
    */
   private static trimString(target: string): string {
     if (target.length > Sanitizer.maxStringLen) {
-      return target.substr(0, Sanitizer.maxStringLen) + '…';
+      return target.substring(0, Sanitizer.maxStringLen) + '…';
     }
 
     return target;
   }
 
-  /**
-   * Represent HTML Element as string with it outer-html
-   * HTMLDivElement -> "<div ...></div>"
-   *
-   * @param target - variable to format
-   */
-  private static formatElement(target: Element): string {
-    /**
-     * Also, remove inner HTML because it can be BIG
-     */
-    const innerHTML = target.innerHTML;
-
-    if (innerHTML) {
-      return target.outerHTML.replace(target.innerHTML, '…');
-    }
-
-    return target.outerHTML;
-  }
-
   /**
    * Represent not-constructed class as "<class SomeClass>"
    *

packages/core/tests/modules/sanitizer.test.ts

@@ -0,0 +1,118 @@
+import { describe, it, expect } from 'vitest';
+import { Sanitizer } from '../../src';
+
+describe('Sanitizer', () => {
+  describe('isObject', () => {
+    it('should return true for a plain object', () => {
+      expect(Sanitizer.isObject({})).toBe(true);
+    });
+
+    it('should return false for an array', () => {
+      expect(Sanitizer.isObject([])).toBe(false);
+    });
+
+    it('should return false for a string', () => {
+      expect(Sanitizer.isObject('x')).toBe(false);
+    });
+
+    it('should return false for a boolean', () => {
+      expect(Sanitizer.isObject(true)).toBe(false);
+    });
+
+    it('should return false for null', () => {
+      expect(Sanitizer.isObject(null)).toBe(false);
+    });
+
+    it('should return false for undefined', () => {
+      expect(Sanitizer.isObject(undefined)).toBe(false);
+    });
+  });
+
+  describe('sanitize', () => {
+    it('should pass through strings within the length limit', () => {
+      expect(Sanitizer.sanitize('hello')).toBe('hello');
+    });
+
+    it('should trim strings longer than maxStringLen', () => {
+      const long = 'a'.repeat(201);
+      const result = Sanitizer.sanitize(long);
+
+      expect(result).toBe('a'.repeat(200) + '…');
+    });
+
+    it('should pass through short arrays unchanged', () => {
+      expect(Sanitizer.sanitize([1, 2, 3])).toEqual([1, 2, 3]);
+    });
+
+    it('should truncate arrays over maxArrayLength items and append placeholder', () => {
+      const arr = Array.from({ length: 12 }, (_, i) => i);
+      const result = Sanitizer.sanitize(arr);
+
+      expect(result).toHaveLength(11);
+      expect(result[10]).toBe('<2 more items...>');
+    });
+
+    it('should sanitize nested objects recursively', () => {
+      const longStr = 'a'.repeat(201);
+      const longArr = Array.from({ length: 12 }, (_, i) => i);
+      const obj = {
+        foo: 'x',
+        bar: longStr,
+        baz: longArr
+      }
+      const result = Sanitizer.sanitize(obj);
+
+      expect(result.foo).toBe('x');
+      expect(result.bar).toBe('a'.repeat(200) + '…');
+      expect(result.baz).toHaveLength(11);
+      expect(result.baz[10]).toBe('<2 more items...>');
+    });
+
+    it('should replace objects with more than 20 keys with placeholder', () => {
+      const big: Record<string, number> = {};
+
+      for (let i = 0; i < 21; i++) {
+        big[`k${i}`] = i;
+      }
+
+      expect(Sanitizer.sanitize(big)).toBe('<big object>');
+    });
+
+    it('should replace deeply nested objects with placeholder', () => {
+      const deep = { a: { b: { c: { d: { e: { f: 'bottom' } } } } } };
+      const result = Sanitizer.sanitize(deep);
+
+      expect(result.a.b.c.d.e).toBe('<deep object>');
+    });
+
+    it('should format a class (not constructed) as "<class Name>"', () => {
+      class Foo {}
+
+      expect(Sanitizer.sanitize(Foo)).toBe('<class Foo>');
+    });
+
+    it('should format a class instance as "<instance of Name>"', () => {
+      class Foo {}
+
+      expect(Sanitizer.sanitize(new Foo())).toBe('<instance of Foo>');
+    });
+
+    it('should replace circular references with placeholder', () => {
+      const obj: any = { a: 1 };
+
+      obj.self = obj;
+
+      const result = Sanitizer.sanitize(obj);
+
+      expect(result.self).toBe('<circular>');
+    });
+
+    it.each([
+      { label: 'number', value: 42 },
+      { label: 'boolean', value: true },
+      { label: 'null', value: null },
+    ])('should pass through $label primitives unchanged', ({ value }) => {
+      expect(Sanitizer.sanitize(value)).toBe(value);
+    });
+  });
+});

packages/core/tests/utils/validation.test.ts

@@ -1,8 +1,8 @@
 import { describe, it, expect, vi } from 'vitest';
-import { validateUser, validateContext, isValidEventPayload, isValidBreadcrumb } from '@hawk.so/core';
+import { validateUser, validateContext, isValidEventPayload, isValidBreadcrumb } from '../../src';
 
 // Suppress log output produced by log() calls inside validation failures.
-vi.mock('@hawk.so/core', () => ({ log: vi.fn(), isLoggerSet: vi.fn(() => true), setLogger: vi.fn() }));
+vi.mock('../../src/logger/logger', () => ({ log: vi.fn(), isLoggerSet: vi.fn(() => true), setLogger: vi.fn() }));
 
 describe('validateUser', () => {
   it('should return false when user is null', () => {

packages/javascript/src/catcher.ts

@@ -1,3 +1,4 @@
+import './modules/sanitizer';
 import Socket from './modules/socket';
 import type { BreadcrumbsAPI, CatcherMessage, HawkInitialSettings, HawkJavaScriptEvent, Transport } from './types';
 import { VueIntegration } from './integrations/vue';

packages/javascript/src/modules/sanitizer.ts

@@ -0,0 +1,20 @@
+import { Sanitizer } from '@hawk.so/core';
+
+/**
+ * Registers browser-specific sanitizer handler for {@link Element} objects.
+ *
+ * Handles HTML Element and represents as string with it outer HTML with
+ * inner content replaced: HTMLDivElement -> "<div ...></div>"
+ */
+Sanitizer.registerHandler({
+  check: (target) => target instanceof Element,
+  format: (target: Element) => {
+    const innerHTML = target.innerHTML;
+
+    if (innerHTML) {
+      return target.outerHTML.replace(target.innerHTML, '…');
+    }
+
+    return target.outerHTML;
+  },
+});