@obtrace/browser 2.0.1 → 2.2.0

package/README.md

@@ -14,17 +14,19 @@ bun add @obtrace/sdk-browser
 
 ### Simplified setup
 
-The API key resolves `tenant_id`, `project_id`, `app_id`, and `env` automatically on the server side, so only three fields are needed:
+The API key resolves `tenant_id`, `project_id`, `app_id`, and `env` automatically on the server side. `serviceName` must match the connected app name in the project, or an explicit alias configured for that app.
 
 ```ts
 import { initBrowserSDK } from "@obtrace/sdk-browser/browser";
 
 const sdk = initBrowserSDK({
   apiKey: "obt_live_...",
-  serviceName: "web-app",
+  serviceName: "core",
 });
 ```
 
+If the project app is `core` and the dashboard defines `web` as an alias, `serviceName: "web"` is accepted and normalized to `core` on ingest. Arbitrary names are rejected.
+
 ### Full configuration
 
 For advanced use cases you can override the resolved values explicitly:
@@ -34,10 +36,10 @@ import { initBrowserSDK, SemanticMetrics } from "@obtrace/sdk-browser/browser";
 
 const sdk = initBrowserSDK({
   apiKey: "<API_KEY>",
-  serviceName: "web-app",
+  serviceName: "core",
   tenantId: "tenant-prod",
   projectId: "project-prod",
-  appId: "web",
+  appId: "core",
   env: "prod"
 });
 

package/dist/browser/console.js

@@ -1,3 +1,4 @@
+import { SpanStatusCode } from "@opentelemetry/api";
 import { addBreadcrumb } from "./breadcrumbs";
 const LEVEL_MAP = {
     debug: "debug",
@@ -20,32 +21,72 @@ export function installConsoleCapture(tracer, sessionId) {
         const level = LEVEL_MAP[method];
         console[method] = (...args) => {
             original(...args);
-            let message;
-            let attrs = {};
-            if (args.length === 1 && typeof args[0] === "object" && args[0] !== null && !Array.isArray(args[0])) {
-                const obj = args[0];
-                message = String(obj.msg || obj.message || JSON.stringify(obj));
-                for (const [k, v] of Object.entries(obj)) {
-                    if (k === "msg" || k === "message")
-                        continue;
-                    if (typeof v === "string" || typeof v === "number" || typeof v === "boolean") {
-                        attrs[k] = v;
+            try {
+                let message;
+                let attrs = {};
+                const safeStringify = (v) => {
+                    try {
+                        return JSON.stringify(v);
+                    }
+                    catch {
+                        return String(v);
+                    }
+                };
+                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;
+                        if (typeof v === "string" || typeof v === "number" || typeof v === "boolean") {
+                            attrs[k] = v;
+                        }
+                    }
+                }
+                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 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),
+                        "session.id": sessionId,
+                        ...attrs,
+                    },
+                });
+                if (method === "error") {
+                    span.setStatus({ code: SpanStatusCode.ERROR, message: message.slice(0, 1024) });
+                    if (isErrorObj)
+                        span.recordException(firstArg);
+                }
+                span.end();
             }
