OpenTelemetry JavaScript distro for Uptrace

This document describes Uptrace for Web browsersopen in new window. For Node.js see @uptrace/node.

Resources

Installation

npm:

npm install @uptrace/web --save-dev

yarn:

yarn add @uptrace/web --dev

Configuration

You configure Uptrace client using a DSN (Data Source Name, for example, https://<token>@api.uptrace.dev/<project_id>) from the project settings page.

import { configureOpentelemetry } from '@uptrace/web'

// configureOpentelemetry automatically setups window.onerror handler.
configureOpentelemetry({
  // Set dsn or UPTRACE_DSN env var.
  dsn: '',

  serviceName: 'myservice',
  serviceVersion: '1.0.0',
})

You can use the following options to configure Uptrace client.

OptionDescription
dsnA data source that is used to connect to uptrace.dev. For example, https://<key>@api.uptrace.dev/<project_id>.
serviceNameservice.name resource attribute. For example, myservice.
serviceVersionservice.version resource attribute. For example, 1.0.0.
resourceAttributesAny other resource attributes.
resourceResource contains attributes representing an entity that produces telemetry. Resource attributes are copied to all spans and events.

You can also use environment variables to configure the client:

Env varDescription
UPTRACE_DSNA data source that is used to connect to uptrace.dev. For example, https://<key>@api.uptrace.dev/<project_id>.
OTEL_RESOURCE_ATTRIBUTESKey-value pairs to be used as resource attributes. For example, service.name=myservice,service.version=1.0.0.
OTEL_PROPAGATORSPropagators to be used as a comma separated list. The default is tracecontext,baggage.

OpenTelemetry API

All the code below is also available as a runnable exampleopen in new window.

Creating a tracer

To start creating spans, you need a tracer. You create a tracer by specifying a tracer name (AKA instrumentation library name):

const otel = require('@opentelemetry/api')

const tracer = otel.trace.getTracer('app_or_package_name', '1.0.0')

You can have as many tracers as you want, but usually you need only one tracer for each app/library. Use tracer names to identify the library that produces the spans.

Creating a span

Once you have a tracer, creating spans is easy:

// Create a span with name "operation-name" and kind="server".
const span = tracer.startSpan('operation-name', { kind: otel.SpanKind.SERVER })

// Activate the span.
otel.context.with(otel.setSpan(otel.context.active(), span), () => {
  doSomeWork()
  span.end()
})

Adding span attributes

To record contextual information, you can annotate spans with attributes that carry information specific to the operation. For example, an HTTP endpoint may have such attributes as http.method = GET and http.route = /projects/:id.

// To avoid expensive computations, check that span is recording
// before setting any attributes.
if (span.isRecording()) {
  span.setAttribute('http.method', 'GET')
  span.setAttribute('http.route', '/projects/:id')
}

You can name attributes as you want, but for common operations you should use semantic attributesopen in new window convention. It defines a list of common attribute keys with their meaning and possible values.

Adding span events

You can annotate spans with events that have start time and arbitrary number of attributes. The main difference between events and spans is that events don't have end time (and therefore no duration).

Events usually represent exceptions, errors, logs, and messages (such as in RPC). But you can record custom events as well.

span.addEvent('log', {
  'log.severity': 'error',
  'log.message': 'User not found',
  'enduser.id': '123',
})

Recording exceptions

OpenTelemetry provides a shortcut to record an exception.

} catch (err) {
  # Record the exception and update the span status.
  span.recordException(err)
  span.setStatus({ code: otel.SpanStatusCode.ERROR, message: String(err) })
}

Trace context and the active span

OpenTelemetry stores the current active span in a context and saves the context in a pluggable context storage. You can nest contexts inside each other and OpenTelemetry will automatically activate the parent span context when you end the span.

To create a new context with the active span:

otel.context.with(otel.setSpan(otel.context.active(), main), () => {})

To get a span from the current active context:

const span = otel.getSpan(otel.context.active())

Instrumentations

See opentelemetry-jsopen in new window for the full list of available instrumentations.

Instrumenting Vue.js 2.x

import Vue from 'vue'
import { configureOpentelemetry, reportException } from '@uptrace/web'

configureOpentelemetry({
  dsn: 'https://<token>@api.uptrace.dev/<project_id>',
})

Vue.config.errorHandler = (err, vm, info) => {
  reportException(err, {
    vm: vm,
    info: info,
  })
}