OpenTelemetry Browser

July 31, 2026 · View on GitHub

About

This repository is the home of OpenTelemetry Browser instrumentations and the future home of the OpenTelemetry Browser SDK.

This repo provides event-based instrumentations that emit events (structured log records) for browser performance and user interactions. These complement the existing span-based instrumentations maintained in the opentelemetry-js and opentelemetry-js-contrib repositories.

See the Browser Packages section below for a full list of browser-related packages across all repositories.

Quick Start

Installation

npm install @opentelemetry/browser-instrumentation \
  @opentelemetry/api \
  @opentelemetry/api-logs \
  @opentelemetry/sdk-logs \
  @opentelemetry/instrumentation

Basic example

import { logs } from '@opentelemetry/api-logs';
import {
  ConsoleLogRecordExporter,
  LoggerProvider,
  SimpleLogRecordProcessor,
} from '@opentelemetry/sdk-logs';
import { registerInstrumentations } from '@opentelemetry/instrumentation';
import { NavigationTimingInstrumentation } from '@opentelemetry/browser-instrumentation/experimental/navigation-timing';
import { ResourceTimingInstrumentation } from '@opentelemetry/browser-instrumentation/experimental/resource-timing';
import { UserActionInstrumentation } from '@opentelemetry/browser-instrumentation/experimental/user-action';
import { WebVitalsInstrumentation } from '@opentelemetry/browser-instrumentation/experimental/web-vitals';
import { ConsoleInstrumentation } from '@opentelemetry/browser-instrumentation/experimental/console';

const logProvider = new LoggerProvider({
  processors: [
    new SimpleLogRecordProcessor(new ConsoleLogRecordExporter()),
  ],
});
logs.setGlobalLoggerProvider(logProvider);

registerInstrumentations({
  instrumentations: [
    new NavigationTimingInstrumentation(),
    new ResourceTimingInstrumentation(),
    new UserActionInstrumentation(),
    new WebVitalsInstrumentation(),
    new ConsoleInstrumentation(),
  ],
});

For detailed configuration options, see the instrumentation package README.

npm install
npm run dev

This starts the sandbox with hot-reload via Vite at http://localhost:5173.

Package	Description	Status
@opentelemetry/browser-instrumentation	Event-based browser instrumentations (navigation timing, resource timing, user actions, web vitals, console).	experimental

Event-based instrumentations (other repositories)

Package	Location	Description	Status
instrumentation-browser-navigation	opentelemetry-js-contrib	Capture browser navigation events (SPA route changes).	experimental
instrumentation-web-exception	opentelemetry-js-contrib	Capture unhandled exceptions and promise rejections.	experimental

Span-based instrumentations (other repositories)

Package	Location	Description	Status
opentelemetry-instrumentation-fetch	opentelemetry-js	Instrumentation for the Fetch API.	experimental
opentelemetry-instrumentation-xml-http-request	opentelemetry-js	Instrumentation for XMLHttpRequest.	experimental
instrumentation-document-load	opentelemetry-js-contrib	Capture document load/navigation timing spans.	experimental
instrumentation-long-task	opentelemetry-js-contrib	Capture Long Tasks API entries as spans.	experimental
instrumentation-user-interaction	opentelemetry-js-contrib	Trace user interactions (e.g., clicks).	experimental
plugin-react-load	opentelemetry-js-contrib	Instrument React application load/mount performance.	experimental

SDK and Utilities (other repositories)

Package	Location	Description	Status
opentelemetry-sdk-trace-web	opentelemetry-js	Browser tracing SDK (WebTracerProvider, web tracing setup).	stable
opentelemetry-browser-detector	opentelemetry-js	Resource detector for browser environment attributes.	experimental
web-common	opentelemetry-js	Shared utilities for browser/web instrumentations.	experimental
opentelemetry-context-zone	opentelemetry-js	Zone.js-based context manager for maintaining trace context in browsers.	stable
auto-instrumentations-web	opentelemetry-js-contrib	Bundle that auto-enables common web instrumentations.	experimental