-            else {
-                message = args.map(a => typeof a === "string" ? a : JSON.stringify(a)).join(" ");
-            }
-            addBreadcrumb({ timestamp: Date.now(), category: `console.${method}`, message, level, data: attrs });
-            const span = tracer.startSpan("browser.console", {
-                attributes: {
-                    "log.severity": level.toUpperCase(),
-                    "log.message": message.slice(0, 1024),
-                    "session.id": sessionId,
-                    ...attrs,
-                },
-            });
-            span.end();
+            catch { }
         };
     }
     return () => {

package/dist/browser/errors.js

@@ -5,42 +5,62 @@ export function installBrowserErrorHooks(tracer, sessionId) {
         return () => undefined;
     }
     const onError = (ev) => {
-        addBreadcrumb({ timestamp: Date.now(), category: "error", message: ev.message || "window.error", level: "error" });
-        const breadcrumbs = getBreadcrumbs();
-        const span = tracer.startSpan("browser.error", {
-            attributes: {
-                "error.message": ev.message || "window.error",
-                "error.file": ev.filename || "",
-                "error.line": ev.lineno || 0,
-                "error.column": ev.colno || 0,
-                "breadcrumbs.count": breadcrumbs.length,
-                "breadcrumbs.json": JSON.stringify(breadcrumbs.slice(-20)),
-                ...(sessionId ? { "session.id": sessionId } : {}),
-            },
-        });
-        span.setStatus({ code: SpanStatusCode.ERROR, message: ev.message });
-        if (ev.error instanceof Error) {
-            span.recordException(ev.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": 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 });
+            if (ev.error instanceof Error) {
+                span.recordException(ev.error);
+            }
+            span.end();
         }
-        span.end();
+        catch { }
     };
     const onRejection = (ev) => {
-        const reason = typeof ev.reason === "string" ? ev.reason : JSON.stringify(ev.reason ?? {});
-        addBreadcrumb({ timestamp: Date.now(), category: "error", message: reason, level: "error" });
-        const breadcrumbs = getBreadcrumbs();
-        const span = tracer.startSpan("browser.unhandledrejection", {
-            attributes: {
-                "error.message": reason,
-                "breadcrumbs.count": breadcrumbs.length,
-                "breadcrumbs.json": JSON.stringify(breadcrumbs.slice(-20)),
-                ...(sessionId ? { "session.id": sessionId } : {}),
-            },
-        });
-        span.setStatus({ code: SpanStatusCode.ERROR, message: reason });
+        let reason;
+        let stack = "";
         if (ev.reason instanceof Error) {
-            span.recordException(ev.reason);
+            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 } : {}),
+                },
+            });
+            span.setStatus({ code: SpanStatusCode.ERROR, message: reason });
+            if (ev.reason instanceof Error) {
+                span.recordException(ev.reason);
+            }
+            span.end();
         }
-        span.end();
+        catch { }
     };
     window.addEventListener("error", onError);
     window.addEventListener("unhandledrejection", onRejection);

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 };
@@ -245,9 +245,16 @@ export function initBrowserSDK(config) {
             pendingBeaconBlob = null;
         }
     };
-    const onVisibility = () => { if (document.visibilityState === "hidden")
-        flushReplay(); };
-    const onBeforeUnload = () => sendViaBeacon();
+    const onVisibility = () => {
+        if (document.visibilityState === "hidden") {
+            otel.forceFlush();
+            flushReplay();
+        }
+    };
+    const onBeforeUnload = () => {
+        otel.forceFlush();
+        sendViaBeacon();
+    };
     if (typeof document !== "undefined") {
         document.addEventListener("visibilitychange", onVisibility);
         cleanups.push(() => document.removeEventListener("visibilitychange", onVisibility));

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({
@@ -27840,13 +27841,24 @@ function setupOtelWeb(config) {
     tracerProvider,
     instrumentations
   });
-  const tracer = trace.getTracer("@obtrace/sdk-browser", "1.1.0");
-  const meter = metrics.getMeter("@obtrace/sdk-browser", "1.1.0");
+  const tracer = trace.getTracer("@obtrace/sdk-browser", "2.1.0");
+  const meter = metrics.getMeter("@obtrace/sdk-browser", "2.1.0");
+  const forceFlush = async () => {
+    try {
+      await tracerProvider.forceFlush();
+    } catch {
+    }
+    try {
+      await meterProvider.forceFlush();
+    } catch {
+    }
+  };
   const shutdown = async () => {
+    await forceFlush();
     await tracerProvider.shutdown();
     await meterProvider.shutdown();
   };
-  return { tracer, meter, shutdown };
+  return { tracer, meter, shutdown, forceFlush };
 }
 
 // src/browser/breadcrumbs.ts
@@ -27893,42 +27905,61 @@ function installBrowserErrorHooks(tracer, sessionId) {
     return () => void 0;
   }
   const onError = (ev) => {
-    addBreadcrumb({ timestamp: Date.now(), category: "error", message: ev.message || "window.error", level: "error" });
-    const breadcrumbs = getBreadcrumbs();
-    const span = tracer.startSpan("browser.error", {
-      attributes: {
-        "error.message": ev.message || "window.error",
-        "error.file": ev.filename || "",
-        "error.line": ev.lineno || 0,
-        "error.column": ev.colno || 0,
-        "breadcrumbs.count": breadcrumbs.length,
-        "breadcrumbs.json": JSON.stringify(breadcrumbs.slice(-20)),
-        ...sessionId ? { "session.id": sessionId } : {}
+    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": 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 });
+      if (ev.error instanceof Error) {
+        span.recordException(ev.error);
       }
-    });
-    span.setStatus({ code: SpanStatusCode.ERROR, message: ev.message });
-    if (ev.error instanceof Error) {
-      span.recordException(ev.error);
+      span.end();
+    } catch {
     }
-    span.end();
   };
   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" });
-    const breadcrumbs = getBreadcrumbs();
-    const span = tracer.startSpan("browser.unhandledrejection", {
-      attributes: {
-        "error.message": reason,
-        "breadcrumbs.count": breadcrumbs.length,
-        "breadcrumbs.json": JSON.stringify(breadcrumbs.slice(-20)),
-        ...sessionId ? { "session.id": sessionId } : {}
+    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 } : {}
+        }
+      });
+      span.setStatus({ code: SpanStatusCode.ERROR, message: reason });
+      if (ev.reason instanceof Error) {
+        span.recordException(ev.reason);
       }
-    });
-    span.setStatus({ code: SpanStatusCode.ERROR, message: reason });
-    if (ev.reason instanceof Error) {
-      span.recordException(ev.reason);
+      span.end();
+    } catch {
     }
