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
Send traces via OTel Collector binary (recommended)

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.

tracing.ts

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-ingestion-key': '<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
          ],
        },
      }),
    ],
  });

tracing.js

'use strict'
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-ingestion-key': '<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.

📝 Note

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

tracing.ts

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
          ],
        },
      }),
    ],
  });

tracing.js

'use strict'
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.

You can auto-instrument sending traces from React JS application using one of the following methods:

Using Kubernetes OTel Operator (recommended)
Using OTel Collector Agent

K8s OTel Operator Based Automatic Instrumentation (recommended)

Send traces directly to SigNoz Cloud - Using K8s OTel Operator

For React JS application deployed on Kubernetes, you can auto-instrument the traces using Kubernetes OpenTelemetry Operator.

An OpenTelemetry Operator is a Kubernetes Operator that manages OpenTelemetry Collectors and auto-instrumentation of workloads. It basically simplifies the deployment and management of OpenTelemetry in a Kubernetes environment.

The OpenTelemetry Operator provides two Custom Resource Definitions (CRDs):

OpenTelemetryCollector
Instrumentation

The OpenTelemetryCollector CRD allows you to deploy and manage OpenTelemetry Collectors in your Kubernetes cluster.

The Instrumentation CRD allows you to configure and inject OpenTelemetry auto-instrumentation libraries into your workloads.

Here are the steps you need to follow to auto-instrument React JS application using OTel Operator:

Step 1. Install cert-manager

Run the following commands to apply cert manager.

kubectl apply -f https://github.com/cert-manager/cert-manager/releases/download/v1.16.1/cert-manager.yaml

kubectl wait --for=condition=Available deployments/cert-manager -n cert-manager

Step 2. Install OpenTelemetry Operator

To install the operator in the existing K8s cluster, run the following command:

kubectl apply -f https://github.com/open-telemetry/opentelemetry-operator/releases/download/v0.116.0/opentelemetry-operator.yaml

Installing the OpenTelemetry Operator sets up the necessary components and configurations to enable the observability and monitoring of applications running in the cluster.

Step 3. Setup the OpenTelemetry Collector instance

Once the opentelemetry-operator has been deployed, you can proceed with the creation of the OpenTelemetry Collector (otelcol) instance. The OpenTelemetry Collector collects, processes, and exports telemetry data.

There are different deployment modes for the OpenTelemetryCollector, and you can specify them in the spec.mode section of the custom resource. The available deployment modes are:

The default method - the Deployment mode, will be used here.

To create a simple instance of the OpenTelemetry Collector, create a file otel-collector.yaml with the following contents:

otel-collector.yaml

apiVersion: opentelemetry.io/v1alpha1
kind: OpenTelemetryCollector
metadata:
  name: otel-collector
spec:
  mode: deployment
  config: |
    receivers:
      otlp:
        protocols:
          grpc:
            endpoint: 0.0.0.0:4317
          http:
            endpoint: 0.0.0.0:4318
    processors:
      batch: {}
      resource/env:
        attributes:
        - key: deployment.environment
          value: prod # can be dev, prod, staging etc. based on your environment
          action: upsert
    exporters:
      debug: {}
      otlp:
        endpoint: "ingest.<region>.signoz.cloud:443" # replace <region> with your region of SigNoz Cloud
        tls:
          insecure: false
        headers:
          "signoz-ingestion-key": "<your-ingestion-key>" # Obtain from https://{your-signoz-tenant-url}/settings/ingestion-settings
    service:
      pipelines:
        traces:
          receivers: [otlp]
          processors: [batch, resource/env]
          exporters: [otlp]

Set the <region> to match your SigNoz Cloud region
Replace <your-ingestion-key> with your SigNoz ingestion key

Apply the above yaml file using the following command:

kubectl apply -f otel-collector.yaml

Step 4. Setup the Instrumentation instance

Once the OpenTelemetry Collector instance has been deployed, the next step will be to create an instrumentation instance, which will be responsible for sending OTLP data to the OTel Collector.

Create a file instrumentation.yaml with the following contents:

instrumentation.yaml

apiVersion: opentelemetry.io/v1alpha1
kind: Instrumentation
metadata:
  name: traces-instrumentation
