React

Instrumenting your React or Single Page Application (SPA) with the OpenTelemetry Web SDK allows you to capture user interactions, page load times, document fetches, and custom application metrics.

Installation

Install the required OpenTelemetry packages for web:

npm install @opentelemetry/api \
  @opentelemetry/core \
  @opentelemetry/sdk-trace-web \
  @opentelemetry/exporter-trace-otlp-http \
  @opentelemetry/context-zone \
  @opentelemetry/instrumentation \
  @opentelemetry/instrumentation-document-load \
  @opentelemetry/instrumentation-user-interaction

Configuration

Initialize the OpenTelemetry provider in your application’s entry point (e.g., index.js or main.tsx) and configure it to send data to the KloudMate Agent’s OTLP endpoint:

import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
import { SimpleSpanProcessor } from '@opentelemetry/sdk-trace-base';

const provider = new WebTracerProvider();
const exporter = new OTLPTraceExporter({
  url: 'http://KM_AGENT_HOST:4318/v1/traces' // Replace KM_AGENT_HOST
});

provider.addSpanProcessor(new SimpleSpanProcessor(exporter));
provider.register();

(Replace KM_AGENT_HOST with the IP address or hostname of your KloudMate Agent).

Official Documentation

OpenTelemetry is continuously evolving. For the most up-to-date SDK instructions, advanced configurations, and custom instrumentation details, refer to the official OpenTelemetry documentation:

Looking for a step-by-step tutorial?
Check out our Instrument a React App guide to see how to manually instrument a React Single Page Application.