@watchforge/browser 0.1.0

package/src/client.js

@@ -0,0 +1,628 @@
+import { sendEvent, parseDsn } from "./transport.js";
+
+let DSN = null;
+let APP_ENV = "production";
+let RELEASE = null;
+let DEBUG = false;
+
+// Detect environment
+const isBrowser = typeof window !== "undefined";
+const isNode =
+  typeof process !== "undefined" && process.versions && process.versions.node;
+
+// In-memory breadcrumb buffer (shared for all events in this process / page)
+const MAX_BREADCRUMBS = 100;
+let breadcrumbs = [];
+
+function addBreadcrumb(breadcrumb) {
+  const entry = {
+    level: "info",
+    category: "log",
+    data: {},
+    ...breadcrumb,
+    timestamp: new Date().toISOString(),
+  };
+
+  breadcrumbs.push(entry);
+  if (breadcrumbs.length > MAX_BREADCRUMBS) {
+    breadcrumbs = breadcrumbs.slice(-MAX_BREADCRUMBS);
+  }
+}
+
+function getBreadcrumbsSnapshot() {
+  return breadcrumbs.slice();
+}
+
+// Simple browser environment detectors (best-effort, not 100% accurate)
+function getBrowserContext() {
+  if (!isBrowser) return null;
+
+  const ua = navigator.userAgent || "";
+  let name = "Unknown";
+  if (/chrome|crios|crmo/i.test(ua) && !/edge|edg\//i.test(ua)) {
+    name = "Chrome";
+  } else if (/safari/i.test(ua) && !/chrome|crios|crmo/i.test(ua)) {
+    name = "Safari";
+  } else if (/firefox|fxios/i.test(ua)) {
+    name = "Firefox";
+  } else if (/edg\//i.test(ua)) {
+    name = "Edge";
+  }
+
+  const versionMatch = ua.match(/(chrome|crios|firefox|fxios|safari|edg)\/([\d.]+)/i);
+  const version = versionMatch ? versionMatch[2] : null;
+
+  const language =
+    (navigator.languages && navigator.languages[0]) ||
+    navigator.language ||
+    null;
+
+  let timezone = null;
+  try {
+    timezone = Intl.DateTimeFormat().resolvedOptions().timeZone || null;
+  } catch {
+    timezone = null;
+  }
+
+  return {
+    name,
+    version,
+    user_agent: ua,
+    language,
+    timezone,
+  };
+}
+
+function getOsContext() {
+  if (!isBrowser) return null;
+  const ua = navigator.userAgent || "";
+  let name = "Unknown";
+  if (/windows/i.test(ua)) name = "Windows";
+  else if (/mac os x/i.test(ua)) name = "macOS";
+  else if (/android/i.test(ua)) name = "Android";
+  else if (/iphone|ipad|ipod/i.test(ua)) name = "iOS";
+  else if (/linux/i.test(ua)) name = "Linux";
+
+  return {
+    name,
+    version: null,
+  };
+}
+
+function getDeviceContext() {
+  if (!isBrowser) return null;
+  const ua = navigator.userAgent || "";
+  const isMobile = /iphone|ipad|ipod|android|mobile/i.test(ua);
+  const family = isMobile ? "mobile" : "desktop";
+
+  const viewport =
+    typeof window !== "undefined"
+      ? { width: window.innerWidth, height: window.innerHeight }
+      : null;
+  const screenInfo =
+    typeof window !== "undefined" && window.screen
+      ? { width: window.screen.width, height: window.screen.height }
+      : null;
+
+  const ctx = { family };
+  if (viewport) {
+    ctx.viewport_width = viewport.width;
+    ctx.viewport_height = viewport.height;
+  }
+  if (screenInfo) {
+    ctx.screen_width = screenInfo.width;
+    ctx.screen_height = screenInfo.height;
+  }
+
+  return ctx;
+}
+
+function getRuntimeContext() {
+  if (isNode) {
+    return {
+      name: "node",
+      version: process.version,
+    };
+  }
+  if (isBrowser) {
+    return {
+      name: "javascript",
+      version: null,
+    };
+  }
+  return null;
+}
+
+function setupBrowserInstrumentation() {
+  if (!isBrowser) return;
+
+  // Global error handlers (already existed but keep here with breadcrumbs)
+  window.onerror = function (msg, url, line, col, error) {
+    addBreadcrumb({
+      type: "error",
+      level: "error",
+      category: "window.onerror",
+      message: String(msg),
+      data: { url, line, col },
+    });
+    captureException(error || msg);
+  };
+
+  window.onunhandledrejection = function (event) {
+    addBreadcrumb({
+      type: "error",
+      level: "error",
+      category: "unhandledrejection",
+      message: String(event.reason),
+      data: {},
+    });
+    captureException(event.reason);
+  };
+
+  // Console breadcrumbs
+  ["log", "info", "warn", "error", "debug"].forEach((level) => {
+    if (!console[level]) return;
+    const original = console[level].bind(console);
+    console[level] = (...args) => {
+      try {
+        addBreadcrumb({
+          type: "log",
+          level,
+          category: "console",
+          message: args.map(String).join(" "),
+          data: {},
+        });
+      } catch (_) {
+        // best-effort, never break console
+      }
+      original(...args);
+    };
+  });
+
+  // Click breadcrumbs
+  window.addEventListener(
+    "click",
+    (event) => {
+      try {
+        const target = event.target;
+        if (!target) return;
+        const element = target.closest
+          ? target.closest("*")
+          : target;
+        const tag = element && element.tagName;
+        const text =
+          element && element.innerText
+            ? element.innerText.trim().slice(0, 100)
+            : null;
+        const id = element && element.id;
+        const className = element && element.className;
+
+        addBreadcrumb({
+          type: "user",
+          level: "info",
+          category: "ui.click",
+          message: tag ? `Click on <${tag.toLowerCase()}>` : "Click",
+          data: { id, className, text },
+        });
+      } catch (_) {
+        // ignore
+      }
+    },
+    true
+  );
+
+  // Navigation breadcrumbs (history API + hash changes)
+  const oldHref = window.location.href;
+  addBreadcrumb({
+    type: "navigation",
+    level: "info",
+    category: "navigation",
+    message: "Page loaded",
+    data: {
+      from: null,
+      to: oldHref,
+    },
+  });
+
+  function recordNavigation(from, to) {
+    if (from === to) return;
+    addBreadcrumb({
+      type: "navigation",
+      level: "info",
+      category: "navigation",
+      message: `${from} -> ${to}`,
+      data: { from, to },
+    });
+  }
+
+  const originalPushState = history.pushState;
+  history.pushState = function (...args) {
+    const from = window.location.href;
+    originalPushState.apply(history, args);
+    const to = window.location.href;
+    recordNavigation(from, to);
+  };
+
+  const originalReplaceState = history.replaceState;
+  history.replaceState = function (...args) {
+    const from = window.location.href;
+    originalReplaceState.apply(history, args);
+    const to = window.location.href;
+    recordNavigation(from, to);
+  };
+
+  window.addEventListener("hashchange", (event) => {
+    recordNavigation(event.oldURL, event.newURL);
+  });
+
+  // HTTP breadcrumbs: fetch
+  if (typeof window.fetch === "function") {
+    const originalFetch = window.fetch.bind(window);
+    window.fetch = async (input, init = {}) => {
+      const method = (init.method || "GET").toUpperCase();
+      const url = typeof input === "string" ? input : input.url;
+      const start = Date.now();
+      try {
+        const response = await originalFetch(input, init);
+        const duration = Date.now() - start;
+        addBreadcrumb({
+          type: "http",
+          level: "info",
+          category: "http",
+          message: `${method} ${url}`,
+          data: {
+            url,
+            method,
+            status_code: response.status,
+            duration_ms: duration,
+          },
+        });
+        return response;
+      } catch (error) {
+        const duration = Date.now() - start;
+        addBreadcrumb({
+          type: "http",
+          level: "error",
+          category: "http",
+          message: `${method} ${url} - failed`,
+          data: {
+            url,
+            method,
+            error: String(error),
+            duration_ms: duration,
+          },
+        });
+        throw error;
+      }
+    };
+  }
+
+  // HTTP breadcrumbs: XHR
+  if (typeof XMLHttpRequest !== "undefined") {
+    const OriginalXHR = XMLHttpRequest;
+    function WrappedXHR() {
+      const xhr = new OriginalXHR();
+      let url = null;
+      let method = null;
+
+      const origOpen = xhr.open;
+      xhr.open = function (m, u, ...rest) {
+        method = m;
+        url = u;
+        origOpen.call(xhr, m, u, ...rest);
+      };
+
+      const origSend = xhr.send;
+      xhr.send = function (...sendArgs) {
+        const start = Date.now();
+        xhr.addEventListener("loadend", () => {
+          const duration = Date.now() - start;
+          addBreadcrumb({
+            type: "http",
+            level: "info",
+            category: "http",
+            message: `${method} ${url}`,
+            data: {
+              url,
+              method,
+              status_code: xhr.status,
+              duration_ms: duration,
+            },
+          });
+        });
+        origSend.apply(xhr, sendArgs);
+      };
+
+      return xhr;
+    }
+    // eslint-disable-next-line no-global-assign
+    XMLHttpRequest = WrappedXHR;
+  }
+}
+
+// Parse a JavaScript Error.stack string into structured frames compatible with backend
+function buildStacktraceFromError(error) {
+  if (!error || !error.stack || typeof error.stack !== "string") {
+    return null;
+  }
+
+  const stackLines = error.stack.split("\n");
+  const frames = [];
+
+  for (let i = 1; i < stackLines.length; i++) {
+    const line = stackLines[i].trim();
+    // Examples:
+    //   at funcName (http://localhost:5173/src/App.tsx:10:15)
+    //   at http://localhost:5173/assets/index-abc123.js:1:1234
+    const match =
+      line.match(/^at\s+(.*?)\s+\((.*?):(\d+):(\d+)\)$/) ||
+      line.match(/^at\s+(.*?):(\d+):(\d+)$/);
+
+    if (!match) continue;
+
+    let functionName;
+    let file;
+    let lineNo;
+    let colNo;
+
+    if (match.length === 5) {
+      functionName = match[1] || "<anonymous>";
+      file = match[2];
+      lineNo = parseInt(match[3], 10);
+      colNo = parseInt(match[4], 10);
+    } else {
+      functionName = "<anonymous>";
+      file = match[1];
+      lineNo = parseInt(match[2], 10);
+      colNo = parseInt(match[3], 10);
+    }
+
+    const filename = file.split("/").pop() || file;
+
+    frames.push({
+      filename,
+      abs_path: file,
+      lineno: lineNo,
+      colno: colNo,
+      function: functionName,
+      module: null,
+      context_line: null,
+      pre_context: [],
+      post_context: [],
+      vars: {},
+      in_app: true,
+    });
+  }
+
+  if (!frames.length) {
+    return null;
+  }
+
+  // Backend expects oldest frame first, newest last; JS stacks are newest first,
+  // so we reverse to be consistent with Python-style traces.
+  frames.reverse();
+
+  return { frames };
+}
+
+import { initTracing } from "./tracing.js";
+
+export function register({
+  dsn,
+  app_env = "production",
+  release = null,
+  debug = false,
+}) {
+  DSN = dsn;
+  APP_ENV = app_env;
+  RELEASE = release;
+  DEBUG = debug;
+  
+  // Initialize tracing
+  initTracing(dsn, app_env, debug);
+  
+  if (DEBUG) {
+    // Parse DSN to show API URL in debug
+    const parsed = parseDsn(dsn);
+    const apiUrl = parsed ? parsed.apiUrl : "default";
+    const envApiUrl =
+      (isNode && process.env.WATCHFORGE_API_URL) ||
+      (isBrowser &&
+        typeof window !== "undefined" &&
+        window.WATCHFORGE_API_URL) ||
+                      null;
+    console.log("WatchForge SDK initialized", { 
+      dsn: dsn.substring(0, 50) + "...", 
+      app_env,
+      release: release || "not set",
+      apiUrl: envApiUrl || apiUrl,
+      source: envApiUrl ? "environment variable" : "DSN-derived",
+    });
+  }
+  
+  // Browser: Set up full instrumentation (errors, breadcrumbs, HTTP, navigation)
+  if (isBrowser) {
+    setupBrowserInstrumentation();
+  }
+  
+  // Node.js: Set up process error handlers
+  if (isNode) {
+    process.on("uncaughtException", (error) => {
+      captureException(error);
+    });
+    
+    process.on("unhandledRejection", (reason) => {
+      captureException(reason);
+    });
+  }
+}
+
+// Deprecated: Use register() instead
+export function init(options) {
+  console.warn("WatchForge SDK: init() is deprecated. Use register() instead.");
+  return register(options);
+}
+
+export function captureException(error, context = {}) {
+  if (!DSN) return;
+
+  const stacktrace = buildStacktraceFromError(error);
+
+  const event = {
+    event_id: generateEventId(),
+    level: "error",
+    environment: APP_ENV,
+    message: error?.message || String(error),
+    stacktrace: stacktrace || error?.stack,
+    timestamp: new Date().toISOString(),
+    platform: isBrowser ? "javascript" : "node",
+  };
+  
+  // Add release if set
+  if (RELEASE) {
+    event.release = RELEASE;
+  }
+  
+  // Add context
+  if (context.user) {
+    event.user = context.user;
+  }
+  if (context.request) {
+    event.request = context.request;
+  }
+  if (context.tags) {
+    event.tags = context.tags;
+  }
+  if (context.extra) {
+    event.extra = context.extra;
+  }
+  // In browser, auto-populate basic request + URL tags if not provided
+  if (isBrowser) {
+    const url = typeof window !== "undefined" ? window.location.href : undefined;
+    const referrer =
+      typeof document !== "undefined" ? document.referrer || undefined : undefined;
+    if (!event.request && url) {
+      event.request = {
+        url,
+        method: "GET",
+        headers: {},
+        query: {},
+        body: undefined,
+      };
+    }
+    event.tags = {
+      ...(event.tags || {}),
+      url: url || (event.tags && event.tags.url),
+      referrer: referrer || (event.tags && event.tags.referrer),
+    };
+  }
+  // Attach runtime + environment contexts (Sentry-like)
+  const runtime = getRuntimeContext();
+  const browser = getBrowserContext();
+  const os = getOsContext();
+  const device = getDeviceContext();
+
+  event.contexts = {
+    ...(context.contexts || {}),
+    ...(runtime ? { runtime } : {}),
+    ...(browser ? { browser } : {}),
+    ...(os ? { os } : {}),
+    ...(device ? { device } : {}),
+  };
+
+  // Attach breadcrumbs (copied snapshot so later mutations don't affect this event)
+  const bcs = getBreadcrumbsSnapshot();
+  if (bcs.length > 0) {
+    event.breadcrumbs = bcs;
+  }
+  
+  if (DEBUG) {
+    console.log("WatchForge SDK - Capturing exception:", event);
+  }
+  
+  sendEvent(DSN, event);
+}
+
+export function captureMessage(message, level = "info", context = {}) {
+  if (!DSN) return;
+
+  const event = {
+    event_id: generateEventId(),
+    level,
+    environment: APP_ENV,
+    message,
+    timestamp: new Date().toISOString(),
+    platform: isBrowser ? "javascript" : "node",
+  };
+  
+  // Add release if set
+  if (RELEASE) {
+    event.release = RELEASE;
+  }
+  
+  // Add context
+  if (context.user) {
+    event.user = context.user;
+  }
+  if (context.request) {
+    event.request = context.request;
+  }
+  if (context.tags) {
+    event.tags = context.tags;
+  }
+  if (context.extra) {
+    event.extra = context.extra;
+  }
+  if (isBrowser) {
+    const url = typeof window !== "undefined" ? window.location.href : undefined;
+    const referrer =
+      typeof document !== "undefined" ? document.referrer || undefined : undefined;
+    if (!event.request && url) {
+      event.request = {
+        url,
+        method: "GET",
+        headers: {},
+        query: {},
+        body: undefined,
+      };
+    }
+    event.tags = {
+      ...(event.tags || {}),
+      url: url || (event.tags && event.tags.url),
+      referrer: referrer || (event.tags && event.tags.referrer),
+    };
+  }
+  // Attach runtime + environment contexts
+  const runtime = getRuntimeContext();
+  const browser = getBrowserContext();
+  const os = getOsContext();
+  const device = getDeviceContext();
+
+  event.contexts = {
+    ...(context.contexts || {}),
+    ...(runtime ? { runtime } : {}),
+    ...(browser ? { browser } : {}),
+    ...(os ? { os } : {}),
+    ...(device ? { device } : {}),
+  };
+
+  const bcs = getBreadcrumbsSnapshot();
+  if (bcs.length > 0) {
+    event.breadcrumbs = bcs;
+  }
+  
+  if (DEBUG) {
+    console.log("WatchForge SDK - Capturing message:", event);
+  }
+  
+  sendEvent(DSN, event);
+}
+
+// Generate unique event ID
+function generateEventId() {
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
+    const r = (Math.random() * 16) | 0;
+    const v = c === "x" ? r : (r & 0x3) | 0x8;
+    return v.toString(16);
+  });
+}

