browsertrack 0.0.1 → 0.1.0

package/packages/client/src/interceptors/console.ts

@@ -0,0 +1,68 @@
+import type { ConsoleEvent, ConsoleLevel } from '../../../core/src/index.js';
+
+export type ConsoleCallback = (event: ConsoleEvent) => void;
+
+/**
+ * Patches console methods without modifying original behavior.
+ */
+export function setupConsoleInterceptors(onConsole: ConsoleCallback): () => void {
+  if (typeof console === 'undefined') return () => {};
+
+  const originalError = console.error;
+  const originalWarn = console.warn;
+
+  function formatArgs(args: any[]): string {
+    return args
+      .map((arg) => {
+        if (arg instanceof Error) {
+          return arg.stack || `${arg.name}: ${arg.message}`;
+        }
+        if (typeof arg === 'object' && arg !== null) {
+          try {
+            return JSON.stringify(arg);
+          } catch {
+            return String(arg);
+          }
+        }
+        return String(arg);
+      })
+      .join(' ');
+  }
+
+  console.error = function (...args: any[]) {
+    try {
+      const message = formatArgs(args);
+      const stack = new Error().stack;
+      onConsole({
+        level: 'error',
+        message,
+        stack,
+        timestamp: Date.now(),
+      });
+    } catch {
+      // Defensive
+    }
+    return originalError.apply(console, args);
+  };
+
+  console.warn = function (...args: any[]) {
+    try {
+      const message = formatArgs(args);
+      const stack = new Error().stack;
+      onConsole({
+        level: 'warn',
+        message,
+        stack,
+        timestamp: Date.now(),
+      });
+    } catch {
+      // Defensive
+    }
+    return originalWarn.apply(console, args);
+  };
+
+  return () => {
+    console.error = originalError;
+    console.warn = originalWarn;
+  };
+}

package/packages/client/src/interceptors/interaction.ts

@@ -0,0 +1,119 @@
+import type { Breadcrumb, ElementSummary } from '../../../core/src/index.js';
+import { getSemanticSelector, truncate } from '../../../core/src/index.js';
+
+export type InteractionCallback = (breadcrumb: Breadcrumb, elementSummary?: ElementSummary) => void;
+
+/**
+ * Extracts a concise ElementSummary from a DOM element.
+ * Never collects sensitive user input values.
+ */
+export function extractElementSummary(el: HTMLElement | Element): ElementSummary {
+  const selector = getSemanticSelector(el);
+  const tag = el.tagName.toLowerCase();
+  const id = el.id || undefined;
+  const classes = Array.from(el.classList || []);
+
+  let boundingRect: ElementSummary['boundingRect'] = undefined;
+  let visible = true;
+
+  try {
+    const rect = el.getBoundingClientRect();
+    boundingRect = {
+      x: Math.round(rect.x),
+      y: Math.round(rect.y),
+      width: Math.round(rect.width),
+      height: Math.round(rect.height),
+      top: Math.round(rect.top),
+      left: Math.round(rect.left),
+      bottom: Math.round(rect.bottom),
+      right: Math.round(rect.right),
+    };
+
+    const style = window.getComputedStyle(el);
+    visible = style.display !== 'none' && style.visibility !== 'hidden' && style.opacity !== '0' && rect.width > 0 && rect.height > 0;
+  } catch {
+    // Defensive
+  }
+
+  // Safe innerText (truncate to 80 chars, ignore password/sensitive elements)
+  let innerText: string | undefined;
+  if (tag !== 'input' && tag !== 'textarea' && tag !== 'select') {
+    innerText = truncate(el.textContent?.trim(), 80);
+  }
+
+  // Safe outerHTML (truncate to 200 chars)
+  const outerHTML = truncate(el.outerHTML?.trim(), 200);
+
+  return {
+    selector,
+    tag,
+    id,
+    classes,
+    boundingRect,
+    visible,
+    innerText,
+    outerHTML,
+  };
+}
+
+/**
+ * Sets up global click and submit event tracking.
+ */
+export function setupInteractionInterceptors(onInteraction: InteractionCallback): () => void {
+  if (typeof document === 'undefined') return () => {};
+
+  const onClick = (event: MouseEvent) => {
+    try {
+      const target = event.target as HTMLElement | null;
+      if (!target || !(target instanceof Element)) return;
+
+      const summary = extractElementSummary(target);
+      const message = `click ${summary.selector}${summary.innerText ? ` ("${summary.innerText}")` : ''}`;
+
+      onInteraction(
+        {
+          type: 'click',
+          category: 'ui',
+          message,
+          timestamp: Date.now(),
+          element: summary,
+        },
+        summary
+      );
+    } catch {
+      // Defensive
+    }
+  };
+
+  const onSubmit = (event: SubmitEvent) => {
+    try {
+      const target = event.target as HTMLFormElement | null;
+      if (!target || !(target instanceof Element)) return;
+
+      const summary = extractElementSummary(target);
+      const formAction = target.getAttribute('action') || '';
+      const message = `submit form ${summary.selector}${formAction ? ` (action: ${formAction})` : ''}`;
+
+      onInteraction(
+        {
+          type: 'submit',
+          category: 'ui',
+          message,
+          timestamp: Date.now(),
+          element: summary,
+        },
+        summary
+      );
+    } catch {
+      // Defensive
+    }
+  };
+
+  document.addEventListener('click', onClick, { capture: true, passive: true });
+  document.addEventListener('submit', onSubmit, { capture: true, passive: true });
+
+  return () => {
+    document.removeEventListener('click', onClick, { capture: true });
+    document.removeEventListener('submit', onSubmit, { capture: true });
+  };
+}

