Real User Monitoring (RUM)

// src/main.tsx (or src/index.tsx)
import React from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter, Route } from 'react-router-dom'
import { RumProvider, WatchlogRoutes } from '@watchlog/rum-react'

import App from './App'
import User from './UserPage'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <RumProvider
      config={{
        app: 'my-react-app',          // your application name (as shown in the dashboard)
        apiKey: '<API-Key>',          // copy from Watchlog panel
        environment: 'prod',          // e.g., 'prod' | 'staging' | 'dev'
        endpoint: 'https://api.watchlog.io/rum', // or your self-hosted endpoint
        // Sampling & capture options
        sampleRate: 0.1,              // 0.0–1.0 fraction of sessions to collect
        networkSampleRate: 0.1,       // sampling for fetch/XHR/resource
        enableWebVitals: true,        // capture LCP/INP/CLS/TTFB
        autoTrackInitialView: true,   // send a page_view on first render
        captureLongTasks: true,       // capture long tasks (main thread)
        captureFetch: true,           // instrument window.fetch
        captureXHR: true,             // instrument XMLHttpRequest
        // Optional privacy hook (redact, drop, enrich events)
        beforeSend: (ev) => {
          // Drop event by returning null
          // if (ev.type === 'resource') return null

          // Example: redact email-like strings from error messages
          if (ev.type === 'error' && typeof ev.data?.message === 'string') {
            ev.data.message = ev.data.message.replace(/[A-Z0-9._%+-]+@[A-Z0-9.-]+/gi, '[redacted]')
          }

          // Example: strip query strings from page URLs
          if (ev.context?.page?.url) {
            const u = new URL(ev.context.page.url)
            u.search = ''
            ev.context.page.url = u.toString()
          }
          return ev
        },
      }}
    >
      <BrowserRouter>
        {/* Wrap your routes so RUM can auto-track route changes */}
        <WatchlogRoutes>
          <Route path="/" element={<App />} />
          <Route path="/user/:id" element={<User />} />
        </WatchlogRoutes>
      </BrowserRouter>
    </RumProvider>
  </React.StrictMode>
)