@watchforge/browser 0.1.1 → 0.1.4

package/src/client.js

@@ -1,4 +1,19 @@
 import { sendEvent, parseDsn } from "./transport.js";
+import {
+  buildStacktraceFromError,
+  enrichStacktraceAsync,
+} from "./stacktrace.js";
+import {
+  getSdkMetadata,
+  getPageContext,
+  getPerformanceContext,
+  getNodeServerContext,
+} from "./contexts.js";
+import {
+  flushReplayForEvent,
+  getReplayContext,
+  initReplay,
+} from "./replay.js";
 
 let DSN = null;
 let APP_ENV = "production";
@@ -14,7 +29,7 @@ const isNode =
 const MAX_BREADCRUMBS = 100;
 let breadcrumbs = [];
 
-function addBreadcrumb(breadcrumb) {
+export function addBreadcrumb(breadcrumb) {
   const entry = {
     level: "info",
     category: "log",
@@ -145,7 +160,7 @@ function setupBrowserInstrumentation() {
       message: String(msg),
       data: { url, line, col },
     });
-    captureException(error || msg);
+    void captureException(error || msg);
   };
 
   window.onunhandledrejection = function (event) {
@@ -156,7 +171,7 @@ function setupBrowserInstrumentation() {
       message: String(event.reason),
       data: {},
     });
-    captureException(event.reason);
+    void captureException(event.reason);
   };
 
   // Console breadcrumbs
@@ -340,78 +355,40 @@ function setupBrowserInstrumentation() {
   }
 }
 
-// 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;
-  }
+import { initTracing } from "./tracing.js";
 
-  // Backend expects oldest frame first, newest last; JS stacks are newest first,
-  // so we reverse to be consistent with Python-style traces.
-  frames.reverse();
+async function buildEventContexts(context = {}) {
+  const runtime = getRuntimeContext();
+  const browser = getBrowserContext();
+  const os = getOsContext();
+  const device = getDeviceContext();
+  const page = getPageContext();
+  const performanceCtx = getPerformanceContext();
+  const server = await getNodeServerContext();
 
-  return { frames };
+  return {
+    ...(context.contexts || {}),
+    ...(runtime ? { runtime } : {}),
+    ...(browser ? { browser } : {}),
+    ...(os ? { os } : {}),
+    ...(device ? { device } : {}),
+    ...(page ? { page } : {}),
+    ...(performanceCtx ? { performance: performanceCtx } : {}),
+    ...(server ? { server } : {}),
+  };
 }
 