package/packages/client/src/interceptors/navigation.ts

@@ -0,0 +1,93 @@
+import type { NavigationEvent } from '../../../core/src/index.js';
+import { redactUrl } from '../../../core/src/index.js';
+
+export type NavigationCallback = (event: NavigationEvent) => void;
+
+/**
+ * Tracks browser SPA routing and history navigation.
+ */
+export function setupNavigationInterceptors(onNavigation: NavigationCallback): () => void {
+  if (typeof window === 'undefined' || typeof history === 'undefined') return () => {};
+
+  let currentUrl = redactUrl(window.location.href);
+
+  // Initial navigation
+  onNavigation({
+    to: currentUrl,
+    type: 'initial',
+    timestamp: Date.now(),
+  });
+
+  const originalPushState = history.pushState;
+  const originalReplaceState = history.replaceState;
+
+  history.pushState = function (data: any, unused: string, url?: string | URL | null) {
+    const from = currentUrl;
+    const result = originalPushState.apply(history, [data, unused, url]);
+    try {
+      const to = redactUrl(window.location.href);
+      currentUrl = to;
+      onNavigation({
+        from,
+        to,
+        type: 'pushState',
+        timestamp: Date.now(),
+      });
+    } catch {
+      // Defensive
+    }
+    return result;
+  };
+
+  history.replaceState = function (data: any, unused: string, url?: string | URL | null) {
+    const from = currentUrl;
+    const result = originalReplaceState.apply(history, [data, unused, url]);
+    try {
+      const to = redactUrl(window.location.href);
+      currentUrl = to;
+      onNavigation({
+        from,
+        to,
+        type: 'replaceState',
+        timestamp: Date.now(),
+      });
+    } catch {
+      // Defensive
+    }
+    return result;
+  };
+
+  const onPopState = () => {
+    const from = currentUrl;
+    const to = redactUrl(window.location.href);
+    currentUrl = to;
+    onNavigation({
+      from,
+      to,
+      type: 'popstate',
+      timestamp: Date.now(),
+    });
+  };
+
+  const onHashChange = () => {
+    const from = currentUrl;
+    const to = redactUrl(window.location.href);
+    currentUrl = to;
+    onNavigation({
+      from,
+      to,
+      type: 'hashchange',
+      timestamp: Date.now(),
+    });
+  };
+
+  window.addEventListener('popstate', onPopState);
+  window.addEventListener('hashchange', onHashChange);
+
+  return () => {
+    history.pushState = originalPushState;
+    history.replaceState = originalReplaceState;
+    window.removeEventListener('popstate', onPopState);
+    window.removeEventListener('hashchange', onHashChange);
+  };
+}

