Talaria
Docs

React instrumentation and tracing

Browser pageload and fetch spans, React Profiler commit spans, and React Router navigation in @newtalaria/react.

@newtalaria/reactinstrumentationtracingspanshttp

@newtalaria/react uses the same automatic browser tracing as @newtalaria/browser: pageload, History navigation, fetch/XHR CLIENT spans, W3C traceparent on allowlisted origins, and web vitals as child spans of the pageload. Turn Tracing on in Project settings. Successful transactions follow the traces sample rate. Error transactions are always sent.

Profiler

Profiler records a React commit as an INTERNAL span named ui.react.<id> when tracing is on. The span carries ui.component_name and ui.render.duration_ms.

text
import { Profiler } from '@newtalaria/react';

<Profiler id="Checkout">
  <Checkout />
</Profiler>

withProfiler(Component, 'Checkout') wraps a component the same way.

React Router

instrumentReactRouter records v6/v7 navigations. react-router is a peer dependency. Call it once with the router you created:

javascript
import { instrumentReactRouter } from '@newtalaria/react';

const unsubscribe = instrumentReactRouter(router);

The first location starts a navigation transaction. Each later location starts another, with that pathname as the name. Call unsubscribe if the router goes away.

Manual spans

Talaria.startSpan and Talaria.startNavigation are the browser methods. Use a manual span for a multi-step action (submit, wizard) so it is not parented by the short pageload transaction after that transaction has ended.