Externalize zone.js in the browser package

Author: petyosi

.changeset/fast-bushes-wonder.md

@@ -0,0 +1,6 @@
+---
+"@pydantic/logfire-browser": patch
+"@pydantic/logfire-api": patch
+---
+
+Externalize the context manager, to avoid zone.js patching

examples/browser/src/main.ts

@@ -1,4 +1,4 @@
-import { getWebAutoInstrumentations } from "@opentelemetry/auto-instrumentations-web";
+import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web';
 import * as logfire from '@pydantic/logfire-browser';
 
 
@@ -25,9 +25,18 @@ logfire.configure({
 
 
 document.querySelector('button')?.addEventListener('click', () => {
+  logfire.info('Button clicked!')
   logfire.span('fetch wrapper',
     {
       callback: async () => { return fetch('https://jsonplaceholder.typicode.com/posts/1') }
     }
   )
+
+  logfire.span('test something', {
+    callback: async () => {
+      const promise = await new Promise((resolve) => setTimeout(resolve, 1000))
+      logfire.info('something!')
+      return promise
+    },
+  })
 })

package-lock.json

@@ -64,7 +64,7 @@ export function startSpan(
 ): Span {
   const [formattedMessage, extraAttributes, newTemplate] = logfireFormatWithExtras(msgTemplate, attributes, logfireApiConfig.scrubber)
 
-  const context = parentSpan ? TheTraceAPI.setSpan(TheContextAPI.active(), parentSpan) : logfireApiConfig.context
+  const context = parentSpan ? TheTraceAPI.setSpan(TheContextAPI.active(), parentSpan) : TheContextAPI.active()
   const span = logfireApiConfig.tracer.startSpan(
     formattedMessage,
     {
@@ -84,7 +84,9 @@ export function startSpan(
 
 type SpanCallback<R> = (activeSpan: Span) => R
 type SpanArgsVariant1<R> = [Record<string, unknown>, LogOptions, SpanCallback<R>]
-type SpanArgsVariant2<R> = [{ attributes?: Record<string, unknown>; callback: SpanCallback<R>; level?: LogFireLevel; tags?: string[] }]
+type SpanArgsVariant2<R> = [
+  { attributes?: Record<string, unknown>; callback: SpanCallback<R>; level?: LogFireLevel; parentSpan?: Span; tags?: string[] },
+]
 
 /**
  * Starts a new Span and calls the given function passing it the
@@ -101,20 +103,24 @@ export function span<R>(msgTemplate: string, ...args: SpanArgsVariant1<R> | Span
   let level: LogFireLevel = Level.Info
   let tags: string[] = []
   let callback!: SpanCallback<R>
+  let parentSpan: Span | undefined
   if (args.length === 1) {
     attributes = args[0].attributes ?? {}
     level = args[0].level ?? Level.Info
     tags = args[0].tags ?? []
     callback = args[0].callback
+    parentSpan = args[0].parentSpan
   } else {
     attributes = args[0]
     level = args[1].level ?? Level.Info
     tags = args[1].tags ?? []
+    parentSpan = args[1].parentSpan
     callback = args[2]
   }
 
   const [formattedMessage, extraAttributes, newTemplate] = logfireFormatWithExtras(msgTemplate, attributes, logfireApiConfig.scrubber)
 
+  const context = parentSpan ? TheTraceAPI.setSpan(TheContextAPI.active(), parentSpan) : TheContextAPI.active()
   return logfireApiConfig.tracer.startActiveSpan(
     formattedMessage,
     {
@@ -125,6 +131,7 @@ export function span<R>(msgTemplate: string, ...args: SpanArgsVariant1<R> | Span
         [ATTRIBUTES_TAGS_KEY]: Array.from(new Set(tags).values()),
       },
     },
+    context,
     (span: Span) => {
       const result = callback(span)
 

packages/logfire-api/src/index.ts

@@ -50,7 +50,6 @@
   },
   "dependencies": {
     "@opentelemetry/api": "^1.9.0",
-    "@opentelemetry/context-zone": "^2.0.1",
     "@opentelemetry/core": "^2.0.1",
     "@opentelemetry/exporter-trace-otlp-http": "^0.202.0",
     "@opentelemetry/instrumentation": "^0.202.0",

packages/logfire-browser/package.json

@@ -1,10 +1,17 @@
 /* eslint-disable @typescript-eslint/no-deprecated */
-import { Context, diag, DiagConsoleLogger, DiagLogLevel } from '@opentelemetry/api'
-import { ZoneContextManager } from '@opentelemetry/context-zone'
+import { Context, ContextManager, diag, DiagConsoleLogger, DiagLogLevel } from '@opentelemetry/api'
 import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http'
 import { Instrumentation, registerInstrumentations } from '@opentelemetry/instrumentation'
 import { resourceFromAttributes } from '@opentelemetry/resources'
-import { BatchSpanProcessor, BufferConfig, ReadableSpan, Span, SpanProcessor, WebTracerProvider } from '@opentelemetry/sdk-trace-web'
+import {
+  BatchSpanProcessor,
+  BufferConfig,
+  ReadableSpan,
+  Span,
+  SpanProcessor,
+  StackContextManager,
+  WebTracerProvider,
+} from '@opentelemetry/sdk-trace-web'
 import {
   ATTR_SERVICE_NAME,
   ATTR_SERVICE_VERSION,
@@ -41,14 +48,14 @@ export interface LogfireConfigOptions {
    */
   batchSpanProcessorConfig?: BufferConfig
   /**
-   * Defines the available internal logging levels for the diagnostic logger.
+   * Pass a context manager (e.g. ZoneContextManager) to use.
    */
-  diagLogLevel?: DiagLogLevel
+  contextManager?: ContextManager
 
   /**
-   * Set to `false` to disable the [zone context manager](https://www.npmjs.com/package/@opentelemetry/context-zone) usage.
+   * Defines the available internal logging levels for the diagnostic logger.
    */
-  enableZoneContextManager?: boolean
+  diagLogLevel?: DiagLogLevel
 
   /**
    * The environment this service is running in, e.g. `staging` or `prod`. Sets the deployment.environment.name resource attribute. Useful for filtering within projects in the Logfire UI.
@@ -141,12 +148,9 @@ export function configure(options: LogfireConfigOptions) {
     ],
   })
 
-  if (options.enableZoneContextManager !== false) {
-    diag.info('logfire-browser: enable zone context manager')
-    tracerProvider.register({
-      contextManager: new ZoneContextManager(),
-    })
-  }
+  tracerProvider.register({
+    contextManager: options.contextManager ?? new StackContextManager(),
+  })
 
   const unregister = registerInstrumentations({
     instrumentations: options.instrumentations ?? [],