package/packages/client/src/interceptors/network.ts

@@ -0,0 +1,165 @@
+import type { NetworkEvent } from '../../../core/src/index.js';
+import { redactUrl } from '../../../core/src/index.js';
+
+export type NetworkCallback = (event: NetworkEvent) => void;
+
+/**
+ * Patches window.fetch and XMLHttpRequest to track network requests and failures.
+ */
+export function setupNetworkInterceptors(onNetwork: NetworkCallback): () => void {
+  const cleanups: (() => void)[] = [];
+
+  // 1. Patch window.fetch
+  if (typeof window !== 'undefined' && typeof window.fetch === 'function') {
+    const originalFetch = window.fetch;
+
+    window.fetch = async function (input: RequestInfo | URL, init?: RequestInit): Promise<Response> {
+      const startTime = Date.now();
+      let urlStr = '';
+      let method = 'GET';
+
+      try {
+        if (typeof input === 'string') {
+          urlStr = input;
+        } else if (input instanceof URL) {
+          urlStr = input.toString();
+        } else if (input && typeof input === 'object' && 'url' in input) {
+          urlStr = input.url;
+          method = input.method || 'GET';
+        }
+
+        if (init && init.method) {
+          method = init.method.toUpperCase();
+        }
+      } catch {
+        urlStr = 'unknown_url';
+      }
+
+      const safeUrl = redactUrl(urlStr);
+
+      try {
+        const response = await originalFetch.apply(window, [input as any, init]);
+        const durationMs = Date.now() - startTime;
+
+        onNetwork({
+          url: safeUrl,
+          method,
+          status: response.status,
+          statusText: response.statusText,
+          durationMs,
+          timestamp: startTime,
+        });
+
+        return response;
+      } catch (err: any) {
+        const durationMs = Date.now() - startTime;
+        const isAbort = err?.name === 'AbortError';
+
+        onNetwork({
+          url: safeUrl,
+          method,
+          durationMs,
+          error: err?.message || 'Network request failed',
+          aborted: isAbort,
+          timestamp: startTime,
+        });
+
+        throw err;
+      }
+    };
+
+    cleanups.push(() => {
+      window.fetch = originalFetch;
+    });
+  }
+
+  // 2. Patch XMLHttpRequest
+  if (typeof window !== 'undefined' && typeof window.XMLHttpRequest === 'function') {
+    const originalOpen = XMLHttpRequest.prototype.open;
+    const originalSend = XMLHttpRequest.prototype.send;
+    const originalAbort = XMLHttpRequest.prototype.abort;
+
+    const xhrMap = new WeakMap<XMLHttpRequest, { url: string; method: string; startTime: number; aborted?: boolean }>();
+
+    XMLHttpRequest.prototype.open = function (this: XMLHttpRequest, ...args: any[]) {
+      try {
+        const method = String(args[0] || 'GET').toUpperCase();
+        const rawUrl = String(args[1] || '');
+        xhrMap.set(this, {
+          url: redactUrl(rawUrl),
+          method,
+          startTime: Date.now(),
+        });
+      } catch {
+        // Defensive
+      }
+      return originalOpen.apply(this, args as any);
+    };
+
+    XMLHttpRequest.prototype.abort = function (this: XMLHttpRequest) {
+      const meta = xhrMap.get(this);
+      if (meta) {
+        meta.aborted = true;
+      }
+      return originalAbort.apply(this);
+    };
+
+    XMLHttpRequest.prototype.send = function (this: XMLHttpRequest, body?: any) {
+      const meta = xhrMap.get(this) || { url: 'unknown_url', method: 'GET', startTime: Date.now() };
+
+      const onComplete = () => {
+        try {
+          const durationMs = Date.now() - meta.startTime;
+          onNetwork({
+            url: meta.url,
+            method: meta.method,
+            status: this.status,
+            statusText: this.statusText,
+            durationMs,
+            aborted: meta.aborted,
+            timestamp: meta.startTime,
+          });
+        } catch {
+          // Defensive
+        }
+      };
+
+      const onError = () => {
+        try {
+          const durationMs = Date.now() - meta.startTime;
+          onNetwork({
+            url: meta.url,
+            method: meta.method,
+            status: this.status || 0,
+            durationMs,
+            error: 'XHR Network Error',
+            aborted: meta.aborted,
+            timestamp: meta.startTime,
+          });
+        } catch {
+          // Defensive
+        }
+      };
+
+      this.addEventListener('load', onComplete, { once: true });
+      this.addEventListener('error', onError, { once: true });
+      this.addEventListener('timeout', onError, { once: true });
+
+      return originalSend.apply(this, [body]);
+    };
+
+    cleanups.push(() => {
+      XMLHttpRequest.prototype.open = originalOpen;
+      XMLHttpRequest.prototype.send = originalSend;
+      XMLHttpRequest.prototype.abort = originalAbort;
+    });
+  }
+
+  return () => {
+    for (const cleanup of cleanups) {
+      try {
+        cleanup();
+      } catch {}
+    }
+  };
+}

