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.