@watchforge/browser 0.1.22 → 0.1.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@watchforge/browser",
-  "version": "0.1.22",
+  "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();
@@ -670,6 +670,7 @@ export function register({
   captureNodeWarnings = false,
   captureNodeMultipleResolves = false,
   projectRoot = null,
+  tracesSampleRate = 1,
 }) {
   const nextBrowserRegisterKey = isBrowser
     ? JSON.stringify({
@@ -711,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
@@ -736,6 +737,7 @@ export function register({
   if (isBrowser) {
     browserRegisterKey = nextBrowserRegisterKey;
     setupBrowserInstrumentation();
+    setupBrowserTracing(getPageContext);
     replayInitPromise = initReplay({
       replaysSessionSampleRate,
       replaysOnErrorSampleRate,
@@ -831,6 +833,7 @@ export async function captureException(error, context = {}) {
     );
   }
 
+  const currentTransaction = getCurrentTransaction();
   const event = {
     event_id: generateEventId(),
     level: "error",
@@ -842,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/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 };