package/packages/client/src/interceptors/runtime.ts

@@ -0,0 +1,65 @@
+import type { RuntimeErrorEvent } from '@browserdiag/core';
+
+export type RuntimeErrorCallback = (event: RuntimeErrorEvent, error?: any) => void;
+
+export function setupRuntimeInterceptors(onRuntimeError: RuntimeErrorCallback): () => void {
+  if (typeof window === 'undefined') return () => {};
+
+  const errorHandler = (event: ErrorEvent) => {
+    try {
+      const errorEvent: RuntimeErrorEvent = {
+        message: event.message || (event.error && event.error.message) || 'Script error',
+        stack: (event.error && event.error.stack) || undefined,
+        filename: event.filename || undefined,
+        lineno: event.lineno || undefined,
+        colno: event.colno || undefined,
+        errorType: (event.error && event.error.name) || 'Error',
+        timestamp: Date.now(),
+      };
+      onRuntimeError(errorEvent, event.error);
+    } catch {
+      // Defensive: never let diagnostic handler crash host app
+    }
+  };
+
+  const unhandledRejectionHandler = (event: PromiseRejectionEvent) => {
+    try {
+      const reason = event.reason;
+      let message = 'Unhandled Promise Rejection';
+      let stack: string | undefined;
+      let errorType = 'UnhandledRejection';
+
+      if (reason instanceof Error) {
+        message = reason.message;
+        stack = reason.stack;
+        errorType = reason.name || 'UnhandledRejection';
+      } else if (typeof reason === 'string') {
+        message = reason;
+      } else if (reason && typeof reason === 'object') {
+        try {
+          message = JSON.stringify(reason);
+        } catch {
+          message = String(reason);
+        }
+      }
+
+      const errorEvent: RuntimeErrorEvent = {
+        message,
+        stack,
+        errorType,
+        timestamp: Date.now(),
+      };
+      onRuntimeError(errorEvent, reason);
+    } catch {
+      // Defensive
+    }
+  };
+
+  window.addEventListener('error', errorHandler);
+  window.addEventListener('unhandledrejection', unhandledRejectionHandler);
+
+  return () => {
+    window.removeEventListener('error', errorHandler);
+    window.removeEventListener('unhandledrejection', unhandledRejectionHandler);
+  };
+}