React JS OpenTelemetry Instrumentation
This document contains instructions on how to set up OpenTelemetry instrumentation in your React JS applications and view your application traces in SigNoz.
Send traces to SigNoz Cloud
Based on your application environment, you can choose the setup below to send traces to SigNoz Cloud.
From VMs, there are two ways to send data to SigNoz Cloud.
Send traces directly to SigNoz Cloud - Code Level Automatic Instrumentation
Step 1. Install OpenTelemetry packages
npm install --save @opentelemetry/context-zone
npm install --save @opentelemetry/instrumentation
npm install --save @opentelemetry/auto-instrumentations-web
npm install --save @opentelemetry/sdk-trace-base
npm install --save @opentelemetry/sdk-trace-web
npm install --save @opentelemetry/resources
npm install --save @opentelemetry/semantic-conventions
npm install --save @opentelemetry/exporter-trace-otlp-http
Step 2. Create tracing.js / tracing.ts file in src
directory
You need to configure the endpoint for SigNoz cloud in this file. You can find your ingestion key from SigNoz cloud account details sent on your email.
import {
defaultResource,
resourceFromAttributes,
} from '@opentelemetry/resources';
import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
import { BatchSpanProcessor } from '@opentelemetry/sdk-trace-base';
import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
import { ZoneContextManager } from '@opentelemetry/context-zone';
import { registerInstrumentations } from '@opentelemetry/instrumentation';
import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web';
// Define resource and service attributes
const resource = defaultResource().merge(
resourceFromAttributes({
'service.name': '<service_name>',
'service.version': '0.1.0',
})
);
// Set up the OTLP trace exporter
const exporter = new OTLPTraceExporter({
url: 'https://ingest.<region>.signoz.cloud:443/v1/traces',
headers: {
'signoz-access-token': '<your-ingestion-key>',
},
});
// Set up the span processor
const processor = new BatchSpanProcessor(exporter);
// Create and configure the WebTracerProvider
const provider = new WebTracerProvider({
resource: resource,
spanProcessors: [processor], // Add the span processor here
});
// Register the tracer provider with the context manager
provider.register({
contextManager: new ZoneContextManager(),
});
// Set up automatic instrumentation for web APIs
registerInstrumentations({
instrumentations: [
getWebAutoInstrumentations({
'@opentelemetry/instrumentation-xml-http-request': {
propagateTraceHeaderCorsUrls: [
/.+/g, // Regex to match your backend URLs
],
},
'@opentelemetry/instrumentation-fetch': {
propagateTraceHeaderCorsUrls: [
/.+/g, // Regex to match your backend URLs
],
},
}),
],
});
- Set the
<region>
to match your SigNoz Cloud region - Replace
<your-ingestion-key>
with your SigNoz ingestion key <service_name>
is name of your service
Step 3. Import tracing.js / tracing.ts file in main.jsx
//main.tsx
import './tracing.ts';
Step 4. You can validate if your application is sending traces to SigNoz cloud here.
In case you encounter an issue where all applications do not get listed in the services section then please refer to the troubleshooting section.
Send traces via OTel Collector binary - Code Level Automatic Instrumentation
OTel Collector binary helps to collect logs, hostmetrics, resource and infra attributes. It is recommended to install Otel Collector binary to collect and send traces to SigNoz cloud. You can correlate signals and have rich contextual data through this way.
You can find instructions to install OTel Collector binary here in your VM. Once you are done setting up your OTel Collector binary, you can follow the below steps for instrumenting your React JS application.
Step 1. Install OpenTelemetry packages
npm install --save @opentelemetry/context-zone
npm install --save @opentelemetry/instrumentation
npm install --save @opentelemetry/auto-instrumentations-web
npm install --save @opentelemetry/sdk-trace-base
npm install --save @opentelemetry/sdk-trace-web
npm install --save @opentelemetry/resources
npm install --save @opentelemetry/semantic-conventions
npm install --save @opentelemetry/exporter-trace-otlp-http
Step 2. Create tracing.js / tracing.ts file
import {
defaultResource,
resourceFromAttributes,
} from '@opentelemetry/resources';
import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
import { BatchSpanProcessor } from '@opentelemetry/sdk-trace-base';
import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
import { ZoneContextManager } from '@opentelemetry/context-zone';
import { registerInstrumentations } from '@opentelemetry/instrumentation';
import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web';
// Define resource and service attributes
const resource = defaultResource().merge(
resourceFromAttributes({
'service.name': '<service_name>',
'service.version': '0.1.0',
})
);
// Set up the OTLP trace exporter
const exporter = new OTLPTraceExporter({
url: 'http://localhost:4318/v1/traces',
});
// Set up the span processor
const processor = new BatchSpanProcessor(exporter);
// Create and configure the WebTracerProvider
const provider = new WebTracerProvider({
resource: resource,
spanProcessors: [processor], // Add the span processor here
});
// Register the tracer provider with the context manager
provider.register({
contextManager: new ZoneContextManager(),
});
// Set up automatic instrumentation for web APIs
registerInstrumentations({
instrumentations: [
getWebAutoInstrumentations({
'@opentelemetry/instrumentation-xml-http-request': {
propagateTraceHeaderCorsUrls: [
/.+/g, // Regex to match your backend URLs
],
},
'@opentelemetry/instrumentation-fetch': {
propagateTraceHeaderCorsUrls: [
/.+/g, // Regex to match your backend URLs
],
},
}),
],
});
<service_name>
is name of your service
Step 3. Import tracing.js / tracing.ts file in main.jsx
//main.tsx
import './tracing.ts';
Step 4. You can validate if your application is sending traces to SigNoz cloud here.
In case you encounter an issue where all applications do not get listed in the services section then please refer to the troubleshooting section.
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
Services
tab. Hit theRefresh
button on the top right corner, and your application should appear in the list ofApplications
. - Go to the
Traces
tab, and apply relevant filters to see your application’s traces.
Sample React App
- We have included a sample applications at: Sample ReactJs App Github Repo