spec:
  exporter:
    endpoint: https://ingest.<region>.signoz.cloud:443  # replace <region> with your region of SigNoz Cloud
  env:
    - name: OTEL_EXPORTER_OTLP_HEADERS
      value: signoz-ingestion-key="<signoz-token>"  # Obtain from https://{your-signoz-url}/settings/ingestion-settings
    - name: OTEL_EXPORTER_OTLP_INSECURE
      value: "false"
  propagators:
    - tracecontext
    - baggage
    - b3
  sampler:
    type: parentbased_traceidratio
    argument: "1"
  nodejs:
    image: ghcr.io/open-telemetry/opentelemetry-operator/autoinstrumentation-nodejs:latest

Apply the above instrumentation using the following command:

kubectl apply -f instrumentation.yaml

Step 5. Auto-instrument your React JS app with OpenTelemetry

Create deployment.yaml file for your React JS application as follows:

deployment.yaml

apiVersion: apps/v1
kind: Deployment
metadata:
  name: reactjs-app
spec:
  selector:
    matchLabels:
      app: reactjs-app
  replicas: 1
  template:
    metadata:
      labels:
        app: reactjs-app
      annotations:
        instrumentation.opentelemetry.io/inject-nodejs: "true"
        resource.opentelemetry.io/service.name: "reactjs-app"
    spec:
      containers:
      - name: app
        image: reactjs-app:latest
        ports:
        - containerPort: 8080

It is important to add the following annotation under spec > template > metadata > annotations:

instrumentation.opentelemetry.io/inject-nodejs: "true"`

This helps in auto-instrumenting the traces from the React JS application.

Apply the deployment using the following command:

kubectl apply -f deployment.yaml

With this, the auto-instrumentation of traces for React JS application is ready.

Step 6. Running the React JS application

In order to run the application on port 8080, run the following commands:

export POD_NAME=$(kubectl get pod -l app=<service-name> -o jsonpath="{.items[0].metadata.name}")  # service name is `reactjs-app` in this case.   

kubectl port-forward ${POD_NAME} 8080:8080

You can now access the application on port 8080.

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.

For React JS application deployed on Kubernetes, you need to install OTel Collector agent in your k8s infra to collect and send traces to SigNoz Cloud. You can find the instructions to install OTel Collector agent 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.

Once you have set up OTel Collector agent, you can proceed with OpenTelemetry React JS instrumentation:

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

tracing.ts

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
          ],
        },
      }),
    ],
  });

tracing.js

'use strict'
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.

From Windows, there are two ways to send data to SigNoz Cloud.

Send traces directly to SigNoz Cloud
Send traces via OTel Collector binary (recommended)

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

tracing.ts

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-ingestion-key': '<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
          ],
        },
      }),
    ],
  });

tracing.js

'use strict'
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-ingestion-key': '<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

//typescript.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

📝 Note

You can find instructions to install OTel Collector binary here in your Windows machine. 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

tracing.ts

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
          ],
        },
      }),
    ],
  });

//tracing.js
'use strict'
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.

Send Traces to Self-Hosted SigNoz

Steps to auto-instrument 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

tracing.ts

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: '<SIGNOZ-IP>',
  });
  
  // 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
          ],
        },
      }),
    ],
  });

tracing.js

'use strict'
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: '<SIGNOZ_IP>',
});

// 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
Replace <SIGNOZ-IP> with IP Address of Self Hosted SigNoz

Step 3. Import tracing.js / tracing.ts file in main.jsx

//main.tsx

import './tracing.ts';

📝 Note

If you're running your nodejs application in PM2 cluster mode, it doesn't support node args: Unitech/pm2#3227. As above sample app instrumentation requires to load tracing.js before app load by passing node arg, so nodejs instrumentation doesn't work in PM2 cluster mode. So you need to import tracing.js in your main application. The import ./tracing.js should be the first line of your application code and initialize it before any other function. Here's the sample github repo which shows the implementation.

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 the Refresh button on the top right corner, and your application should appear in the list of Applications.
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

React JS OpenTelemetry Instrumentation

Send traces to SigNoz Cloud

Send traces directly to SigNoz Cloud - Code Level Automatic Instrumentation

Send traces via OTel Collector binary - Code Level Automatic Instrumentation

K8s OTel Operator Based Automatic Instrumentation (recommended)

Send traces directly to SigNoz Cloud - Using K8s OTel Operator

Code Level Automatic Instrumentation

Send traces directly to SigNoz Cloud - Code Level Automatic Instrumentation

Send traces via OTel Collector binary - Code Level Automatic Instrumentation

Send Traces to Self-Hosted SigNoz

Steps to auto-instrument React JS application

Validating instrumentation by checking for traces

Sample React App

Was this page helpful?