React Native

Use OpenTelemetry to send traces from your React Native application’s JavaScript layer to ClickHouse Observability.

Set up OpenTelemetry

Follow the official OpenTelemetry React Native demo and its instrumentation source to initialize tracing and instrument network requests. The demo uses the OpenTelemetry JavaScript packages, which are not explicitly supported on React Native. Validate compatibility with your application’s React Native and OpenTelemetry versions.

Configure your destination

Replace the demo’s local exporter configuration with the destination below. Use this exporter in the span processor from the upstream setup. The exporter URL must include /v1/traces.

Fully managed
Self-managed

Open Team Settings → Data → Managed Telemetry in your service and copy the OTLP HTTP endpoint and API key. Keep the complete HTTPS endpoint, including its port, and append /v1/traces:

import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';

const traceExporter = new OTLPTraceExporter({
  url: 'https://YOUR_OTEL_ENDPOINT:4318/v1/traces',
  headers: {
    Authorization: 'Bearer YOUR_INGESTION_API_KEY',
  },
});

Use your collector’s OTLP HTTP endpoint and ingestion key. The collector must be reachable from the device. For collector setup, see Ingesting with OpenTelemetry.

import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';

const traceExporter = new OTLPTraceExporter({
  url: 'https://YOUR_COLLECTOR_HOST:4318/v1/traces',
  headers: {
    Authorization: 'YOUR_INGESTION_API_KEY',
  },
});

Verify ingestion

Run your application on a device or simulator and make network requests. In ClickHouse Observability, select a recent time range and find your application’s service name in Traces. For instrumentation details and React Native compatibility workarounds, see the OpenTelemetry React Native demo. For exporter options, see the OpenTelemetry JavaScript exporter documentation.

Introduction

Features

Administration

Guides

Integration partners

Self-managed

Set up OpenTelemetry

Configure your destination

Verify ingestion

​Set up OpenTelemetry

​Configure your destination

​Verify ingestion

Set up OpenTelemetry

Configure your destination

Verify ingestion