React

7 min

here’s how you can instrument a front end react application to generate traces , metrics , and logs , and send them to kloudmate using opentelemetry step 1 set up the example react application for this tutorial, we’ll be working with a simple single page application (spa) built using react and vite while the instrumentation approach shown here uses react, the same principles apply to other front end frameworks we'll use vite to scaffold the project and npm (version 5 2+ or higher) as the package manager step 2 set up a react app with vite we'll create a simple react + typescript application using vite npm create vite\@latest select react as the framework select typescript as the variant then run npm install npm run dev step 3 install the required opentelemetry packages npm install @opentelemetry/api \\ @opentelemetry/core \\ @opentelemetry/sdk trace web \\ @opentelemetry/exporter trace otlp http \\ @opentelemetry/instrumentation \\ @opentelemetry/auto instrumentations web \\ @opentelemetry/context zone \\ @opentelemetry/resources \\ @opentelemetry/auto configuration propagators step 4 instrumentation create a file named tracer ts inside the src folder and add the following code to it type import { simplespanprocessor, webtracerprovider } from '@opentelemetry/sdk trace web'; import { otlptraceexporter } from '@opentelemetry/exporter trace otlp http'; import { registerinstrumentations } from '@opentelemetry/instrumentation'; import { getwebautoinstrumentations } from '@opentelemetry/auto instrumentations web'; import { zonecontextmanager } from '@opentelemetry/context zone'; import { resourcefromattributes } from '@opentelemetry/resources'; import { w3ctracecontextpropagator } from "@opentelemetry/core"; import api from "@opentelemetry/api"; const provider = new webtracerprovider({ spanprocessors \[new simplespanprocessor(new otlptraceexporter({ url 'https //otel kloudmate com 4318/v1/traces', headers { authorization "your public key" } }))], resource resourcefromattributes({ 'service name' 'todo frontend', 'service version' '1 0', }), }) api propagation setglobalpropagator(new w3ctracecontextpropagator()); provider register({ contextmanager new zonecontextmanager(), }); // auto instrumentations registerinstrumentations({ instrumentations \[ getwebautoinstrumentations({ '@opentelemetry/instrumentation fetch' { propagatetraceheadercorsurls \[/^http \\/\\/localhost 3000\\/ $/], }, '@opentelemetry/instrumentation xml http request' { propagatetraceheadercorsurls \[/^http \\/\\/localhost 3000\\/ $/], }, '@opentelemetry/instrumentation user interaction' { enabled false }, '@opentelemetry/instrumentation document load' { enabled false }, }), ], tracerprovider provider, }); 2\ replace placeholders replace "your public key" with your actual kloudmate public key enter your backend url in the form of a regex in place of propagatetraceheadercorsurls to both fetch and xmlhttprequest configuration step 5 import the tracer in your main tsx or index tsx, import the tracer config before your app renders import { createroot } from "react dom/client"; import " /styles/index css"; import ' /tracer ts' import app from " /app"; createroot(document getelementbyid("root")!) render( \<app /> ); step 6 run the app npm run dev once the app is running, traces will be sent to kloudmate