React Native

npm install @opentelemetry/api @opentelemetry/core \
  @opentelemetry/sdk-trace-base @opentelemetry/sdk-trace-web \
  @opentelemetry/resources @opentelemetry/exporter-trace-otlp-http \
  @opentelemetry/instrumentation @opentelemetry/instrumentation-xml-http-request

# Expo
npx expo install expo-application expo-device

# Bare React Native
npm install react-native-device-info && npx pod-install

import { AppState, Platform } from "react-native";
import * as Application from "expo-application";
import * as Device from "expo-device";
import { W3CTraceContextPropagator } from "@opentelemetry/core";
import { OTLPTraceExporter } from "@opentelemetry/exporter-trace-otlp-http";
import { registerInstrumentations } from "@opentelemetry/instrumentation";
import { XMLHttpRequestInstrumentation } from "@opentelemetry/instrumentation-xml-http-request";
import { resourceFromAttributes } from "@opentelemetry/resources";
import {
  BatchSpanProcessor,
  ParentBasedSampler,
  TraceIdRatioBasedSampler,
} from "@opentelemetry/sdk-trace-base";
import { WebTracerProvider } from "@opentelemetry/sdk-trace-web";

const SAMPLE_RATIO = 1; // 0.1 keeps one trace in ten

export const provider = new WebTracerProvider({
  resource: resourceFromAttributes({
    "service.name": "mobile-app",
    "service.version": Application.nativeApplicationVersion ?? undefined,
    "deployment.environment.name": __DEV__ ? "development" : "production",
    "os.name": Platform.OS,
    "os.version": Device.osVersion ?? undefined,
    "device.model.name": Device.modelName ?? undefined,
    "sampling.probability": SAMPLE_RATIO,
  }),
  sampler: new ParentBasedSampler({
    root: new TraceIdRatioBasedSampler(SAMPLE_RATIO),
  }),
  spanProcessors: [
    new BatchSpanProcessor(
      new OTLPTraceExporter({
        url: "https://YOUR-INSTANCE/v1/traces",
        headers: { "x-knotel-key": "kn_YOUR_KEY" },
      }),
      { scheduledDelayMillis: 2000 },
    ),
  ],
});

provider.register({ propagator: new W3CTraceContextPropagator() });

registerInstrumentations({
  instrumentations: [
    new XMLHttpRequestInstrumentation({
      // Never trace the exporter's own requests.
      ignoreUrls: [/\/v1\/traces$/],
      // Your own APIs, which get a traceparent header.
      propagateTraceHeaderCorsUrls: [/^https:\/\/api\.example\.com\//],
    }),
  ],
});

// Send what's queued when the app leaves the foreground.
AppState.addEventListener("change", (state) => {
  if (state !== "active") void provider.forceFlush();
});

import "../tracing";

import DeviceInfo from "react-native-device-info";

  "service.version": DeviceInfo.getVersion(),
  "os.version": DeviceInfo.getSystemVersion(),
  "device.model.name": DeviceInfo.getModel(),

import { SpanStatusCode, trace } from "@opentelemetry/api";

const tracer = trace.getTracer("mobile-app");

await tracer.startActiveSpan("checkout", async (span) => {
  span.setAttribute("cart.items", items.length);
  try {
    await api.post("/orders", { items });
  } catch (err) {
    span.recordException(err as Error);
    span.setStatus({ code: SpanStatusCode.ERROR });
    throw err;
  } finally {
    span.end();
  }
});

const previous = ErrorUtils.getGlobalHandler();
ErrorUtils.setGlobalHandler((error, isFatal) => {
  const span = tracer.startSpan(`error: ${error.message}`.slice(0, 80), {
    attributes: { "exception.fatal": Boolean(isFatal) },
  });
  span.recordException(error);
  span.setStatus({ code: SpanStatusCode.ERROR });
  span.end();
  void provider.forceFlush();
  previous(error, isFatal);
});

npm install react-native-get-random-values

import "react-native-get-random-values";
import { AppState, Platform } from "react-native";
import { Exporter, formatTraceparent, Span, SpanKind } from "./knotel/core";

export const exporter = new Exporter({
  endpoint: "https://YOUR-INSTANCE",
  key: "kn_YOUR_KEY",
  resource: { "service.name": "mobile-app", "os.name": Platform.OS },
});

setInterval(() => void exporter.flush(), 5000);
AppState.addEventListener("change", (state) => {
  if (state !== "active") void exporter.flush();
});

export async function tracedFetch(url: string, init: RequestInit = {}) {
  const method = init.method ?? "GET";
  const span = new Span(exporter, `${method} ${url}`, {
    kind: SpanKind.CLIENT,
    attributes: { "http.request.method": method, "url.full": url },
  });
  const headers = new Headers(init.headers);
  headers.set("traceparent", formatTraceparent(span));
  try {
    const res = await fetch(url, { ...init, headers });
    span.setAttribute("http.response.status_code", res.status);
    return res;
  } catch (err) {
    span.recordException(err);
    throw err;
  } finally {
    span.end();
  }
}