package/src/express.js

@@ -0,0 +1,77 @@
+/**
+ * Express.js integration for WatchForge SDK
+ *
+ * Usage:
+ *   import express from "express";
+ *   import { register } from "@watchforge/browser";
+ *   import { expressMiddleware } from "@watchforge/browser/express";
+ *
+ *   register({ dsn: "...", app_env: "production" });
+ *   app.use(express.json());
+ *   app.use(expressMiddleware());
+ */
+
+import { captureException } from "./client.js";
+
+export function expressMiddleware() {
+  return function (err, req, res, next) {
+    // Extract IP address
+    const ip =
+      req.ip ||
+      req.connection?.remoteAddress ||
+      req.socket?.remoteAddress ||
+      (req.connection?.socket ? req.connection.socket.remoteAddress : null) ||
+      req.headers["x-forwarded-for"]?.split(",")[0]?.trim() ||
+      req.headers["x-real-ip"] ||
+      null;
+
+    // Build user context
+    const user = req.user
+      ? {
+          id: String(req.user.id),
+          email: req.user.email || null,
+          username: req.user.username || null,
+          ip_address: ip,
+        }
+      : null;
+
+    // Build request context (matches backend's request data schema)
+    const request = {
+      url: `${req.protocol}://${req.get("host")}${req.originalUrl || req.url}`,
+      method: req.method,
+      headers: sanitizeHeaders(req.headers),
+      query: req.query || {},
+      body: req.body || {},
+      ip: ip,
+    };
+
+    // Capture exception with rich API-level context
+    captureException(err, {
+      user,
+      request,
+      tags: {
+        framework: "express",
+        route: req.route?.path || req.path,
+        status_code: res && res.statusCode,
+      },
+      extra: {
+        params: req.params || {},
+      },
+    });
+
+    // Call next to continue error handling
+    next(err);
+  };
+}
+
+function sanitizeHeaders(headers) {
+  const sanitized = {};
+  for (const [key, value] of Object.entries(headers)) {
+    const lowerKey = key.toLowerCase();
+    // Exclude sensitive headers
+    if (!["authorization", "cookie", "x-csrftoken", "x-api-key"].includes(lowerKey)) {
+      sanitized[key] = value;
+    }
+  }
+  return sanitized;
+}

package/src/index.js

@@ -0,0 +1,12 @@
+// Export main functions
+export { register, captureException, captureMessage } from "./client.js";
+
+// Export deprecated init for backward compatibility
+export { init } from "./client.js";
+
+// Export tracing functions
+export { startTransaction, getCurrentTransaction, finishTransaction, Transaction, Span } from "./tracing.js";
+
+// Export framework integrations
+export { expressMiddleware } from "./express.js";
+export { ErrorBoundary } from "./react.js";