@watchforge/browser 0.1.21 → 0.1.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@watchforge/browser",
-  "version": "0.1.21",
+  "version": "0.1.23",
   "main": "./src/index.js",
   "types": "./src/index.d.ts",
   "description": "WatchForge JavaScript SDK for browser JavaScript, Next.js, React, Node.js, and Express.js",

package/src/client.js

@@ -627,7 +627,7 @@ function setupBrowserInstrumentation() {
   }
 }
 
-import { initTracing } from "./tracing.js";
+import { getCurrentTransaction, initTracing, setupBrowserTracing } from "./tracing.js";
 
 async function buildEventContexts(context = {}) {
   const runtime = getRuntimeContext();
@@ -661,12 +661,16 @@ export function register({
   blockClass = "rr-block",
   ignoreClass = "rr-ignore",
   maskTextClass = "rr-mask",
+  inlineImages = true,
+  inlineStylesheet = true,
+  collectFonts = true,
   captureConsoleErrors = true,
   captureResourceErrors = true,
   captureFailedRequests = true,
   captureNodeWarnings = false,
   captureNodeMultipleResolves = false,
   projectRoot = null,
+  tracesSampleRate = 1,
 }) {
   const nextBrowserRegisterKey = isBrowser
     ? JSON.stringify({
@@ -680,6 +684,9 @@ export function register({
         blockClass,
         ignoreClass,
         maskTextClass,
+        inlineImages,
+        inlineStylesheet,
+        collectFonts,
         captureConsoleErrors,
         captureResourceErrors,
         captureFailedRequests,
@@ -705,7 +712,7 @@ export function register({
   );
   
   // Initialize tracing
-  initTracing(dsn, app_env, debug);
+  initTracing(dsn, app_env, debug, tracesSampleRate);
   
   if (DEBUG) {
     // Parse DSN to show API URL in debug
@@ -730,6 +737,7 @@ export function register({
   if (isBrowser) {
     browserRegisterKey = nextBrowserRegisterKey;
     setupBrowserInstrumentation();
+    setupBrowserTracing(getPageContext);
     replayInitPromise = initReplay({
       replaysSessionSampleRate,
       replaysOnErrorSampleRate,
@@ -737,6 +745,9 @@ export function register({
       blockClass,
       ignoreClass,
       maskTextClass,
+      inlineImages,
+      inlineStylesheet,
+      collectFonts,
       debug,
     });
   }
@@ -822,6 +833,7 @@ export async function captureException(error, context = {}) {
     );
   }
 
+  const currentTransaction = getCurrentTransaction();
   const event = {
     event_id: generateEventId(),
     level: "error",
@@ -833,6 +845,11 @@ export async function captureException(error, context = {}) {
     sdk: getSdkMetadata(),
   };
 
+  if (currentTransaction?.trace_id) {
+    event.trace_id = currentTransaction.trace_id;
+    event.transaction = currentTransaction.transaction;
+  }
+
   if (isBrowser && replayInitPromise) {
     try {
       await replayInitPromise;

package/src/index.d.ts

@@ -9,6 +9,9 @@ export interface WatchForgeRegisterOptions {
   blockClass?: string;
   ignoreClass?: string;
   maskTextClass?: string;
+  inlineImages?: boolean;
+  inlineStylesheet?: boolean;
+  collectFonts?: boolean;
   captureConsoleErrors?: boolean;
   captureResourceErrors?: boolean;
   captureFailedRequests?: boolean;

package/src/replay.js

@@ -13,6 +13,9 @@ let options = {
   blockClass: "rr-block",
   ignoreClass: "rr-ignore",
   maskTextClass: "rr-mask",
+  inlineImages: true,
+  inlineStylesheet: true,
+  collectFonts: true,
 };
 let stopRecording = null;
 let events = [];
@@ -112,6 +115,9 @@ export async function initReplay(config = {}) {
         tel: true,
         text: Boolean(options.maskAllInputs),
       },
+      inlineImages: options.inlineImages !== false,
+      inlineStylesheet: options.inlineStylesheet !== false,
+      collectFonts: options.collectFonts !== false,
     });
   } catch (error) {
     if (options.debug) {
@@ -172,7 +178,7 @@ export function flushReplayForEvent(dsn, eventId) {
     events,
     sdk: {
       name: "@watchforge/browser",
-      version: "0.1.12",
+      version: "0.1.22",
     },
   };
 

package/src/tracing.js

@@ -3,14 +3,31 @@
 let DSN = null;
 let APP_ENV = "production";
 let DEBUG = false;
+let TRACES_SAMPLE_RATE = 1;
 
 // Active transaction stack (for nested transactions)
 const transactionStack = [];
-
-export function initTracing(dsn, environment = "production", debug = false) {
+let activePageTransaction = null;
+let browserTracingInstalled = false;
+let navigationFinishTimer = null;
+
+export function initTracing(
+  dsn,
+  environment = "production",
+  debug = false,
+  tracesSampleRate = 1
+) {
   DSN = dsn;
   APP_ENV = environment;
   DEBUG = debug;
+  TRACES_SAMPLE_RATE =
+    typeof tracesSampleRate === "number" && tracesSampleRate >= 0 && tracesSampleRate <= 1
+      ? tracesSampleRate
+      : 1;
+}
+
+function shouldSampleTrace() {
+  return TRACES_SAMPLE_RATE >= 1 || Math.random() < TRACES_SAMPLE_RATE;
 }
 
 class Span {
@@ -250,4 +267,73 @@ export function finishTransaction(status = "ok") {
   return null;
 }
 
+function endPageTransaction(status = "ok") {
+  if (navigationFinishTimer) {
+    clearTimeout(navigationFinishTimer);
+    navigationFinishTimer = null;
+  }
+  if (!activePageTransaction) return;
+  activePageTransaction.finish(status);
+  if (transactionStack[transactionStack.length - 1] === activePageTransaction) {
+    transactionStack.pop();
+  }
+  activePageTransaction = null;
+}
+
+function beginPageTransaction(op, getPageContext) {
+  if (!shouldSampleTrace()) return null;
+
+  const page = typeof getPageContext === "function" ? getPageContext() : null;
+  const path = page?.pathname || (typeof window !== "undefined" ? window.location.pathname : "/");
+  const name = page?.title || (typeof document !== "undefined" ? document.title : path) || path;
+  const txn = startTransaction(path, name, op);
+  txn.setRequest({
+    url: page?.url || (typeof window !== "undefined" ? window.location.href : path),
+    method: "GET",
+  });
+  activePageTransaction = txn;
+  return txn;
+}
+
+function schedulePageTransactionFinish(delayMs = 5000) {
+  if (navigationFinishTimer) clearTimeout(navigationFinishTimer);
+  navigationFinishTimer = setTimeout(() => {
+    endPageTransaction();
+    navigationFinishTimer = null;
+  }, delayMs);
+}
+
+export function setupBrowserTracing(getPageContext) {
+  if (typeof window === "undefined" || browserTracingInstalled) return;
+  browserTracingInstalled = true;
+
+  beginPageTransaction("pageload", getPageContext);
+
+  if (document.readyState === "complete") {
+    endPageTransaction();
+  } else {
+    window.addEventListener("load", () => endPageTransaction(), { once: true });
+  }
+
+  const onNavigation = () => {
+    endPageTransaction();
+    if (!beginPageTransaction("navigation", getPageContext)) return;
+    schedulePageTransactionFinish();
+  };
+
+  const originalPushState = history.pushState;
+  history.pushState = function (...args) {
+    originalPushState.apply(history, args);
+    onNavigation();
+  };
+
+  const originalReplaceState = history.replaceState;
+  history.replaceState = function (...args) {
+    originalReplaceState.apply(history, args);
+    onNavigation();
+  };
+
+  window.addEventListener("hashchange", onNavigation);
+}
+
 export { Transaction, Span };