React - also referred to as React.js or ReactJS - is a JavaScript library for creating user interfaces through UI components. This React library is open-source and free to use, maintained by Meta and groups of independent developers and businesses. As per any webapplication running remotely, troubleshooting React can be challenging.

Opentelemetry is a library ecosystem that implements instrumentation for common libraries and frameworks, providing automatic instrumentation for components that generate end-to-end telemetry data without requiring major code changes.

React and Opentelemetry both provide client side coverage. A trace collector is required to receive and index traces. Our polyglot stack qryn is designed to be 100% compatible with Opentelemetry standards and supports ingestion via Otel Collectors or directly through the built-in OTEL ingestion API, with no additional middleware.

"Webservability" is what happens when you mix these amazing technologies!

Opentelemetry + React

Opentelemetry web libraries can be used for instrumenting and tracing React applications, enabling developers to identify and resolve performance issues and bugs, track user requests originating from frontend to backend services and back.

Requirements

Let's install the necessary Opentelemetry libraries as first step:

bashCopy codenpm install @opentelemetry/api @opentelemetry/sdk-trace-web @opentelemetry/exporter-trace-otlp-http @opentelemetry/auto-instrumentations-web

⚛️ Manual Instrumentation

After installing the libraries, the next step is to configure our Opentelemetry exporter. Here's a basic setup for @opentelemetry/exporter-trace-otlp-http:

javascriptCopy codeimport { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
import { SimpleSpanProcessor } from '@opentelemetry/sdk-trace-base';
import { registerInstrumentations } from '@opentelemetry/instrumentation';
// Initialize OTLP Exporter
const otlpExporter = new OTLPTraceExporter({
  url: 'https://qryn:3100/v1/traces'
});
// Initialize the Tracer Provider
const provider = new WebTracerProvider();
// Add OTLP Exporter to the provider
provider.addSpanProcessor(new SimpleSpanProcessor(otlpExporter));
// Register the provider
provider.register();

You can now create custom spans in your components to trace specific operations or user interactions by wrapping the spans around your code of interest.

javascriptCopy codeimport { trace } from '@opentelemetry/api';
const tracer = trace.getTracer('your-tracer-name');
const MyComponent = () => {
  const span = tracer.startSpan('MyComponentRender');
  /* 
     Perform some operations 
  */
  span.end();
  return <div>My React Component</div>;
};

The configured OTLP exporter will send the collected traces to the specified OTEL API endpoint - in our case either qryn or qryn.cloud (https://qryn:3100/v1/traces)

⚛️ Auto-Instrumentation

Auto-instrumentation in the context of a React application using Opentelemetry primarily revolves around automatically capturing relevant telemetry data like user interactions, component render times, and API requests. This can be particularly useful as it minimizes the manual instrumentation code you need to write and maintain. Here's an example of how you can set up auto-instrumentation.

To begin, you need to install the @opentelemetry/auto-instrumentations-web package, which provides auto-instrumentation capabilities for web applications.

npm install @opentelemetry/auto-instrumentations-web

After installing the package, you can configure your Opentelemetry setup to automatically instrument your React application. Here's an example setup:

javascriptCopy codeimport { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
import { SimpleSpanProcessor } from '@opentelemetry/sdk-trace-base';
import { registerInstrumentations } from '@opentelemetry/instrumentation';
import { DocumentLoadInstrumentation, UserInteractionInstrumentation } from '@opentelemetry/auto-instrumentations-web';

// Initialize OTLP Exporter
const otlpExporter = new OTLPTraceExporter({
  url: 'https://qryn:3100/v1/traces'
});
// Initialize the Tracer Provider
const provider = new WebTracerProvider();
// Add OTLP Exporter to the provider
provider.addSpanProcessor(new SimpleSpanProcessor(otlpExporter));
// Register the provider
provider.register();
// Auto-instrumentations
registerInstrumentations({
  instrumentations: [
    new DocumentLoadInstrumentation(),
    new UserInteractionInstrumentation(),
  ],
  tracerProvider: provider,
});

When using auto-instrumentations your React application will automatically generate and export traces related to document loads and user interactions, providing valuable insights on your application internals with minimal manual setup.

Happy Conclusion

Opentelemetry in React combined with the polyglot features of qryn or qryn.cloud delivers one of the fastest and lightest end-to-end observability pairs ever!

qryn supports Opentelemetry ingestion natively and through a collectors reducing project requirements and moving parts to a minimum - with maximum results.

That's it! Give it a try in our code and share your feedback and suggestions!