JavaScript (browser)

Installation

Install dependencies

npm install \
@opentelemetry/api \
@opentelemetry/auto-instrumentations-web \
@opentelemetry/context-zone \
@opentelemetry/core \
@opentelemetry/exporter-trace-otlp-proto \
@opentelemetry/instrumentation \
@opentelemetry/resources \
@opentelemetry/sdk-trace-web \
@opentelemetry/semantic-conventions

Add the following into your web project's main file:

import { diag, DiagConsoleLogger, DiagLogLevel } from "@opentelemetry/api";
import { getWebAutoInstrumentations } from "@opentelemetry/auto-instrumentations-web";
import { ZoneContextManager } from "@opentelemetry/context-zone";
import { W3CTraceContextPropagator } from "@opentelemetry/core";
import { OTLPTraceExporter } from "@opentelemetry/exporter-trace-otlp-proto";
import { registerInstrumentations } from "@opentelemetry/instrumentation";
import { Resource } from "@opentelemetry/resources";
import {
  BatchSpanProcessor,
  ConsoleSpanExporter,
  SimpleSpanProcessor,
  WebTracerProvider,
} from "@opentelemetry/sdk-trace-web";
import { SemanticResourceAttributes } from "@opentelemetry/semantic-conventions";

const CUBE_DEBUG = false;
const CUBE_SERVICE_NAME = "cubeapm-web";
const CUBE_EXPORTER_OTLP_TRACES_ENDPOINT = "http://localhost:4318/v1/traces";
const CUBE_PROPAGATE_TRACE_HEADER_CORS_URLS = [/^http:\/\/localhost:8080\//];

if (CUBE_DEBUG) {
  diag.setLogger(new DiagConsoleLogger(), DiagLogLevel.DEBUG);
}

const provider = new WebTracerProvider({
  resource: new Resource({
    [SemanticResourceAttributes.SERVICE_NAME]: CUBE_SERVICE_NAME,
  }),
});
if (CUBE_DEBUG) {
  provider.addSpanProcessor(
    new SimpleSpanProcessor(new ConsoleSpanExporter())
  );
} else {
  provider.addSpanProcessor(
    new BatchSpanProcessor(
      new OTLPTraceExporter({
        url: CUBE_EXPORTER_OTLP_TRACES_ENDPOINT,
      })
    )
  );
}
provider.register({
  contextManager: new ZoneContextManager(),
  propagator: new W3CTraceContextPropagator(),
});
registerInstrumentations({
  instrumentations: getWebAutoInstrumentations({
    "@opentelemetry/instrumentation-user-interaction": {
      enabled: false,
    },
    "@opentelemetry/instrumentation-fetch": {
      propagateTraceHeaderCorsUrls: CUBE_PROPAGATE_TRACE_HEADER_CORS_URLS,
    },
    "@opentelemetry/instrumentation-xml-http-request": {
      propagateTraceHeaderCorsUrls: CUBE_PROPAGATE_TRACE_HEADER_CORS_URLS,
    },
  }),
});

// Your code starts here
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <Provider store={store}>
        <BrowserRouter>
          <App />
        </BrowserRouter>
    </Provider>
  </React.StrictMode>
);

Installation​

Installation