OpenTelemetry SDK for Browser JS

NOTE: This package depends on experimental packages. There's no guarantee to work correctly.

This package provides OpenTelemetry SDK for Browser JS including tracing, metrics and logs.

Quick Start

Installation

npm

npm install @kimitsu/otel-sdk-web

yarn

yarn add @kimitsu/otel-sdk-web

pnpm

pnpm install @kimitsu/otel-sdk-web

Instrumentation

Create Tracer, Meter and Logger

const { tracer, meter, logger } = start({
  serviceName: "client",
  tracerName: "app",
  meterName: "app",
  loggerName: "app",
});

Emit Spans

const span = tracer.startSpan("client manual span");
span.end();

Emit Instruments

const counter = meter.createCounter("client_counter");
counter.add(1);

Emit LogRecords

logger.info("client log");

Configuration

Common Attributes

Option Name	Required	Description	Type	Default Value
serviceName	❌	Your service name.	string
otelcolOrigin	❌	The origin of OpenTelemetry Collector.	string	"http://localhost:4318"
debug	❌	The flag to enable debug output to console.log.	boolean	false

Traces Attributes

Option Name	Required	Description	Type	Default Value
tracerName	✅	The Tracer name.	string
otelcolTracesPath	❌	The path of the traces endpoint of OpenTelemetry Collector.	string	"/v1/traces"

Metrics Attributes

Option Name	Required	Description	Type	Default Value
meterName	✅	The Meter name.	string
otelcolMetricsPath	❌	The path of the metrics endpoint of OpenTelemetry Collector.	string	"/v1/metrics"
metricsExportIntervalMillis	❌	The interval in milliseconds for exporting metrics.	number	60_000

Logs Attributes

Option Name	Required	Description	Type	Default Value
loggerName	✅	The Logger name.	string
otelcolLogsPath	❌	The path of the logs endpoint of OpenTelemetry Collector.	string	"/v1/logs"
logLevel	❌	The log level.	SeverityNumber	SeverityNumber.INFO

Examples

Next.js

See under /examples/nextjs.