chore: upgrade Node.js version to 24.12.0 and update CI workflows to use .nvmrc; reintroduce @hawk.so/types in package.json

Author: Dobrunia

.github/workflows/main.yml

@@ -8,10 +8,10 @@ jobs:
       CI_JOB_NUMBER: 1
     steps:
       - uses: actions/checkout@v1
-      - name: Use Node.js 24.x
+      - name: Use Node.js from .nvmrc
         uses: actions/setup-node@v1
         with:
-          node-version: 24.x
+          node-version-file: '.nvmrc'
       - run: yarn install
       - run: yarn lint-test
 
@@ -21,9 +21,9 @@ jobs:
       CI_JOB_NUMBER: 2
     steps:
       - uses: actions/checkout@v1
-      - name: Use Node.js 24.x
+      - name: Use Node.js from .nvmrc
         uses: actions/setup-node@v1
         with:
-          node-version: 24.x
+          node-version-file: '.nvmrc'
       - run: yarn install
       - run: yarn build

.github/workflows/npm-publish.yml

@@ -12,7 +12,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
-          node-version: 24.x
+          node-version-file: '.nvmrc'
           registry-url: https://registry.npmjs.org/
       - run: yarn
       - run: yarn lint-test

.nvmrc

@@ -1 +1 @@
-v20.18.0
+24.12.0

package.json

@@ -18,7 +18,6 @@
     "url": "git+https://github.com/codex-team/hawk.javascript.git"
   },
   "devDependencies": {
-    "@hawk.so/types": "0.5.2",
     "@size-limit/preset-small-lib": "^11.1.6",
     "eslint": "^7.24.0",
     "eslint-config-codex": "^1.6.1",

packages/javascript/package.json

@@ -39,6 +39,7 @@
     "error-stack-parser": "^2.1.4"
   },
   "devDependencies": {
+    "@hawk.so/types": "0.5.2",
     "vue": "^2",
     "vite-plugin-dts": "^4.2.4"
   }

packages/javascript/src/addons/breadcrumbs.ts

@@ -4,6 +4,7 @@
 import type { Breadcrumb, BreadcrumbLevel, BreadcrumbType, Json, JsonNode } from '@hawk.so/types';
 import Sanitizer from '../modules/sanitizer';
 import { buildElementSelector } from '../utils/selector';
