Overview
This guide walks you through instrumenting your React Native application with OpenTelemetry to send traces to SigNoz. This instrumentation works for both SigNoz Cloud and Self-Host deployments.
By the end of this guide, your React Native app will automatically capture and export traces for:
- Network requests (fetch and XMLHttpRequest)
- Custom spans and events you define in your application code
Prerequisites:
- A React Native application (Android or iOS)
- Node.js and npm installed
- A SigNoz Cloud account or Self-Host instance
The JS OTel packages are supported for node and web environments. While they work for React Native as well, they are not explicitly supported for that environment, where they might break compatibility with minor version updates or require workarounds. Building JS OTel package support for React Native is an area of active development.
Step 1. Install OpenTelemetry packages
npm install --save @opentelemetry/api
npm install --save @opentelemetry/core
npm install --save @opentelemetry/exporter-trace-otlp-http
npm install --save @opentelemetry/instrumentation
npm install --save @opentelemetry/instrumentation-fetch
npm install --save @opentelemetry/instrumentation-xml-http-request
npm install --save @opentelemetry/resources
npm install --save @opentelemetry/sdk-trace-base
npm install --save @opentelemetry/sdk-trace-web
npm install --save @opentelemetry/semantic-conventions
Step 2. Create a tracing configuration file
Create a tracing.jsx file in the /hooks directory. This file initializes the OpenTelemetry tracer with the necessary configuration to export traces to SigNoz. It sets up:
- The tracer provider with resource attributes (service name, OS, device info)
- The OTLP HTTP exporter to send traces to SigNoz
- Auto-instrumentation for fetch and XMLHttpRequest network calls
import {
CompositePropagator,
W3CBaggagePropagator,
W3CTraceContextPropagator,
} from '@opentelemetry/core';
import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
import { BatchSpanProcessor } from '@opentelemetry/sdk-trace-base';
import { XMLHttpRequestInstrumentation } from '@opentelemetry/instrumentation-xml-http-request';
import { FetchInstrumentation } from '@opentelemetry/instrumentation-fetch';
import { registerInstrumentations } from '@opentelemetry/instrumentation';
import { resourceFromAttributes } from '@opentelemetry/resources';
import {
ATTR_OS_NAME,
ATTR_SERVICE_NAME,
} from '@opentelemetry/semantic-conventions/incubating';
import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
import { useEffect, useState } from 'react';
import { Platform } from 'react-native';
const Tracer = async () => {
const resource = resourceFromAttributes({
[ATTR_SERVICE_NAME]: "<service_name>",
[ATTR_OS_NAME]: Platform.OS,
});
const provider = new WebTracerProvider({
resource,
spanProcessors: [
new BatchSpanProcessor(
new OTLPTraceExporter({
// For SigNoz Self-Hosted, use the IP Address of the Self-Hosted SigNoz
url: 'https://ingest.<region>.signoz.cloud:443/v1/traces',
// Comment the next line if using SigNoz Self-Hosted. You don't need Headers for that
headers: {
'signoz-ingestion-key': '<your-ingestion-key>',
},
}),
{
scheduledDelayMillis: 500,
},
),
],
});
provider.register({
propagator: new CompositePropagator({
propagators: [
new W3CBaggagePropagator(),
new W3CTraceContextPropagator(),
],
}),
});
registerInstrumentations({
instrumentations: [
new FetchInstrumentation({
propagateTraceHeaderCorsUrls: /.*/,
clearTimingResources: false,
}),
// The React Native implementation of fetch is simply a polyfill on top of XMLHttpRequest:
// https://github.com/facebook/react-native/blob/7ccc5934d0f341f9bc8157f18913a7b340f5db2d/packages/react-native/Libraries/Network/fetch.js#L17
// Because of this when making requests using `fetch` there will an additional span created for the underlying
// request made with XMLHttpRequest. Since in this demo calls to /api/ are made using fetch, turn off
// instrumentation for that path to avoid the extra spans.
new XMLHttpRequestInstrumentation({
ignoreUrls: [/\/api\/.*/],
}),
],
});
};
interface TracerResult {
loaded: boolean;
}
// TODO providing a wrapper similar to this that uses hooks over the full JS OTEL API would be nice to have for both
// React Native and React development
export const useTracer = (): TracerResult => {
const [loaded, setLoaded] = useState<boolean>(false);
useEffect(() => {
if (!loaded) {
Tracer()
.catch(() => console.warn("failed to setup tracer"))
.finally(() => setLoaded(true));
}
}, [loaded]);
return {
loaded,
};
};
Replace the following placeholders:
<region>: Your SigNoz Cloud region (e.g.,us,eu, orin). See SigNoz Cloud endpoints<your-ingestion-key>: Your SigNoz ingestion key<service_name>: The name of your service (e.g.,my-react-native-app)
Step 3. Import it in main entry point of your React Native Application
import { useTracer } from "@/hooks/useTracer";
...
const { loaded: tracerLoaded } = useTracer();
...
Step 4. You can validate if your application is sending traces to SigNoz here.
Validating instrumentation by checking for traces
With your application running, you can verify that you’ve instrumented your application with OpenTelemetry correctly by confirming that tracing data is being reported to SigNoz.
To do this, you need to ensure that your application generates some data. Applications will not produce traces unless they are being interacted with, and OpenTelemetry will often buffer data before sending. So you need to interact with your application and wait for some time to see your tracing data in SigNoz.
Validate your traces in SigNoz:
- Trigger an action in your app that generates a web request. Hit the endpoint a number of times to generate some data. Then, wait for some time.
- In SigNoz, open the
Servicestab. Hit theRefreshbutton on the top right corner, and your application should appear in the list ofApplications. - Go to the
Tracestab, and apply relevant filters to see your application’s traces.
