تجربهٔ واقعی کاربران را ببینید — وب‌وایتال‌ها، خطاها، سشن‌ها و منابع

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: 'prod',
        endpoint: 'https://api.watchlog.ir/rum',
        sampleRate: 0.1,
        networkSampleRate: 0.1,
        enableWebVitals: true,
        autoTrackInitialView: true,
        captureLongTasks: true,
        captureFetch: true,
        captureXHR: true,
        beforeSend: (ev) => {
          // ماسک‌کردن داده‌های حساس در صورت نیاز
          return ev
        },
      }}
    >
      <BrowserRouter>
        <WatchlogRoutes>
          <Route path="/" element={<App />} />
          <Route path="/user/:id" element={<User />} />
        </WatchlogRoutes>
      </BrowserRouter>
    </RumProvider>
  </React.StrictMode>
)