+import log from '../utils/log';
 
 /**
  * Default maximum number of breadcrumbs to store
@@ -194,7 +195,7 @@ export class BreadcrumbManager {
    */
   public init(options: BreadcrumbsOptions = {}): void {
     if (this.isInitialized) {
-      console.warn('[BreadcrumbManager] init has already been called; breadcrumb configuration is global and subsequent init options are ignored.');
+      log('[BreadcrumbManager] init has already been called; breadcrumb configuration is global and subsequent init options are ignored.', 'warn');
 
       return;
     }
@@ -231,7 +232,8 @@ export class BreadcrumbManager {
    * Add a breadcrumb to the buffer
    *
    * @param breadcrumb - The breadcrumb data to add
-   * @param hint - Optional hint object with original event data
+   * @param hint - Optional hint object with original event data (Event, Response, XMLHttpRequest, etc.)
+   *               Used by beforeBreadcrumb callback to access original event context
    */
   public addBreadcrumb(breadcrumb: BreadcrumbInput, hint?: BreadcrumbHint): void {
     /**
@@ -353,20 +355,13 @@ export class BreadcrumbManager {
   }
 
   /**
-   * Sanitize and trim breadcrumb data object
+   * Sanitize breadcrumb data object
+   * Sanitizer already trims strings, so no additional trimming needed
    *
    * @param data - The data object to sanitize
    */
   private sanitizeData(data: Record<string, unknown>): Record<string, JsonNode> {
-    const sanitized = Sanitizer.sanitize(data) as Record<string, unknown>;
-
-    for (const key in sanitized) {
-      if (typeof sanitized[key] === 'string') {
-        sanitized[key] = this.trimString(sanitized[key] as string, this.options.maxValueLength);
-      }
-    }
-
-    return sanitized as Record<string, JsonNode>;
+    return Sanitizer.sanitize(data) as Record<string, JsonNode>;
   }
 
   /**
@@ -441,7 +436,7 @@ export class BreadcrumbManager {
         manager.addBreadcrumb({
           type: 'request',
           category: 'fetch',
-          message: `${method} ${url} failed`,
+          message: `[FAIL] ${method} ${url}`,
           level: 'error',
           data: {
             url,

packages/javascript/src/catcher.ts

@@ -2,7 +2,7 @@ import Socket from './modules/socket';
 import Sanitizer from './modules/sanitizer';
 import log from './utils/log';
 import StackParser from './modules/stackParser';
-import type { CatcherMessage, HawkInitialSettings } from './types';
+import type { CatcherMessage, HawkInitialSettings, BreadcrumbsAPI } from './types';
 import { VueIntegration } from './integrations/vue';
 import { id } from './utils/id';
 import type {
@@ -18,18 +18,9 @@ import { EventRejectedError } from './errors';
 import type { HawkJavaScriptEvent } from './types';
 import { isErrorProcessed, markErrorAsProcessed } from './utils/event';
 import { ConsoleCatcher } from './addons/consoleCatcher';
-import { BreadcrumbManager, type BreadcrumbHint, type BreadcrumbInput } from './addons/breadcrumbs';
+import { BreadcrumbManager } from './addons/breadcrumbs';
 import { validateUser, validateContext } from './utils/validation';
 
-/**
- * Breadcrumbs API interface
- */
-interface BreadcrumbsAPI {
-  add: (breadcrumb: BreadcrumbInput, hint?: BreadcrumbHint) => void;
-  get: () => Breadcrumb[];
-  clear: () => void;
-}
-
 /**
  * Allow to use global VERSION, that will be overwritten by Webpack
  */

packages/javascript/src/types/breadcrumbs-api.ts

@@ -0,0 +1,11 @@
+import type { Breadcrumb } from '@hawk.so/types';
+import type { BreadcrumbInput, BreadcrumbHint } from '../addons/breadcrumbs';
+
+/**
+ * Breadcrumbs API interface
+ */
+export interface BreadcrumbsAPI {
+  add: (breadcrumb: BreadcrumbInput, hint?: BreadcrumbHint) => void;
+  get: () => Breadcrumb[];
+  clear: () => void;
+}

packages/javascript/src/types/index.ts

@@ -2,6 +2,7 @@ import type { CatcherMessage } from './catcher-message';
 import type { HawkInitialSettings } from './hawk-initial-settings';
 import type { HawkJavaScriptEvent } from './event';
 import type { VueIntegrationData, NuxtIntegrationData, NuxtIntegrationAddons, JavaScriptCatcherIntegrations } from './integrations';
+import type { BreadcrumbsAPI } from './breadcrumbs-api';
 
 export type {
   CatcherMessage,
@@ -10,5 +11,6 @@ export type {
   VueIntegrationData,
   NuxtIntegrationData,
   NuxtIntegrationAddons,
-  JavaScriptCatcherIntegrations
+  JavaScriptCatcherIntegrations,
+  BreadcrumbsAPI
 };

packages/javascript/src/utils/selector.ts

@@ -1,17 +1,31 @@
 /**
  * Build a simple CSS selector from an HTML element
+ * If element has no id or class, recursively builds selector from parent
  *
  * @param element - HTML element to build selector from
- * @returns CSS selector string (e.g., "div#myId.class1.class2")
+ * @param maxDepth - Maximum recursion depth (default: 3)
+ * @returns CSS selector string (e.g., "div#myId.class1.class2" or ".some-parent button")
  */
-export function buildElementSelector(element: HTMLElement): string {
+export function buildElementSelector(element: HTMLElement, maxDepth: number = 3): string {
   let selector = element.tagName.toLowerCase();
 
   if (element.id) {
     selector += `#${element.id}`;
-  } else if (element.className && typeof element.className === 'string') {
-    selector += `.${element.className.split(' ').filter(Boolean)
-      .join('.')}`;
+    return selector;
+  }
+
+  if (element.className) {
+    selector += `.${element.className.split(' ').filter(Boolean).join('.')}`;
+    return selector;
+  }
+
+  /**
+   * If element has no id or class, try to build selector from parent
+   */
+  if (maxDepth > 0 && element.parentElement) {
+    const parentSelector = buildElementSelector(element.parentElement as HTMLElement, maxDepth - 1);
+
+    return `${parentSelector} ${selector}`;
   }
 
   return selector;