@datadog/browser-rum-react

RUM Browser Monitoring - React integration

This package provides React and React ecosystem integrations for Datadog Browser RUM.

Installation

npm install @datadog/browser-rum @datadog/browser-rum-react

Usage

Initialization

To enable the React integration, pass the reactPlugin to the plugins option of the datadogRum.init method:

import { datadogRum } from '@datadog/browser-rum'
import { reactPlugin } from '@datadog/browser-rum-react'

datadogRum.init({
  applicationId: ...,
  clientToken: ...,
  ...
  plugins: [reactPlugin()],
})

Error Tracking

To track React component rendering errors, use one of the following:

• An ErrorBoundary component (see React documentation) that catches errors and reports them to Datadog.
• A function that you can use to report errors from your own ErrorBoundary component.

ErrorBoundary usage

import { ErrorBoundary } from '@datadog/browser-rum-react'

function App() {
  return (
    <ErrorBoundary fallback={ErrorFallback}>
      <MyComponent />
    </ErrorBoundary>
  )
}

function ErrorFallback({ resetError, error }: { resetError: () => void; error: unknown }) {
  return (
    <p>
      Oops, something went wrong! <strong>{String(error)}</strong> <button onClick={resetError}>Retry</button>
    </p>
  )
}

Reporting React errors from your own ErrorBoundary

import { addReactError } from '@datadog/browser-rum-react'

class MyErrorBoundary extends React.Component {
  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
    addReactError(error, errorInfo)
  }

  render() {
    ...
  }
}

React Router integration

react-router v6 allows you to declare routes using the following methods:

• Create routers with createMemoryRouter, createHashRouter, or createBrowserRouter functions.
• Use the useRoutes hook.
• Use the Routes component.

To track route changes with the Datadog RUM Browser SDK, first initialize the reactPlugin with the router: true option, then replace those functions with their equivalent from @datadog/browser-rum-react/react-router-v6. Example:

import { RouterProvider } from 'react-router-dom'
import { datadogRum } from '@datadog/browser-rum'
import { reactPlugin } from '@datadog/browser-rum-react'
// Use "createBrowserRouter" from @datadog/browser-rum-react/react-router-v6 instead of react-router-dom:
import { createBrowserRouter } from '@datadog/browser-rum-react/react-router-v6'

datadogRum.init({
  ...
  plugins: [reactPlugin({ router: true })],
})

const router = createBrowserRouter([
  {
    path: '/',
    element: <Root />,
    ...
  },
])

ReactDOM.createRoot(document.getElementById('root')).render(<RouterProvider router={router} />)

Changelog

v6.6.0

Public Changes:

• ✨ [RUM-7387] Add user id and account id to trace header (#3395) [LOGS] [RUM] [RUM-REACT] [RUM-SLIM] [WORKER]
• 🐛 [RUM-8606] Track First Hidden before init (#3391) [RUM] [RUM-REACT] [RUM-SLIM]
• 🐛 [devex] fix non-string log message (#3426)
• ⚡️ use import() for lazy loading chunks (#3399)
• ⚡️ [RUM-8664] do not update customer data when value does not changes (#3384) [RUM] [RUM-REACT] [RUM-SLIM]

Internal Changes:

• 👷 [RUM-105] use local dev server for local e2e tests (#3420)
• 👷 Enable the Terser 'unsafe' option (#3418)
• 👷 Update all non-major dependencies (#3408) [RUM-REACT]
• 👷 Enable Terser's unsafe_methods option (#3416)
• 👷 Use four Terser passes (#3414)
• 👷 Bump chrome to 134.0.6998.35-1 with signed commit (#3392)
• 🔧 Update GitLab CI configuration to exclude current staging branch from performance tests (#3425)
• ♻️ [RUM-8795] Replace XHR with Fetch for HTTP requests (#3417) [LOGS] [RUM] [RUM-REACT] [RUM-SLIM] [WORKER]
• ⚗️[RUM Profiler] Integrate Profiler into SDK (#3340) [LOGS] [RUM] [RUM-REACT] [RUM-SLIM] [WORKER]
• 🚨 [RUM-8945] add a rule to make sure we don't import dev deps in prod files (#3412)