OpenTelemetry and Distributed Tracing in JavaScript

OpenTelemetry and Distributed Tracing in JavaScript

In our Configuring OpenTelemetry in Ruby blog post, we showed how to configure OpenTelemetry in a Ruby on Rails backend. In this post, we’ll cover how to configure OpenTelemetry in the front-end JavaScript in order to measure performance of browser and mobile devices and how to configure distributed tracing to work across the frontend and back end telemetry collection.

Let’s dive in!

The OpenTelemetry JavaScript packages for Node.js and browsers

The packages for OpenTelemetry supporting both Node.js apps and for desktop or mobile browser support can be found at https://github.com/open-telemetry/opentelemetry-js

OpenTelemetry Components used in this example

Resource

A Resource captures information about the entity for which telemetry is recorded.

SemanticResourceAttributes

OpenTelemetry standardizes the naming of certain attributes attached to telemetry collected. These standardized names are called Semantic Conventions in OpenTelemetry.

Propagator, B3Propagator

In order to pass contextual data across any services collecting OpenTelemetry data, you use Propagators that understand how to serialize and deserialize the data between services.

The contextual data transported by the Propagator is called Baggage. There are different formats for Baggage and each service collecting OpenTemetry should use the same baggage format. In this example, the B3 format is used.

Web Trace Provider

The Web TraceProvider supports the automatic tracing of the browser.

Span Processor, Exporter

The Span Processor handles processing of the traces when the trace is finished, including how to export the telemetry data.

WebVitals, DocumentLoader

These are additional telemetry collection libraries that capture telemetry for Core Web Vitals metrics.

Package Installation

You’ll first want to install the packages via npm or the appropriate method for your application.

In this example, we’ll be using the following packages in our package.json:

@opentelemetry/api
@opentelemetry/context-zone
@opentelemetry/exporter-collector
@opentelemetry/instrumentation-document-load
@opentelemetry/propagator-b3
@opentelemetry/sdk-trace-base
@opentelemetry/sdk-trace-web

Create otel-loader.ts

Imports

// OpenTelemetry
import * as otelCore from "@opentelemetry/core"
import * as otelApi from "@opentelemetry/api"

// Otel Setup (Trace Provider, Processor, Exporter, ...)
import { WebTracerProvider } from '@opentelemetry/sdk-trace-web'
import { BatchSpanProcessor } from '@opentelemetry/sdk-trace-base'
import { CollectorTraceExporter } from '@opentelemetry/exporter-collector'
import { registerInstrumentations } from '@opentelemetry/instrumentation'
import { ZoneContextManager } from "@opentelemetry/context-zone"

// Plugins
import { Resource } from '@opentelemetry/resources'
import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions'
import { DocumentLoadInstrumentation } from '@opentelemetry/instrumentation-document-load'
import { WebVitalsInstrumentation } from './instrumentation/web-vitals-instrumentation'
import { B3Propagator, B3InjectEncoding } from "@opentelemetry/propagator-b3"

Initialization

After importing, we’ll initialize and configure the package in an initOpenTelemetry() function

export function initOpenTelemetry() {
    // setup Propagator
    const propagator = new otelCore.CompositePropagator({
        propagators: [
            new B3Propagator(),
            new B3Propagator({ injectEncoding: B3InjectEncoding.MULTI_HEADER })
        ]
    })
    otelApi.propagation.setGlobalPropagator(propagator)

    // setup Collector
    // Replace YOUR_OPENTELEMETRY_COLLECTOR_ENDPOINT with the URL that accepts OTLP
    const collectorOptions = {
        url: "https://YOUR_OPENTELEMETRY_COLLECTOR_ENDPOINT/v1/traces",
        headers: {
            "content-type": "application/json"
        }
    }

    // setup Span Resource
    const resource = new Resource({
        [SemanticResourceAttributes.SERVICE_NAME]: "scout_apm",
        [SemanticResourceAttributes.SERVICE_NAMESPACE]: "scout",
        [SemanticResourceAttributes.SERVICE_INSTANCE_ID]: "web",
        [SemanticResourceAttributes.SERVICE_VERSION]: process.env.VERSION || "0.0.0",
    })

    // init provider and exporter
    const provider = new WebTracerProvider({ resource })
    const exporter = new CollectorTraceExporter( collectorOptions )

    // Add Span Processor to provider
    provider.addSpanProcessor(new BatchSpanProcessor(exporter, {
        // The maximum queue size. After the size is reached spans are dropped.
        maxQueueSize: 100,
        // The maximum batch size of every export. It must be smaller or equal to maxQueueSize.
        maxExportBatchSize: 50,
        // The interval between two consecutive exports
        scheduledDelayMillis: 500,
        // How long the export can run before it is canceled
        exportTimeoutMillis: 30000,
    }))

    // Instrumentation
    registerInstrumentations({
        instrumentations: [
            new DocumentLoadInstrumentation(),
            new WebVitalsInstrumentation(),
        ],
        tracerProvider: provider,
    })

    provider.register({
        contextManager: new ZoneContextManager().enable() as otelApi.ContextManager,
        propagator
    })

    // Baggage Init
    const baggage =
        otelApi.propagation.getBaggage(otelApi.context.active()) ||
        otelApi.propagation.createBaggage()
    baggage.setEntry("sessionId", { value: "session-id-value" })
    otelApi.propagation.setBaggage(otelApi.context.active(), baggage)
}

Wrapping up

Now we can load our OpenTelemetry code wherever we want:

import { initOpenTelemetry } from 'otel-loader'initOpenTelemetry()

That’s all there is for collecting telemetry data with distributed tracing connecting browser traces with back-end application traces! Learn about Scout’s path toward full-stack observability at scoutapm.com/observability.