See Real User Experience — Web Vitals, Errors, Sessions & Resources

npm i @watchlog/rum-react web-vitals
  
  
  // src/main.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: 'test-rum-react',
          apiKey : "<API-Key>",
          environment: 'dev',
          endpoint: '<EndPoint>',
          sampleRate: 0.3,
          networkSampleRate: 0.3,
          enableWebVitals: true,
          autoTrackInitialView: true,
          captureLongTasks: true,
          captureFetch: true,
          captureXHR: true,
          beforeSend: (ev) => {
            if (ev.type === 'web_vital') {
              console.log('WEB_VITAL →', ev.data.name, ev.data.value, ev);
            }
            return ev;
          },
        }}
      >
        <BrowserRouter>
          <WatchlogRoutes>
            <Route path="/" element={<App />} />
            <Route path="/user/:id" element={<User />} />
          </WatchlogRoutes>
        </BrowserRouter>
      </RumProvider>
    </React.StrictMode>
  )