Last year I spent some time integrating OpenTelemetry into a large monolithic frontend, using opentelemetry-js [1], which supports both node and web. At the time the spec was not 1.0 and the library was under active development. It required some effort contributing, but we're happy we went with OpenTelemetry instead of OpenTracing or OpenCensus.

There are a relatively large number of packages to install to get a basic setup (see the examples [2]). However, it's pretty straightforward. In short, you'll need to:

1. Instantiate the WebTracerProvider which allows traces to be created

2. Instantiate a span processor (such as BatchSpanProcessor) and a span exporter into the tracer provider. In the browser, you'll likely use @opentelemetry/exporter-otlp-http for the span exporter, which can be configured to send traces to any backend (e.g. Jaegar, Honeycomb, Lightstep, or DataDog).

3. Configure a context manager for tracing across async callstacks. This is the most complex part of tracing in my opinion, but it makes the trace data — specifically for JS — significantly more powerful. Since JS does not have thread local storage, they use a package called zone.js to make this possible. It is currently the *only* solution for this problem in browser JS. Node has the luxury of the standard library async_hooks. This was attempted to be standardized, but the effort has stalled [3].

4. Register automatic instrumentations. For example, you can automatically trace all XHR requests, fetch requests, page loads, and user interactions. With distributed tracing, you should always prefer automatic instrumentation whenever possible to reduce maintenance and leverage existing conventions. The document load instrumentation allows you to treat the server as the parent span to a given page load, from which the client will then be the root span to everything in the server. This is an extremely powerful concept that allows traces to viewed from the perspective of the user, encapsulating all requests and user interactions in a single trace with no manual instrumentation!

We also trialed Sentry's APM tool (also marketed as a distributed tracing tool). While it had pretty charts, dashboards, niceties like core web vitals, and integrated well with Sentry's error product, its utility as a distributed tracing tool is significantly less powerful than tools like Honeycomb. You will end up using a large amount of your user's bandwidth sending telemetry data that can't fully be leveraged in the Sentry UI. When I last used (in April 2021), the spans of a given trace could only be viewed in a specific part the UI and they couldn't be searched for in queries or used in charts. I'm unsure if this has been updated. But this is not the worse part. Because Sentry uses its own data model for traces, it is not compatible with open source standards such as OpenTelemetry or OpenTracing! The sales team will not tell you this during the trial. This means our entire backend, which was already instrumented with OpenTracing, would now also need to instrument Sentry's tracing (...if they supported the language) in order to connect frontend traces to backend traces. If your company uses Sentry everywhere, then this may be less of a problem. Each team I met with their sales team, I said the same thing: support OpenTelemetry, otherwise you are asking for us to further isolate our backend and frontend teams.

It looks like they have heard this opinion, as they have recently published a blog post about the evolution of the distributed tracing API, citing incompatibility with OpenTelemetry due to their data model. It will require a very large change for them to support this. Meanwhile, OpenTelemetry can be used with any tracing vendor, a large number of languages, the other major instrumentation standards (OpenTracing, OpenCensus), and any trace propagation format.

- [1]: https://github.com/open-telemetry/opentelemetry-js

- [2]: https://github.com/open-telemetry/opentelemetry-js/tree/main...

- [3]: https://github.com/legendecas/zones

- [4]: https://develop.sentry.dev/sdk/research/performance/