@obtrace/browser 2.1.0 → 2.3.0

package/dist/core/otel-web-setup.js

@@ -4,6 +4,8 @@ import { BatchSpanProcessor, TraceIdRatioBasedSampler, ParentBasedSampler } from
 import { OTLPTraceExporter } from "@opentelemetry/exporter-trace-otlp-http";
 import { MeterProvider, PeriodicExportingMetricReader } from "@opentelemetry/sdk-metrics";
 import { OTLPMetricExporter } from "@opentelemetry/exporter-metrics-otlp-http";
+import { LoggerProvider, BatchLogRecordProcessor } from "@opentelemetry/sdk-logs";
+import { OTLPLogExporter } from "@opentelemetry/exporter-logs-otlp-http";
 import { Resource } from "@opentelemetry/resources";
 import { ATTR_SERVICE_NAME, ATTR_SERVICE_VERSION } from "@opentelemetry/semantic-conventions";
 import { FetchInstrumentation } from "@opentelemetry/instrumentation-fetch";
@@ -29,6 +31,7 @@ export 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({
@@ -61,6 +64,14 @@ export function setupOtelWeb(config) {
         ],
     });
     metrics.setGlobalMeterProvider(meterProvider);
+    const logExporter = new OTLPLogExporter({
+        url: `${baseUrl}/otlp/v1/logs`,
+        headers: authHeaders,
+    });
+    const loggerProvider = new LoggerProvider({
+        resource: resource,
+        processors: [new BatchLogRecordProcessor(logExporter)],
+    });
     const ingestPattern = new RegExp(`^${baseUrl.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}`);
     const instrumentations = [];
     if (config.instrumentGlobalFetch !== false) {
@@ -83,8 +94,8 @@ export function setupOtelWeb(config) {
         tracerProvider,
         instrumentations,
     });
-    const tracer = trace.getTracer("@obtrace/sdk-browser", "2.1.0");
-    const meter = metrics.getMeter("@obtrace/sdk-browser", "2.1.0");
+    const tracer = trace.getTracer("@obtrace/sdk-browser", "2.2.0");
+    const meter = metrics.getMeter("@obtrace/sdk-browser", "2.2.0");
     const forceFlush = async () => {
         try {
             await tracerProvider.forceFlush();
@@ -94,11 +105,16 @@ export function setupOtelWeb(config) {
             await meterProvider.forceFlush();
         }
         catch { }
+        try {
+            await loggerProvider.forceFlush();
+        }
+        catch { }
     };
     const shutdown = async () => {
         await forceFlush();
         await tracerProvider.shutdown();
         await meterProvider.shutdown();
+        await loggerProvider.shutdown();
     };
-    return { tracer, meter, shutdown, forceFlush };
+    return { tracer, meter, loggerProvider, shutdown, forceFlush };
 }

package/dist/types/browser/console.d.ts

@@ -1,2 +1,3 @@
-import type { Tracer } from "@opentelemetry/api";
-export declare function installConsoleCapture(tracer: Tracer, sessionId: string): () => void;
+import { type Tracer } from "@opentelemetry/api";
+import type { Logger } from "@opentelemetry/api-logs";
+export declare function installConsoleCapture(tracer: Tracer, logger: Logger, sessionId: string): () => void;

package/dist/types/browser/errors.d.ts

@@ -1,2 +1,3 @@
 import { type Tracer } from "@opentelemetry/api";
-export declare function installBrowserErrorHooks(tracer: Tracer, sessionId?: string): () => void;
+import type { Logger } from "@opentelemetry/api-logs";
+export declare function installBrowserErrorHooks(tracer: Tracer, logger: Logger, sessionId?: string): () => void;

package/dist/types/core/otel-web-setup.d.ts

@@ -1,9 +1,13 @@
 import { type Tracer, type Meter } from "@opentelemetry/api";
+import { LoggerProvider } from "@opentelemetry/sdk-logs";
 import type { ObtraceSDKConfig } from "../shared/types";
 export interface OtelHandles {
     tracer: Tracer;
     meter: Meter;
+    loggerProvider: LoggerProvider;
     shutdown: () => Promise<void>;
     forceFlush: () => Promise<void>;
 }
