@obtrace/browser 2.1.0 → 2.2.0

package/dist/browser/console.js

@@ -1,3 +1,4 @@
+import { SpanStatusCode } from "@opentelemetry/api";
 import { addBreadcrumb } from "./breadcrumbs";
 const LEVEL_MAP = {
     debug: "debug",
@@ -31,8 +32,23 @@ export function installConsoleCapture(tracer, sessionId) {
                         return String(v);
                     }
                 };
-                if (args.length === 1 && typeof args[0] === "object" && args[0] !== null && !Array.isArray(args[0])) {
-                    const obj = args[0];
+                const firstArg = args[0];
+                const isErrorObj = firstArg instanceof Error;
+                if (isErrorObj) {
+                    const err = firstArg;
+                    message = `${err.name}: ${err.message}`;
+                    if (err.stack)
+                        attrs["error.stack"] = err.stack.slice(0, 4096);
+                    attrs["error.type"] = err.name;
+                    for (let i = 1; i < args.length; i++) {
+                        const extra = args[i];
+                        if (typeof extra === "string" && extra.includes("\n    at ")) {
+                            attrs["error.component_stack"] = extra.slice(0, 4096);
+                        }
+                    }
+                }
+                else if (args.length === 1 && typeof firstArg === "object" && firstArg !== null && !Array.isArray(firstArg)) {
+                    const obj = firstArg;
                     message = String(obj.msg || obj.message || safeStringify(obj));
                     for (const [k, v] of Object.entries(obj)) {
                         if (k === "msg" || k === "message")
@@ -44,9 +60,18 @@ export function installConsoleCapture(tracer, sessionId) {
                 }
                 else {
                     message = args.map(a => typeof a === "string" ? a : safeStringify(a)).join(" ");
+                    if (method === "error") {
+                        for (const a of args) {
+                            if (typeof a === "string" && a.includes("\n    at ")) {
+                                attrs["error.stack"] = a.slice(0, 4096);
+                                break;
+                            }
+                        }
+                    }
                 }
                 addBreadcrumb({ timestamp: Date.now(), category: `console.${method}`, message, level, data: attrs });
-                const span = tracer.startSpan("browser.console", {
+                const spanName = (method === "error" && (isErrorObj || attrs["error.stack"])) ? "browser.error" : "browser.console";
+                const span = tracer.startSpan(spanName, {
                     attributes: {
                         "log.severity": level.toUpperCase(),
                         "log.message": message.slice(0, 1024),
@@ -54,6 +79,11 @@ export function installConsoleCapture(tracer, sessionId) {
                         ...attrs,
                     },
                 });
+                if (method === "error") {
+                    span.setStatus({ code: SpanStatusCode.ERROR, message: message.slice(0, 1024) });
+                    if (isErrorObj)
+                        span.recordException(firstArg);
+                }
                 span.end();
             }
             catch { }

package/dist/browser/errors.js

@@ -5,21 +5,25 @@ export function installBrowserErrorHooks(tracer, sessionId) {
         return () => undefined;
     }
     const onError = (ev) => {
-        addBreadcrumb({ timestamp: Date.now(), category: "error", message: ev.message || "window.error", level: "error" });
+        const message = ev.message || "window.error";
+        addBreadcrumb({ timestamp: Date.now(), category: "error", message, level: "error" });
         try {
             const breadcrumbs = getBreadcrumbs();
+            const stack = ev.error instanceof Error ? ev.error.stack || "" : "";
             const span = tracer.startSpan("browser.error", {
                 attributes: {
-                    "error.message": ev.message || "window.error",
+                    "error.message": message,
                     "error.file": ev.filename || "",
                     "error.line": ev.lineno || 0,
                     "error.column": ev.colno || 0,
+                    "error.stack": stack.slice(0, 4096),
+                    "error.type": ev.error?.constructor?.name || "Error",
                     "breadcrumbs.count": breadcrumbs.length,
                     "breadcrumbs.json": JSON.stringify(breadcrumbs.slice(-20)),
                     ...(sessionId ? { "session.id": sessionId } : {}),
                 },
             });
-            span.setStatus({ code: SpanStatusCode.ERROR, message: ev.message });
+            span.setStatus({ code: SpanStatusCode.ERROR, message });
             if (ev.error instanceof Error) {
                 span.recordException(ev.error);
             }
@@ -28,13 +32,23 @@ export function installBrowserErrorHooks(tracer, sessionId) {
         catch { }
     };
     const onRejection = (ev) => {
-        const reason = typeof ev.reason === "string" ? ev.reason : JSON.stringify(ev.reason ?? {});
+        let reason;
+        let stack = "";
+        if (ev.reason instanceof Error) {
+            reason = `${ev.reason.name}: ${ev.reason.message}`;
+            stack = ev.reason.stack || "";
+        }
+        else {
+            reason = typeof ev.reason === "string" ? ev.reason : JSON.stringify(ev.reason ?? {});
+        }
         addBreadcrumb({ timestamp: Date.now(), category: "error", message: reason, level: "error" });
         try {
             const breadcrumbs = getBreadcrumbs();
             const span = tracer.startSpan("browser.unhandledrejection", {
                 attributes: {
                     "error.message": reason,
+                    "error.stack": stack.slice(0, 4096),
+                    "error.type": ev.reason?.constructor?.name || "UnhandledRejection",
                     "breadcrumbs.count": breadcrumbs.length,
                     "breadcrumbs.json": JSON.stringify(breadcrumbs.slice(-20)),
                     ...(sessionId ? { "session.id": sessionId } : {}),

package/dist/browser/index.js

@@ -157,7 +157,12 @@ export function initBrowserSDK(config) {
     const sampleRate = config.tracesSampleRate ?? 1;
     const replaySampleRate = config.replaySampleRate ?? 1;
     const shouldReplay = Math.random() < replaySampleRate;
-    const otel = setupOtelWeb({ ...config, tracesSampleRate: sampleRate });
+    const replay = new BrowserReplayBuffer({
+        maxChunkBytes: config.replay?.maxChunkBytes ?? 480_000,
+        flushIntervalMs: config.replay?.flushIntervalMs ?? 5000,
+        sessionStorageKey: config.replay?.sessionStorageKey ?? "obtrace_session_id",
+    });
+    const otel = setupOtelWeb({ ...config, tracesSampleRate: sampleRate, sessionId: replay.sessionId });
     const tracer = otel.tracer;
     const meter = otel.meter;
     const client = new ObtraceClient({
@@ -173,11 +178,6 @@ export function initBrowserSDK(config) {
         vitals: { enabled: true, reportAllChanges: false, ...config.vitals },
         propagation: { enabled: true, ...config.propagation },
     });
-    const replay = new BrowserReplayBuffer({
-        maxChunkBytes: config.replay?.maxChunkBytes ?? 480_000,
-        flushIntervalMs: config.replay?.flushIntervalMs ?? 5000,
-        sessionStorageKey: config.replay?.sessionStorageKey ?? "obtrace_session_id",
-    });
     const recipeSteps = [];
     const cleanups = [];
     const entry = { client, sessionId: replay.sessionId, replay, config, recipeSteps, otel };

package/dist/browser_entry.bundle.js

@@ -27784,6 +27784,7 @@ function setupOtelWeb(config) {
     ...config.projectId ? { "obtrace.project_id": config.projectId } : {},
     ...config.appId ? { "obtrace.app_id": config.appId } : {},
     ...config.env ? { "obtrace.env": config.env } : {},
+    ...config.sessionId ? { "session.id": config.sessionId } : {},
     "runtime.name": "browser"
   });
   const traceExporter = new OTLPTraceExporter({
@@ -27904,21 +27905,25 @@ function installBrowserErrorHooks(tracer, sessionId) {
     return () => void 0;
   }
   const onError = (ev) => {
-    addBreadcrumb({ timestamp: Date.now(), category: "error", message: ev.message || "window.error", level: "error" });
+    const message = ev.message || "window.error";
+    addBreadcrumb({ timestamp: Date.now(), category: "error", message, level: "error" });
     try {
       const breadcrumbs = getBreadcrumbs();
+      const stack = ev.error instanceof Error ? ev.error.stack || "" : "";
       const span = tracer.startSpan("browser.error", {
         attributes: {
-          "error.message": ev.message || "window.error",
+          "error.message": message,
           "error.file": ev.filename || "",
           "error.line": ev.lineno || 0,
           "error.column": ev.colno || 0,
+          "error.stack": stack.slice(0, 4096),
+          "error.type": ev.error?.constructor?.name || "Error",
           "breadcrumbs.count": breadcrumbs.length,
           "breadcrumbs.json": JSON.stringify(breadcrumbs.slice(-20)),
           ...sessionId ? { "session.id": sessionId } : {}
         }
       });
-      span.setStatus({ code: SpanStatusCode.ERROR, message: ev.message });
+      span.setStatus({ code: SpanStatusCode.ERROR, message });
       if (ev.error instanceof Error) {
         span.recordException(ev.error);
       }
@@ -27927,13 +27932,22 @@ function installBrowserErrorHooks(tracer, sessionId) {
     }
   };
   const onRejection = (ev) => {
-    const reason = typeof ev.reason === "string" ? ev.reason : JSON.stringify(ev.reason ?? {});
+    let reason;
+    let stack = "";
+    if (ev.reason instanceof Error) {
+      reason = `${ev.reason.name}: ${ev.reason.message}`;
+      stack = ev.reason.stack || "";
+    } else {
+      reason = typeof ev.reason === "string" ? ev.reason : JSON.stringify(ev.reason ?? {});
+    }
     addBreadcrumb({ timestamp: Date.now(), category: "error", message: reason, level: "error" });
     try {
       const breadcrumbs = getBreadcrumbs();
       const span = tracer.startSpan("browser.unhandledrejection", {
         attributes: {
           "error.message": reason,
+          "error.stack": stack.slice(0, 4096),
+          "error.type": ev.reason?.constructor?.name || "UnhandledRejection",
           "breadcrumbs.count": breadcrumbs.length,
           "breadcrumbs.json": JSON.stringify(breadcrumbs.slice(-20)),
           ...sessionId ? { "session.id": sessionId } : {}
@@ -28245,8 +28259,21 @@ function installConsoleCapture(tracer, sessionId) {
             return String(v);
           }
         };
-        if (args.length === 1 && typeof args[0] === "object" && args[0] !== null && !Array.isArray(args[0])) {
-          const obj = args[0];
+        const firstArg = args[0];
+        const isErrorObj = firstArg instanceof Error;
+        if (isErrorObj) {
+          const err = firstArg;
+          message = `${err.name}: ${err.message}`;
+          if (err.stack) attrs["error.stack"] = err.stack.slice(0, 4096);
+          attrs["error.type"] = err.name;
+          for (let i = 1; i < args.length; i++) {
+            const extra = args[i];
+            if (typeof extra === "string" && extra.includes("\n    at ")) {
+              attrs["error.component_stack"] = extra.slice(0, 4096);
+            }
+          }
+        } else if (args.length === 1 && typeof firstArg === "object" && firstArg !== null && !Array.isArray(firstArg)) {
+          const obj = firstArg;
           message = String(obj.msg || obj.message || safeStringify(obj));
           for (const [k, v] of Object.entries(obj)) {
             if (k === "msg" || k === "message") continue;
@@ -28256,9 +28283,18 @@ function installConsoleCapture(tracer, sessionId) {
           }
         } else {
           message = args.map((a) => typeof a === "string" ? a : safeStringify(a)).join(" ");
+          if (method === "error") {
+            for (const a of args) {
+              if (typeof a === "string" && a.includes("\n    at ")) {
+                attrs["error.stack"] = a.slice(0, 4096);
+                break;
+              }
+            }
+          }
         }
         addBreadcrumb({ timestamp: Date.now(), category: `console.${method}`, message, level, data: attrs });
-        const span = tracer.startSpan("browser.console", {
+        const spanName = method === "error" && (isErrorObj || attrs["error.stack"]) ? "browser.error" : "browser.console";
+        const span = tracer.startSpan(spanName, {
           attributes: {
             "log.severity": level.toUpperCase(),
             "log.message": message.slice(0, 1024),
@@ -28266,6 +28302,10 @@ function installConsoleCapture(tracer, sessionId) {
             ...attrs
           }
         });
+        if (method === "error") {
+          span.setStatus({ code: SpanStatusCode.ERROR, message: message.slice(0, 1024) });
+          if (isErrorObj) span.recordException(firstArg);
+        }
         span.end();
       } catch {
       }
@@ -28552,7 +28592,12 @@ function initBrowserSDK(config) {
   const sampleRate = config.tracesSampleRate ?? 1;
   const replaySampleRate = config.replaySampleRate ?? 1;
   const shouldReplay = Math.random() < replaySampleRate;
-  const otel = setupOtelWeb({ ...config, tracesSampleRate: sampleRate });
+  const replay = new BrowserReplayBuffer({
+    maxChunkBytes: config.replay?.maxChunkBytes ?? 48e4,
+    flushIntervalMs: config.replay?.flushIntervalMs ?? 5e3,
+    sessionStorageKey: config.replay?.sessionStorageKey ?? "obtrace_session_id"
+  });
+  const otel = setupOtelWeb({ ...config, tracesSampleRate: sampleRate, sessionId: replay.sessionId });
   const tracer = otel.tracer;
   const meter = otel.meter;
   const client = new ObtraceClient({
@@ -28568,11 +28613,6 @@ function initBrowserSDK(config) {
     vitals: { enabled: true, reportAllChanges: false, ...config.vitals },
     propagation: { enabled: true, ...config.propagation }
   });
-  const replay = new BrowserReplayBuffer({
-    maxChunkBytes: config.replay?.maxChunkBytes ?? 48e4,
-    flushIntervalMs: config.replay?.flushIntervalMs ?? 5e3,
-    sessionStorageKey: config.replay?.sessionStorageKey ?? "obtrace_session_id"
-  });
   const recipeSteps = [];
   const cleanups = [];
   const entry = { client, sessionId: replay.sessionId, replay, config, recipeSteps, otel };