-import { initTracing } from "./tracing.js";
-
 export function register({
   dsn,
   app_env = "production",
   release = null,
   debug = false,
+  replaysSessionSampleRate = 0,
+  replaysOnErrorSampleRate = 0,
+  maskAllInputs = true,
+  blockClass = "rr-block",
+  ignoreClass = "rr-ignore",
+  maskTextClass = "rr-mask",
 }) {
   DSN = dsn;
   APP_ENV = app_env;
@@ -443,16 +420,25 @@ export function register({
   // Browser: Set up full instrumentation (errors, breadcrumbs, HTTP, navigation)
   if (isBrowser) {
     setupBrowserInstrumentation();
+    initReplay({
+      replaysSessionSampleRate,
+      replaysOnErrorSampleRate,
+      maskAllInputs,
+      blockClass,
+      ignoreClass,
+      maskTextClass,
+      debug,
+    });
   }
   
   // Node.js: Set up process error handlers
   if (isNode) {
     process.on("uncaughtException", (error) => {
-      captureException(error);
+      void captureException(error);
     });
-    
+
     process.on("unhandledRejection", (reason) => {
-      captureException(reason);
+      void captureException(reason);
     });
   }
 }
@@ -463,10 +449,13 @@ export function init(options) {
   return register(options);
 }
 
-export function captureException(error, context = {}) {
+export async function captureException(error, context = {}) {
   if (!DSN) return;
 
-  const stacktrace = buildStacktraceFromError(error);
+  let stacktrace = buildStacktraceFromError(error);
+  if (stacktrace) {
+    stacktrace = await enrichStacktraceAsync(stacktrace);
+  }
 
   const event = {
     event_id: generateEventId(),
@@ -476,14 +465,19 @@ export function captureException(error, context = {}) {
     stacktrace: stacktrace || error?.stack,
     timestamp: new Date().toISOString(),
     platform: isBrowser ? "javascript" : "node",
+    sdk: getSdkMetadata(),
   };
-  
-  // Add release if set
+
+  const replay = flushReplayForEvent(DSN, event.event_id);
+  if (replay) {
+    event.replay_id = replay.replay_id;
+    event.session_id = replay.session_id;
+  }
+
   if (RELEASE) {
     event.release = RELEASE;
   }
-  
-  // Add context
+
   if (context.user) {
     event.user = context.user;
   }
@@ -496,11 +490,11 @@ export function captureException(error, context = {}) {
   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;
+    const page = getPageContext();
+    const url = page?.url;
+    const referrer = page?.referrer;
     if (!event.request && url) {
       event.request = {
         url,
@@ -512,38 +506,31 @@ export function captureException(error, context = {}) {
     }
     event.tags = {
       ...(event.tags || {}),
-      url: url || (event.tags && event.tags.url),
-      referrer: referrer || (event.tags && event.tags.referrer),
+      url: url || event.tags?.url,
+      referrer: referrer || event.tags?.referrer,
+      page_title: page?.title || event.tags?.page_title,
     };
   }
-  // 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 } : {}),
-  };
+  event.contexts = await buildEventContexts(context);
+  const replayContext = getReplayContext();
+  if (replayContext) {
+    event.contexts.replay = replayContext;
+  }
 
-  // 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 = {}) {
+export async function captureMessage(message, level = "info", context = {}) {
   if (!DSN) return;
 
   const event = {
@@ -553,14 +540,13 @@ export function captureMessage(message, level = "info", context = {}) {
     message,
     timestamp: new Date().toISOString(),
     platform: isBrowser ? "javascript" : "node",
+    sdk: getSdkMetadata(),
   };
-  
-  // Add release if set
+
   if (RELEASE) {
     event.release = RELEASE;
   }
-  
-  // Add context
+
   if (context.user) {
     event.user = context.user;
   }
@@ -573,10 +559,11 @@ export function captureMessage(message, level = "info", context = {}) {
   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;
+    const page = getPageContext();
+    const url = page?.url;
+    const referrer = page?.referrer;
     if (!event.request && url) {
       event.request = {
         url,
@@ -588,33 +575,23 @@ export function captureMessage(message, level = "info", context = {}) {
     }
     event.tags = {
       ...(event.tags || {}),
-      url: url || (event.tags && event.tags.url),
-      referrer: referrer || (event.tags && event.tags.referrer),
+      url: url || event.tags?.url,
+      referrer: referrer || event.tags?.referrer,
+      page_title: page?.title || event.tags?.page_title,
     };
   }
-  // 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 } : {}),
-  };
+  event.contexts = await buildEventContexts(context);
 
   const bcs = getBreadcrumbsSnapshot();
   if (bcs.length > 0) {
     event.breadcrumbs = bcs;
   }
-  
+
   if (DEBUG) {
     console.log("WatchForge SDK - Capturing message:", event);
   }
-  
+
   sendEvent(DSN, event);
 }
 

package/src/contexts.js

@@ -0,0 +1,110 @@
+/**
+ * Event context builders (browser, Node, performance).
+ */
+
+const isBrowser = typeof window !== "undefined";
+const isNode =
+  typeof process !== "undefined" && process.versions && process.versions.node;
+
+export const SDK_NAME = "@watchforge/browser";
+export const SDK_VERSION = "0.1.1";
+
+export function getSdkMetadata() {
+  return {
+    name: SDK_NAME,
+    version: SDK_VERSION,
+  };
+}
+
+export function getPageContext() {
+  if (!isBrowser) return null;
+
+  const loc = window.location;
+  return {
+    url: loc.href,
+    path: loc.pathname,
+    search: loc.search,
+    hash: loc.hash,
+    referrer: typeof document !== "undefined" ? document.referrer || null : null,
+    title: typeof document !== "undefined" ? document.title || null : null,
+  };
+}
+
+export function getPerformanceContext() {
+  if (!isBrowser || typeof performance === "undefined") return null;
+
+  const ctx = {};
+
+  try {
+    const nav = performance.getEntriesByType("navigation")[0];
+    if (nav) {
+      ctx.navigation = {
+        type: nav.type,
+        dom_content_loaded_ms: Math.round(nav.domContentLoadedEventEnd),
+        load_event_ms: Math.round(nav.loadEventEnd),
+        dom_interactive_ms: Math.round(nav.domInteractive),
+        response_end_ms: Math.round(nav.responseEnd),
+        transfer_size: nav.transferSize ?? null,
+      };
+    }
+  } catch {
+    // ignore
+  }
+
+  try {
+    const resources = performance
+      .getEntriesByType("resource")
+      .slice(-20)
+      .map((r) => ({
+        name: r.name?.slice(0, 200),
+        initiator_type: r.initiatorType,
+        duration_ms: Math.round(r.duration),
+        transfer_size: r.transferSize ?? null,
+      }));
+    if (resources.length) {
+      ctx.resources = resources;
+    }
+  } catch {
+    // ignore
+  }
+
+  return Object.keys(ctx).length ? ctx : null;
+}
+
+let nodeOsPromise = null;
+
+async function getNodeOs() {
+  if (!isNode) return null;
+  if (!nodeOsPromise) {
+    nodeOsPromise = import("os").catch(() => null);
+  }
+  return nodeOsPromise;
+}
+
+export async function getNodeServerContext() {
+  if (!isNode) return null;
+
+  const os = await getNodeOs();
+  if (!os) return null;
+
+  const mem = process.memoryUsage();
+
+  return {
+    name: os.hostname(),
+    os: {
+      name: os.platform(),
+      version: os.release(),
+      arch: os.arch(),
+    },
+    runtime: {
+      name: "node",
+      version: process.version,
+    },
+    process: {
+      pid: process.pid,
+      uptime_seconds: Math.round(process.uptime()),
+      memory_rss_mb: Math.round(mem.rss / 1024 / 1024),
+      memory_heap_used_mb: Math.round(mem.heapUsed / 1024 / 1024),
+    },
+  };
+}

package/src/express.js

@@ -13,6 +13,16 @@
 
 import { captureException } from "./client.js";
 
+/**
+ * Optional first middleware — records request start time for duration_ms on errors.
+ */
+export function expressRequestMiddleware() {
+  return function (req, _res, next) {
+    req._watchforgeStart = Date.now();
+    next();
+  };
+}
+
 export function expressMiddleware() {
   return function (err, req, res, next) {
     // Extract IP address
@@ -45,17 +55,30 @@ export function expressMiddleware() {
       ip: ip,
     };
 
-    // Capture exception with rich API-level context
-    captureException(err, {
+    const durationMs =
+      typeof req._watchforgeStart === "number"
+        ? Date.now() - req._watchforgeStart
+        : null;
+
+    void captureException(err, {
       user,
       request,
       tags: {
         framework: "express",
         route: req.route?.path || req.path,
         status_code: res && res.statusCode,
+        ...(durationMs != null ? { duration_ms: durationMs } : {}),
       },
       extra: {
         params: req.params || {},
+        ...(durationMs != null ? { duration_ms: durationMs } : {}),
+      },
+      contexts: {
+        express: {
+          route: req.route?.path || req.path,
+          base_url: req.baseUrl || null,
+          duration_ms: durationMs,
+        },
       },
     });
 

package/src/index.js

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

package/src/react.js

@@ -26,12 +26,18 @@ export class ErrorBoundary extends React.Component {
   }
 
   componentDidCatch(error, errorInfo) {
-    captureException(error, {
+    void captureException(error, {
       extra: {
         componentStack: errorInfo.componentStack,
       },
       tags: {
-        framework: 'react',
+        framework: "react",
+      },
+      contexts: {
+        react: {
+          framework: "react",
+          component_stack: errorInfo.componentStack || null,
+        },
       },
     });
   }

package/src/replay.js

@@ -0,0 +1,128 @@
+import { sendReplay } from "./transport.js";
+
+const isBrowser = typeof window !== "undefined";
+const MAX_BUFFER_MS = 60 * 1000;
+const MAX_EVENTS = 500;
+
+let options = {
+  replaysSessionSampleRate: 0,
+  replaysOnErrorSampleRate: 0,
+  maskAllInputs: true,
+  blockClass: "rr-block",
+  ignoreClass: "rr-ignore",
+  maskTextClass: "rr-mask",
+};
+let stopRecording = null;
+let events = [];
+let replayId = null;
+let sessionId = null;
+let startedAt = null;
+let sessionSampled = false;
+
+function uuid() {
+  if (isBrowser && crypto?.randomUUID) return crypto.randomUUID();
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+    const r = (Math.random() * 16) | 0;
+    const v = c === "x" ? r : (r & 0x3) | 0x8;
+    return v.toString(16);
+  });
+}
+
+function shouldSample(rate) {
+  const n = Number(rate || 0);
+  if (n <= 0) return false;
+  if (n >= 1) return true;
+  return Math.random() < n;
+}
+
+function trimBuffer(now = Date.now()) {
+  events = events.filter((event) => now - event.timestamp <= MAX_BUFFER_MS);
+  if (events.length > MAX_EVENTS) {
+    events = events.slice(-MAX_EVENTS);
+  }
+}
+
+export async function initReplay(config = {}) {
+  if (!isBrowser) return;
+
+  options = {
+    ...options,
+    ...config,
+  };
+
+  sessionSampled = shouldSample(options.replaysSessionSampleRate);
+  const shouldRecord = sessionSampled || Number(options.replaysOnErrorSampleRate || 0) > 0;
+
+  if (!shouldRecord || stopRecording) return;
+
+  replayId = replayId || uuid();
+  sessionId = sessionId || uuid();
+  startedAt = new Date().toISOString();
+
+  try {
+    const { record } = await import("rrweb");
+    stopRecording = record({
+      emit(event) {
+        events.push(event);
+        trimBuffer(event.timestamp || Date.now());
+      },
+      maskAllInputs: options.maskAllInputs,
+      blockClass: options.blockClass,
+      ignoreClass: options.ignoreClass,
+      maskTextClass: options.maskTextClass,
+      maskInputOptions: {
+        password: true,
+        email: true,
+        tel: true,
+        text: Boolean(options.maskAllInputs),
+      },
+    });
+  } catch (error) {
+    if (options.debug) {
+      console.warn("WatchForge SDK: failed to start replay recording", error);
+    }
+  }
+}
+
+export function getReplayContext() {
+  if (!isBrowser || !replayId || !sessionId) return null;
+  return {
+    replay_id: replayId,
+    session_id: sessionId,
+    sampled: Boolean(stopRecording),
+  };
+}
+
+export function flushReplayForEvent(dsn, eventId) {
+  if (!isBrowser || !dsn || !replayId || !sessionId || events.length === 0) {
+    return null;
+  }
+
+  if (!sessionSampled && !shouldSample(options.replaysOnErrorSampleRate)) {
+    return null;
+  }
+
+  trimBuffer();
+
+  const payload = {
+    replay_id: replayId,
+    session_id: sessionId,
+    event_id: eventId,
+    started_at: startedAt,
+    finished_at: new Date().toISOString(),
+    url: window.location.href,
+    user_agent: navigator.userAgent,
+    events,
+    sdk: {
+      name: "@watchforge/browser",
+      version: "0.1.3",
+    },
+  };
+
+  sendReplay(dsn, payload);
+  return {
+    replay_id: replayId,
+    session_id: sessionId,
+    event_count: events.length,
+  };
+}