-export declare function setupOtelWeb(config: ObtraceSDKConfig): OtelHandles;
+export declare function setupOtelWeb(config: ObtraceSDKConfig & {
+    sessionId?: string;
+}): OtelHandles;

package/dist/types/wrappers/frontend/react.d.ts

@@ -5,4 +5,6 @@ export declare function getObtrace(): BrowserSDK | null;
 export declare function obtraceLog(level: "debug" | "info" | "warn" | "error" | "fatal", message: string, context?: SDKContext): void;
 export declare function obtraceMetric(name: string, value: number, unit?: string, context?: SDKContext): void;
 export declare function obtraceError(error: unknown, context?: SDKContext): void;
+export declare function createObtraceErrorBoundary(React: any): any;
+export declare function getObtraceErrorBoundary(): any;
 export type { BrowserSDK, ObtraceSDKConfig, SDKContext };

package/dist/wrappers/frontend/react.js

@@ -18,3 +18,60 @@ export function obtraceMetric(name, value, unit, context) {
 export function obtraceError(error, context) {
     _sdk?.captureException(error, context);
 }
+let _React = null;
+function getReact() {
+    if (_React)
+        return _React;
+    try {
+        _React = require("react");
+    }
+    catch {
+        try {
+            _React = globalThis.__obtrace_react;
+        }
+        catch { }
+    }
+    return _React;
+}
+export function createObtraceErrorBoundary(React) {
+    const Component = React.Component;
+    class ObtraceErrorBoundary extends Component {
+        constructor(props) {
+            super(props);
+            this.state = { hasError: false, error: null };
+        }
+        static getDerivedStateFromError(error) {
+            return { hasError: true, error };
+        }
+        componentDidCatch(error, errorInfo) {
+            const sdk = getObtrace();
+            if (sdk) {
+                const stack = errorInfo?.componentStack || "";
+                sdk.captureException(error, {
+                    attrs: {
+                        "error.type": "react.render",
+                        "error.component_stack": typeof stack === "string" ? stack.slice(0, 4096) : "",
+                    },
+                });
+            }
+            this.props.onError?.(error, errorInfo);
+        }
+        render() {
+            if (this.state.hasError) {
+                return this.props.fallback ?? null;
+            }
+            return this.props.children;
+        }
+    }
+    return ObtraceErrorBoundary;
+}
+let _ObtraceErrorBoundary = null;
+export function getObtraceErrorBoundary() {
+    if (_ObtraceErrorBoundary)
+        return _ObtraceErrorBoundary;
+    const React = getReact();
+    if (!React)
+        throw new Error("React not found. Use createObtraceErrorBoundary(React) instead.");
+    _ObtraceErrorBoundary = createObtraceErrorBoundary(React);
+    return _ObtraceErrorBoundary;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obtrace/browser",
-  "version": "2.1.0",
+  "version": "2.3.0",
   "description": "Obtrace Browser SDK with frontend wrappers",
   "type": "module",
   "license": "MIT",
@@ -66,6 +66,7 @@
   "dependencies": {
     "@opentelemetry/api": "^1.9.0",
     "@opentelemetry/context-zone": "^1.30.0",
+    "@opentelemetry/exporter-logs-otlp-http": "^0.214.0",
     "@opentelemetry/exporter-metrics-otlp-http": "^0.57.0",
     "@opentelemetry/exporter-trace-otlp-http": "^0.57.0",
     "@opentelemetry/instrumentation-document-load": "^0.43.0",
@@ -73,6 +74,7 @@
     "@opentelemetry/instrumentation-user-interaction": "^0.43.0",
     "@opentelemetry/instrumentation-xml-http-request": "^0.57.0",
     "@opentelemetry/resources": "^1.30.0",
+    "@opentelemetry/sdk-logs": "^0.214.0",
     "@opentelemetry/sdk-metrics": "^1.30.0",
     "@opentelemetry/sdk-trace-web": "^1.30.0",
     "@opentelemetry/semantic-conventions": "^1.30.0",