@watchforge/browser 0.1.3 → 0.1.5

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,
+  };
+}

package/src/stacktrace.js

@@ -12,8 +12,7 @@ const isNode =
 const LIBRARY_PATH_PATTERNS = [
   "/node_modules/",
   "node_modules\\",
-  "/webpack/",
-  "webpack-internal://",
+  "/webpack/runtime/",
 ];
 
 function isLibraryPath(filePath) {
@@ -25,7 +24,7 @@ function parseStackLine(line) {
   const trimmed = line.trim();
   if (!trimmed.startsWith("at ")) return null;
 
-  const withFn = trimmed.match(/^at\s+(.*?)\s+\((.*?):(\d+):(\d+)\)$/);
+  const withFn = trimmed.match(/^at\s+(?:async\s+)?(.*?)\s+\((.*?):(\d+):(\d+)\)$/);
   if (withFn) {
     return {
       function: withFn[1] || "<anonymous>",
@@ -35,7 +34,7 @@ function parseStackLine(line) {
     };
   }
 
-  const withoutFn = trimmed.match(/^at\s+(.*?):(\d+):(\d+)$/);
+  const withoutFn = trimmed.match(/^at\s+(?:async\s+)?(.*?):(\d+):(\d+)$/);
   if (withoutFn) {
     return {
       function: "<anonymous>",
@@ -110,15 +109,45 @@ function applySourceContext(frame, sourceLines, lineno) {
     .map((l) => l.replace(/\r$/, ""));
 }
 
+function normalizeSourcePath(source) {
+  if (!source) return "";
+
+  return String(source)
+    .replace(/^webpack-internal:\/\/\/?/, "")
+    .replace(/^webpack:\/\/(?:\([^)]*\)\/)?/, "")
+    .replace(/^webpack:\/\/[^/]+\//, "")
+    .replace(/^\([^)]*\)\//, "")
+    .replace(/^file:\/\//, "")
+    .split("?")[0]
+    .split("#")[0]
+    .replace(/\\/g, "/")
+    .replace(/^\/+/, "")
+    .replace(/^\.\//, "");
+}
+
+function sourceMatchesFrame(source, framePath) {
+  const normalizedSource = normalizeSourcePath(source);
+  const normalizedFrame = normalizeSourcePath(framePath);
+  if (!normalizedSource || !normalizedFrame) return false;
+
+  return (
+    normalizedSource === normalizedFrame ||
+    normalizedSource.endsWith(`/${normalizedFrame}`) ||
+    normalizedFrame.endsWith(`/${normalizedSource}`)
+  );
+}
+
 let nodeModulesPromise = null;
+const importNodeBuiltin = (specifier) =>
+  new Function("specifier", "return import(specifier)")(specifier);
 
 function getNodeModules() {
   if (!isNode) return Promise.resolve(null);
   if (!nodeModulesPromise) {
     nodeModulesPromise = (async () => {
       try {
-        const { createRequire } = await import("module");
-        const { fileURLToPath } = await import("url");
+        const { createRequire } = await importNodeBuiltin("module");
+        const { fileURLToPath } = await importNodeBuiltin("url");
         const req = createRequire(fileURLToPath(import.meta.url));
         return {
           fs: req("fs"),
@@ -209,10 +238,159 @@ async function fetchBrowserSourceLines(absPath) {
   }
 }
 
+async function getSourceMapConsumer() {
+  try {
+    const mod = await import("source-map-js");
+    return mod.SourceMapConsumer || mod.default?.SourceMapConsumer || null;
+  } catch {
+    return null;
+  }
+}
+
+function getSourceMappingUrl(sourceText) {
+  const match = sourceText.match(/\/\/# sourceMappingURL=([^\s]+)\s*$/m);
+  return match?.[1] || null;
+}
+
+async function fetchText(url) {
+  const response = await fetch(url, { credentials: "same-origin" });
+  if (!response.ok) return null;
+  const text = await response.text();
+  return text.length <= MAX_SOURCE_FILE_BYTES * 10 ? text : null;
+}
+
+async function fetchBrowserSourceMap(absPath) {
+  if (!isBrowser || !absPath) return null;
+  if (!absPath.startsWith("http://") && !absPath.startsWith("https://") && !absPath.startsWith("/")) {
+    return null;
+  }
+
+  try {
+    const scriptUrl = new URL(absPath, window.location.href);
+    if (scriptUrl.origin !== window.location.origin) return null;
+
+    const scriptText = await fetchText(scriptUrl.href);
+    if (!scriptText) return null;
+
+    const sourceMappingUrl = getSourceMappingUrl(scriptText);
+    if (!sourceMappingUrl) return null;
+
+    const mapUrl = new URL(sourceMappingUrl, scriptUrl.href);
+    if (mapUrl.origin !== window.location.origin && !sourceMappingUrl.startsWith("data:")) {
+      return null;
+    }
+
+    if (sourceMappingUrl.startsWith("data:")) {
+      const encoded = sourceMappingUrl.split(",", 2)[1];
+      if (!encoded) return null;
+      const decoded = decodeURIComponent(escape(atob(encoded)));
+      return JSON.parse(decoded);
+    }
+
+    const mapText = await fetchText(mapUrl.href);
+    return mapText ? JSON.parse(mapText) : null;
+  } catch {
+    return null;
+  }
+}
+
+async function enrichFrameWithSourceMap(frame) {
+  const sourceMap = await fetchBrowserSourceMap(frame.abs_path);
+  if (!sourceMap) return false;
+
+  try {
+    const SourceMapConsumer = await getSourceMapConsumer();
+    if (!SourceMapConsumer) return false;
+
+    const consumer = await new SourceMapConsumer(sourceMap);
+    let source = null;
+    let lineno = frame.lineno;
+    let colno = frame.colno;
+
+    if (frame.lineno && frame.colno != null) {
+      const original = consumer.originalPositionFor({
+        line: frame.lineno,
+        column: frame.colno,
+      });
+      if (original?.source && original?.line) {
+        source = original.source;
+        lineno = original.line;
+        colno = original.column ?? frame.colno;
+      }
+    }
+
+    if (!source) {
+      source = sourceMap.sources?.find((candidate) =>
+        sourceMatchesFrame(candidate, frame.abs_path)
+      );
+    }
+
+    if (!source || !lineno) {
+      consumer.destroy?.();
+      return false;
+    }
+
+    const content =
+      consumer.sourceContentFor?.(source, true) ||
+      sourceMap.sourcesContent?.[sourceMap.sources.indexOf(source)];
+
+    consumer.destroy?.();
+
+    if (!content) return false;
+
+    frame.abs_path = source;
+    frame.filename = normalizeSourcePath(source).split("/").pop() || frame.filename;
+    frame.lineno = lineno;
+    frame.colno = colno;
+    applySourceContext(frame, content.split("\n"), lineno);
+    return Boolean(frame.context_line);
+  } catch {
+    return false;
+  }
+}
+
+function getSourceContentFromWebpackFrame(frame) {
+  const globalObject = typeof globalThis !== "undefined" ? globalThis : window;
+  const webpackChunks =
+    Object.values(globalObject).find(
+      (value) =>
+        Array.isArray(value) &&
+        value.some((item) => Array.isArray(item) && item.length >= 2)
+    ) || [];
+
+  const framePath = normalizeSourcePath(frame.abs_path);
+  if (!framePath || !Array.isArray(webpackChunks)) return null;
+
+  for (const chunk of webpackChunks) {
+    const modules = Array.isArray(chunk) ? chunk[1] : null;
+    if (!modules || typeof modules !== "object") continue;
+
+    for (const [moduleId, factory] of Object.entries(modules)) {
+      if (!sourceMatchesFrame(moduleId, framePath)) continue;
+      const source = String(factory);
+      return source.includes("\n") ? source.split("\n") : null;
+    }
+  }
+
+  return null;
+}
+
 async function enrichFrameWithBrowserSource(frame) {
   if (!frame.in_app || !frame.lineno) return;
+
+  const webpackLines = getSourceContentFromWebpackFrame(frame);
+  if (webpackLines) {
+    applySourceContext(frame, webpackLines, frame.lineno);
+    if (frame.context_line) return;
+  }
+
   const lines = await fetchBrowserSourceLines(frame.abs_path);
-  if (lines) applySourceContext(frame, lines, frame.lineno);
+  if (lines) {
+    applySourceContext(frame, lines, frame.lineno);
+    if (frame.context_line) return;
+  }
+
+  await enrichFrameWithSourceMap(frame);
 }
 
 export async function enrichStacktraceAsync(stacktrace) {

package/src/tracing.d.ts

@@ -0,0 +1,39 @@
+export interface Span {
+  span_id?: string;
+  op?: string;
+  description?: string;
+  start_timestamp?: string;
+  finish_timestamp?: string | null;
+  duration_ms?: number;
+  status?: string;
+  data?: Record<string, unknown>;
+  tags?: Record<string, unknown>;
+  [key: string]: unknown;
+}
+
+export interface Transaction {
+  trace_id?: string;
+  transaction?: string;
+  transaction_name?: string;
+  op?: string;
+  status?: string;
+  spans?: Span[];
+  data?: Record<string, unknown>;
+  tags?: Record<string, unknown>;
+  [key: string]: unknown;
+}
+
+export function initTracing(
+  dsn: string,
+  environment?: string,
+  debug?: boolean
+): void;
+
+export function startTransaction(
+  transaction: string,
+  transactionName?: string,
+  op?: string
+): Transaction;
+
+export function getCurrentTransaction(): Transaction | null;
+export function finishTransaction(status?: string): void;

package/src/transport.js

@@ -2,9 +2,12 @@
 const isBrowser = typeof window !== 'undefined';
 const isNode = typeof process !== 'undefined' && process.versions && process.versions.node;
 
-// Lazy-load Node.js require function for ES modules
+// Lazy-load Node.js require function for ES modules. Use Function-based import
+// so browser bundlers do not try to resolve Node built-ins like "module".
 let nodeRequire = null;
 let nodeRequirePromise = null;
+const importNodeBuiltin = (specifier) =>
+  new Function("specifier", "return import(specifier)")(specifier);
 
 function getNodeRequire() {
   if (!isNode) return Promise.resolve(null);
@@ -14,8 +17,8 @@ function getNodeRequire() {
   if (!nodeRequirePromise) {
     nodeRequirePromise = (async () => {
       try {
-        const { createRequire } = await import('module');
-        const { fileURLToPath } = await import('url');
+        const { createRequire } = await importNodeBuiltin('module');
+        const { fileURLToPath } = await importNodeBuiltin('url');
         nodeRequire = createRequire(fileURLToPath(import.meta.url));
         return nodeRequire;
       } catch (e) {
@@ -47,6 +50,7 @@ function parseDsn(dsn) {
         host,
         projectId,
         apiUrl: `${finalScheme}://${host}/api/ingestion/events/`,
+        replayUrl: `${finalScheme}://${host}/api/ingestion/replays/`,
       };
     }
   } catch (e) {
@@ -79,6 +83,20 @@ function getApiUrl(dsn) {
   return isBrowser ? "/api/ingestion/events/" : "http://127.0.0.1:8001/api/ingestion/events/";
 }
 
+function getReplayUrl(dsn) {
+  const apiUrl = getApiUrl(dsn);
+  if (apiUrl.endsWith("/events/")) {
+    return apiUrl.replace(/\/events\/$/, "/replays/");
+  }
+
+  const parsed = parseDsn(dsn);
+  if (parsed) {
+    return parsed.replayUrl;
+  }
+
+  return isBrowser ? "/api/ingestion/replays/" : "http://127.0.0.1:8001/api/ingestion/replays/";
+}
+
 export function sendEvent(dsn, payload) {
   const apiUrl = getApiUrl(dsn);
   
@@ -189,3 +207,27 @@ export function sendEvent(dsn, payload) {
     });
   }
 }
+
+export function sendReplay(dsn, payload) {
+  const apiUrl = getReplayUrl(dsn);
+
+  if (isBrowser) {
+    fetch(apiUrl, {
+      method: "POST",
+      headers: {
+        Authorization: `DSN ${dsn}`,
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(payload),
+      keepalive: false,
+    }).catch((error) => {
+      console.error("WatchForge SDK - Failed to send replay:", error);
+    });
+    return;
+  }
+
+  if (isNode) {
+    // Replays are browser-only, but keep this no-op explicit for framework code paths.
+    return;
+  }
+}