React Integration
Monitor component render performance, Core Web Vitals, error boundary captures, and React Server Component timing. Full Real User Monitoring for React applications from a single SDK.
How It Works
Install the SDK
Run npm install @tigerops/react and initialize the SDK in your index.tsx or App entry point. It instruments your React component tree using React Profiler API and the web-vitals library with zero configuration.
Wrap With TigerOps Provider
Wrap your app root with the TigerOpsProvider component. It sets up error boundary instrumentation, context propagation for React Server Components, and session replay sampling — all in one line.
Configure Sampling & Privacy
Set component profiling sampling rate, session replay capture rate, and PII masking rules. TigerOps masks form inputs, passwords, and custom selectors by default before any data leaves the browser.
Correlate With Backend Traces
TigerOps propagates trace context from React fetch calls and Axios requests to your backend spans. Every slow user interaction is linked to the exact server-side trace that caused it.
What You Get Out of the Box
Component Render Profiling
Per-component render duration, wasted renders, and mount/update split using the React Profiler API. TigerOps identifies the slowest components in your tree and correlates them with user interactions.
Core Web Vitals (LCP, INP, CLS)
LCP, INP (Interaction to Next Paint), CLS, FCP, and TTFB per page and route. Segmented by device type, connection speed, geography, and React route for targeted optimization.
Error Boundary Captures
Automatic error capture from React error boundaries with full component stack traces. TigerOps groups errors by component tree path and links each error to the user session that triggered it.
React Server Components Timing
Server Component render time, streaming chunk latency, and hydration duration for Next.js and other RSC frameworks. Identify which server components are blocking time-to-interactive.
User Interaction Tracing
Click, scroll, and input interaction traces correlated with component re-renders and network requests. Build a full interaction timeline from user gesture to DOM update.
Session Replay & Rage Clicks
Privacy-safe session replay with rage click detection, dead click tracking, and form abandonment analysis. Reproduce user-reported bugs with the exact DOM state and network activity.
index.tsx TigerOps RUM Init
Initialize the TigerOps React SDK at your application entry point to start capturing performance and error data immediately.
// src/index.tsx — TigerOps React RUM initialization
import React from 'react'
import ReactDOM from 'react-dom/client'
import { TigerOpsProvider, initTigerOps } from '@tigerops/react'
import App from './App'
// Initialize before rendering — captures page load metrics from the start
initTigerOps({
apiKey: process.env.REACT_APP_TIGEROPS_API_KEY!,
service: 'my-react-app',
environment: process.env.NODE_ENV,
// Real User Monitoring settings
rum: {
trackCoreWebVitals: true, // LCP, INP, CLS, FCP, TTFB
trackInteractions: true, // Click, scroll, input traces
trackResources: true, // Fetch, XHR, script load timing
profileComponents: true, // React Profiler API integration
profilingSampleRate: 0.1, // Profile 10% of sessions
},
// Session replay (privacy-safe)
sessionReplay: {
enabled: true,
sampleRate: 0.05, // Record 5% of sessions
maskAllInputs: true, // Mask all form inputs by default
maskSelectors: ['.pii', '[data-sensitive]'],
},
// Distributed tracing — propagate to your backend
tracing: {
propagateTraceHeader: true,
tracingOrigins: ['https://api.myapp.com', /^https://.*.myapp.com$/],
},
})
const root = ReactDOM.createRoot(document.getElementById('root')!)
root.render(
<React.StrictMode>
{/* TigerOpsProvider adds error boundary + context propagation */}
<TigerOpsProvider>
<App />
</TigerOpsProvider>
</React.StrictMode>
)Common Questions
Does TigerOps work with React 18 concurrent features like Suspense and transitions?
Yes. TigerOps is built for React 18+ and correctly instruments concurrent rendering. It tracks Suspense boundary waterfall latency, useTransition deferred update timing, and useDeferredValue rendering cost separately from synchronous renders.
Does the React SDK work with Next.js App Router and Server Components?
Yes. TigerOps has first-class support for Next.js App Router. It instruments both Client Components via the browser SDK and Server Components via the Next.js server instrumentation, giving you end-to-end visibility across the RSC boundary.
How does component-level profiling affect production performance?
TigerOps uses sampling to limit profiling overhead. You configure a sample rate (e.g., 5% of page loads) and TigerOps only activates the React Profiler for sampled sessions. For non-sampled sessions, the SDK is a lightweight ~8KB bundle with no profiling overhead.
Can TigerOps help me find unnecessary re-renders?
Yes. TigerOps identifies wasted renders — renders where the component output did not change — and reports them with the component name, props diff, and parent that triggered the re-render. This makes it easy to identify where React.memo or useMemo would have the most impact.
Is session replay GDPR and CCPA compliant?
Yes. TigerOps session replay masks all user input fields, passwords, and configurable PII selectors before recording. No sensitive data is transmitted. TigerOps also supports consent-based sampling, only activating session replay after user consent is captured.
Full Visibility Into Your React Application
No credit card required. Install in minutes. Core Web Vitals, render profiling, and error tracking immediately.