-    span.end();
   };
   window.addEventListener("error", onError);
   window.addEventListener("unhandledrejection", onRejection);
@@ -28218,30 +28249,66 @@ function installConsoleCapture(tracer, sessionId) {
     const level = LEVEL_MAP[method];
     console[method] = (...args) => {
       original(...args);
-      let message;
-      let attrs = {};
-      if (args.length === 1 && typeof args[0] === "object" && args[0] !== null && !Array.isArray(args[0])) {
-        const obj = args[0];
-        message = String(obj.msg || obj.message || JSON.stringify(obj));
-        for (const [k, v] of Object.entries(obj)) {
-          if (k === "msg" || k === "message") continue;
-          if (typeof v === "string" || typeof v === "number" || typeof v === "boolean") {
-            attrs[k] = v;
+      try {
+        let message;
+        let attrs = {};
+        const safeStringify = (v) => {
+          try {
+            return JSON.stringify(v);
+          } catch {
+            return String(v);
+          }
+        };
+        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;
+            if (typeof v === "string" || typeof v === "number" || typeof v === "boolean") {
+              attrs[k] = v;
+            }
+          }
+        } 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;
+              }
+            }
           }
         }
-      } else {
-        message = args.map((a) => typeof a === "string" ? a : JSON.stringify(a)).join(" ");
-      }
-      addBreadcrumb({ timestamp: Date.now(), category: `console.${method}`, message, level, data: attrs });
-      const span = tracer.startSpan("browser.console", {
-        attributes: {
-          "log.severity": level.toUpperCase(),
-          "log.message": message.slice(0, 1024),
-          "session.id": sessionId,
-          ...attrs
+        addBreadcrumb({ timestamp: Date.now(), category: `console.${method}`, message, level, data: attrs });
+        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),
+            "session.id": sessionId,
+            ...attrs
+          }
+        });
+        if (method === "error") {
+          span.setStatus({ code: SpanStatusCode.ERROR, message: message.slice(0, 1024) });
+          if (isErrorObj) span.recordException(firstArg);
         }
-      });
-      span.end();
+        span.end();
+      } catch {
+      }
     };
   }
   return () => {
@@ -28525,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({
@@ -28541,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 };
@@ -28610,9 +28677,15 @@ function initBrowserSDK(config) {
     }
   };
   const onVisibility = () => {
-    if (document.visibilityState === "hidden") flushReplay();
+    if (document.visibilityState === "hidden") {
+      otel.forceFlush();
+      flushReplay();
+    }
+  };
+  const onBeforeUnload = () => {
+    otel.forceFlush();
+    sendViaBeacon();
   };
-  const onBeforeUnload = () => sendViaBeacon();
   if (typeof document !== "undefined") {
     document.addEventListener("visibilitychange", onVisibility);
     cleanups.push(() => document.removeEventListener("visibilitychange", onVisibility));