# 🔎 React App observability with otel + qryn

**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**](https://qryn.dev) is designed to be 100% compatible with Opentelemetry standards and supports ingestion via Otel Collectors or directly through the [*built-in OTEL ingestion API*](https://qryn.metrico.in/#/support?id=otel-collector)*, with no additional middleware.*

**<mark>"Webservability"</mark>** is what happens when you mix these amazing technologies!

[![](https://opentelemetry.io/img/social/logo-wordmark-001.png align="left")](https://qryn.dev)

### 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:

```bash
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`:

```javascript
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.

```javascript
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**](https://qryn.dev) or [**qryn.cloud**](https://qryn.cloud) ([`https://qryn:3100/v1/traces`](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.

```bash
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:

```javascript
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**](https://qryn.dev) or [**qryn.cloud**](https://qryn.cloud) delivers one of the fastest and lightest end-to-end observability pairs ever!

[**qryn**](https://qryn.dev) 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!*](https://qryn.dev)

[![](https://user-images.githubusercontent.com/1423657/218818279-3efff74f-0191-498a-bdc4-f2650c9d3b49.gif align="center")](https://qryn.dev)