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 can configure Uptrace client using a DSN (Data Source Name, for example, https://<key>@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>@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>@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.

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://<key>@uptrace.dev/<project_id>',
})

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