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.