Add OpenTelemetry Browser Support

[AbhiPrasad]

Just like we have for Node: https://github.com/getsentry/sentry-javascript/tree/develop/packages/opentelemetry-node

If you would like to see this please leave a comment/reaction to this post! This helps us prioritize what to work on.

[gajus]

Is there a workaround at the moment?

I just migrated Node.js to OpenTelemetry/Sentry, and realized that there isn't browser integration.

Does the existing Sentry tracer inter-op with Node.js OpenTelemetry?

[AbhiPrasad]

There's no workarounds for browser support - but otel browser instrumentation is also much less featured than what Sentry offers (no web vitals, no support for tracking resources). In addition as per the instructions, otel browser recommends using @opentelemetry/context-zone, which means you have to add a dependency on zonejs, that is pretty expensive (angular themselves are removing zone).

The sentry exporter in @sentry/opentelemetry-node should work with browser, it actually doesn't depend on any Node APIs, maybe you can give that a try?

We're going to be expanding support for nodejs opentelemetry with the next major version of the SDK, but I think we're not going to invest in browser opentelemetry for the time being given the current limitations. This may change in a couple of months.

[patroza]

@AbhiPrasad this works great for us on Sentry 7, how should it be setup in Sentry 8?

[AbhiPrasad]

@patroza you can import everything from @sentry/opentelemetry as per https://github.com/getsentry/sentry-javascript/tree/develop/packages/opentelemetry

[patroza]

thanks @AbhiPrasad, so even while there is no more "otel" setting in the frontend sdk since 8.0, you can use this anyway?

[AbhiPrasad]

Yes you should be able to use it (though something things in the snippet like AsyncLocalStorageContextManager don't apply in the browser environment).

[gilisho]

I'm trying to use Sentry with OpenTelemetry in my React app.
Unfortunately I can't make it work - spans are not being sent through the network to Sentry.

export function setupSentry() { // before sentryInit({ dsn: SENTRY_PROJECT_DSN, instrumenter: 'otel', // set the instrumenter to use OpenTelemetry instead of Sentry tracesSampleRate: 1.0, // Adjust this value in production debug: true, // Enable debug mode for more detailed logs beforeSend: (event: SentryEvent) => { console.log('Event beforeSend:', event); return event; }, beforeSendTransaction: (transaction) => { console.log('Transaction beforeSend:', transaction); return transaction; }, }); const client = getClient(); // Ensure the trace context is set on all events. setupEventContextTrace(client); const provider = new WebTracerProvider({ sampler: new SentrySampler(client), // A custom OTEL sampler that uses Sentry sampling rates to make its decision }); // Add a batch span processor to export spans to Sentry provider.addSpanProcessor(new BatchSpanProcessor(new SentrySpanProcessor())); // SentrySpanProcessor - Converts OpenTelemetry Spans to Sentry Spans and sends them to Sentry via the Sentry SDK. // Wrap an OpenTelemetry ContextManager in a way that ensures the context is kept in sync with the Sentry Scope. // Changing default contextManager to use ZoneContextManager - supports asynchronous operations - optional const SentryContextManager = wrapContextManagerClass(ZoneContextManager); // Initialize the provider - Register the provider to make it the active tracer provider provider.register({ propagator: new SentryPropagator(), contextManager: new SentryContextManager(), }); registerInstrumentations({ instrumentations: [ new UserInteractionInstrumentation(), new XMLHttpRequestInstrumentation(), new FetchInstrumentation(), ], tracerProvider: provider, }); return provider.getTracer('my-web-app'); }

This is how I'm reporting spans:

<Button onClick={() => { // Example of starting a span and capturing an error const span = tracer.startSpan('example-span'); try { // Some code that might throw an error console.log('I am about to throw an error'); throw new Error('This is a handled error within a span'); } catch (error) { span.recordException(error); } finally { console.log('I am about to end the span'); span.end(); } }} > Handled Error </Button>

What am I missing? I would expect the spans to be sent through the network to Sentry, but it's not happening.
The @sentry/react SDK version is ^8.19.0.

[LeviticusNelson]

@AbhiPrasad Is there any new timeline on when this will be implemented?

[AbhiPrasad]

OpenTelemetry for the browser is pretty much doing a full reset instrumentation/sdk wise: https://github.com/open-telemetry/community/blob/main/projects/browser-phase-1.md#required-staffing

Given that it's going to be in a lot of flux as they figure out the new APIs and data models, we are holding off on any work on it. When it becomes more stable, we can re-evaluate.

[bertho-zero]

I'm using Sentry on the client side, with a tunnel on my server for Sentry data.
I'd like to import this data into my OTEL collector in addition to Sentry, but it's transformed on the client side and unusable as-is for an OTLP collector.
I could add another exporter, but ideally, I'd like to use this data without having to send it twice.

[AbhiPrasad]

this is a use case we won't support in the near future, the sentry sdks will not emit OTLP.