@obtrace/browser 2.1.0 → 2.3.0

package/dist/browser/console.js

@@ -1,3 +1,5 @@
+import { SpanStatusCode } from "@opentelemetry/api";
+import { SeverityNumber } from "@opentelemetry/api-logs";
 import { addBreadcrumb } from "./breadcrumbs";
 const LEVEL_MAP = {
     debug: "debug",
@@ -6,9 +8,16 @@ const LEVEL_MAP = {
     warn: "warn",
     error: "error",
 };
+const SEVERITY_MAP = {
+    debug: SeverityNumber.DEBUG,
+    log: SeverityNumber.INFO,
+    info: SeverityNumber.INFO,
+    warn: SeverityNumber.WARN,
+    error: SeverityNumber.ERROR,
+};
 let patched = false;
 let originals = {};
-export function installConsoleCapture(tracer, sessionId) {
+export function installConsoleCapture(tracer, logger, sessionId) {
     if (patched || typeof console === "undefined")
         return () => { };
     patched = true;
@@ -31,8 +40,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,17 +68,40 @@ 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", {
+                logger.emit({
+                    severityNumber: SEVERITY_MAP[method] ?? SeverityNumber.INFO,
+                    severityText: level.toUpperCase(),
+                    body: message.slice(0, 4096),
                     attributes: {
-                        "log.severity": level.toUpperCase(),
-                        "log.message": message.slice(0, 1024),
                         "session.id": sessionId,
+                        "log.source": "console",
                         ...attrs,
                     },
                 });
-                span.end();
+                if (method === "error") {
+                    const spanName = (isErrorObj || attrs["error.stack"]) ? "browser.error" : "browser.console";
+                    const span = tracer.startSpan(spanName, {
+                        attributes: {
+                            "error.message": message.slice(0, 1024),
+                            "session.id": sessionId,
+                            ...attrs,
+                        },
+                    });
+                    span.setStatus({ code: SpanStatusCode.ERROR, message: message.slice(0, 1024) });
+                    if (isErrorObj)
+                        span.recordException(firstArg);
+                    span.end();
+                }
             }
             catch { }
         };

package/dist/browser/errors.js

@@ -1,25 +1,39 @@
 import { SpanStatusCode } from "@opentelemetry/api";
+import { SeverityNumber } from "@opentelemetry/api-logs";
 import { addBreadcrumb, getBreadcrumbs } from "./breadcrumbs";
-export function installBrowserErrorHooks(tracer, sessionId) {
+export function installBrowserErrorHooks(tracer, logger, sessionId) {
     if (typeof window === "undefined") {
         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 span = tracer.startSpan("browser.error", {
+            const stack = ev.error instanceof Error ? ev.error.stack || "" : "";
+            const errorType = ev.error?.constructor?.name || "Error";
+            const attrs = {
+                "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": errorType,
+                "breadcrumbs.count": breadcrumbs.length,
+                "breadcrumbs.json": JSON.stringify(breadcrumbs.slice(-20)),
+                ...(sessionId ? { "session.id": sessionId } : {}),
+            };
+            logger.emit({
+                severityNumber: SeverityNumber.ERROR,
+                severityText: "ERROR",
+                body: message,
                 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 } : {}),
+                    "log.source": "window.error",
+                    ...attrs,
                 },
             });
-            span.setStatus({ code: SpanStatusCode.ERROR, message: ev.message });
+            const span = tracer.startSpan("browser.error", { attributes: attrs });
+            span.setStatus({ code: SpanStatusCode.ERROR, message });
             if (ev.error instanceof Error) {
                 span.recordException(ev.error);
             }
@@ -28,18 +42,38 @@ 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 = "";
+        let errorType = "UnhandledRejection";
+        if (ev.reason instanceof Error) {
+            reason = `${ev.reason.name}: ${ev.reason.message}`;
+            stack = ev.reason.stack || "";
+            errorType = ev.reason.constructor?.name || "Error";
+        }
+        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", {
+            const attrs = {
+                "error.message": reason,
+                "error.stack": stack.slice(0, 4096),
+                "error.type": errorType,
+                "breadcrumbs.count": breadcrumbs.length,
+                "breadcrumbs.json": JSON.stringify(breadcrumbs.slice(-20)),
+                ...(sessionId ? { "session.id": sessionId } : {}),
+            };
+            logger.emit({
+                severityNumber: SeverityNumber.ERROR,
+                severityText: "ERROR",
+                body: reason,
                 attributes: {
-                    "error.message": reason,
-                    "breadcrumbs.count": breadcrumbs.length,
-                    "breadcrumbs.json": JSON.stringify(breadcrumbs.slice(-20)),
-                    ...(sessionId ? { "session.id": sessionId } : {}),
+                    "log.source": "unhandledrejection",
+                    ...attrs,
                 },
             });
+            const span = tracer.startSpan("browser.unhandledrejection", { attributes: attrs });
             span.setStatus({ code: SpanStatusCode.ERROR, message: reason });
             if (ev.reason instanceof Error) {
                 span.recordException(ev.reason);

package/dist/browser/index.js

@@ -1,5 +1,6 @@
 import { record } from "rrweb";
 import { SpanStatusCode } from "@opentelemetry/api";
+import { SeverityNumber } from "@opentelemetry/api-logs";
 import { ObtraceClient } from "../core/client";
 import { setupOtelWeb } from "../core/otel-web-setup";
 import { installBrowserErrorHooks } from "./errors";
@@ -157,9 +158,15 @@ 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 logger = otel.loggerProvider.getLogger("@obtrace/sdk-browser", "2.2.0");
     const client = new ObtraceClient({
         ...config,
         replay: {
@@ -173,11 +180,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 };
@@ -207,14 +209,14 @@ export function initBrowserSDK(config) {
     }).catch(() => { });
     if (config.vitals?.enabled !== false)
         cleanups.push(installWebVitals(meter, !!config.vitals?.reportAllChanges));
-    cleanups.push(installBrowserErrorHooks(tracer, replay.sessionId));
+    cleanups.push(installBrowserErrorHooks(tracer, logger, replay.sessionId));
     cleanups.push(installClickBreadcrumbs());
     cleanups.push(installClickTracking(tracer, replay.sessionId));
     cleanups.push(installResourceTiming(meter));
     cleanups.push(installLongTaskDetection(tracer));
     cleanups.push(installMemoryTracking(meter));
     if (config.captureConsole !== false) {
-        cleanups.push(installConsoleCapture(tracer, replay.sessionId));
+        cleanups.push(installConsoleCapture(tracer, logger, replay.sessionId));
     }
     cleanups.push(installOfflineSupport());
     if (shouldReplay && config.replay?.enabled !== false && typeof window !== "undefined") {
@@ -263,22 +265,40 @@ export function initBrowserSDK(config) {
         window.addEventListener("beforeunload", onBeforeUnload);
         cleanups.push(() => window.removeEventListener("beforeunload", onBeforeUnload));
     }
+    const sevToOtel = {
+        debug: SeverityNumber.DEBUG,
+        info: SeverityNumber.INFO,
+        warn: SeverityNumber.WARN,
+        error: SeverityNumber.ERROR,
+        fatal: SeverityNumber.FATAL,
+    };
     const log = (level, message, context) => {
         addCrumb({ timestamp: Date.now(), category: "log", message, level: level === "fatal" ? "error" : level });
-        const span = tracer.startSpan("browser.log", {
+        logger.emit({
+            severityNumber: sevToOtel[level] ?? SeverityNumber.INFO,
+            severityText: level.toUpperCase(),
+            body: message.slice(0, 4096),
             attributes: {
-                "log.severity": level.toUpperCase(),
-                "log.severity_number": severityToNumber(level),
-                "log.message": message,
                 "session.id": replay.sessionId,
+                "log.source": "sdk",
                 ...userAttrs(),
                 ...(context?.traceId ? { "obtrace.trace_id": context.traceId } : {}),
                 ...context?.attrs,
             },
         });
-        if (level === "error" || level === "fatal")
+        if (level === "error" || level === "fatal") {
+            const span = tracer.startSpan("browser.error", {
+                attributes: {
+                    "error.message": message,
+                    "session.id": replay.sessionId,
+                    ...userAttrs(),
+                    ...(context?.traceId ? { "obtrace.trace_id": context.traceId } : {}),
+                    ...context?.attrs,
+                },
+            });
             span.setStatus({ code: SpanStatusCode.ERROR, message });
-        span.end();
+            span.end();
+        }
     };
     const metricFn = (name, value, unit, context) => {
         const gauge = meter.createGauge(name, { unit: unit ?? "1" });
@@ -286,11 +306,26 @@ export function initBrowserSDK(config) {
     };
     const captureException = (error, context) => {
         const msg = error instanceof Error ? `${error.name}: ${error.message}` : String(error);
+        const stack = error instanceof Error ? (error.stack || "").slice(0, 4096) : "";
         const breadcrumbs = getBreadcrumbs();
         addCrumb({ timestamp: Date.now(), category: "error", message: msg, level: "error" });
+        logger.emit({
+            severityNumber: SeverityNumber.ERROR,
+            severityText: "ERROR",
+            body: msg,
+            attributes: {
+                "session.id": replay.sessionId,
+                "log.source": "exception",
+                "error.stack": stack,
+                "error.type": error instanceof Error ? error.name : "Error",
+                ...userAttrs(),
+                ...context?.attrs,
+            },
+        });
         const span = tracer.startSpan("browser.exception", {
             attributes: {
                 "error.message": msg,
+                "error.stack": stack,
                 "session.id": replay.sessionId,
                 "breadcrumbs.count": breadcrumbs.length,
                 "breadcrumbs.json": JSON.stringify(breadcrumbs.slice(-20)),