@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.4.0

Public Changes:

• ✨ [RUM-5500] React-router v7 support (#3299) [LOGS] [RUM] [RUM-REACT] [RUM-SLIM] [WORKER]
• ✨ [RUM-7459] Collect error context from a custom Error field (#3320) [LOGS] [RUM] [RUM-REACT] [RUM-SLIM] [WORKER]
• ✨ [RUM-7958] Deprecate setUser without required Id (#3262) [LOGS] [RUM] [RUM-REACT] [RUM-SLIM] [WORKER]
• ✨ [RUM-7019] Add setAccount API and account in RUM events (#3242) [LOGS] [RUM] [RUM-REACT] [RUM-SLIM] [WORKER]
• 🐛 Fix empty string for resource url in LCP (#3378) [RUM] [RUM-REACT] [RUM-SLIM]
• 🐛 [extension] fix Vital events rendering (#3366) [RUM] [RUM-REACT] [RUM-SLIM]

Internal Changes:

• 👷 remove webdriverio dependency (#3373)
• 👷 remove unused global jasmine types (#3374) [RUM]
• 👷 Update all non-major dependencies (#3367)
• 👷 Update dependency globals to v16 (#3370)
• 👷 Update Node.js to v23 (#3368)
• 👷 Update dependency eslint-plugin-unicorn to v57 (#3369)
• 👷 format rum event format validation errors (#3363)
• 👷 Update dependency ajv to v8 (#3348) [RUM] [RUM-REACT] [RUM-SLIM]
• 👷 only connect to background script when the extension is actually loaded (#3350)
• 👷 Update dependency emoji-name-map to v2 (#3344)
• 👷 Update all non-major dependencies (#3332) [RUM-REACT] [WORKER]
• 👷 Update react monorepo to v19 (major) (#3201) [RUM-REACT]
• ✅ Change flush sync into act (#3364) [LOGS] [RUM] [RUM-REACT] [RUM-SLIM] [WORKER]
• ⚗️✨ [RUM-8622] session consistent trace sampling (#3352) [RUM] [RUM-REACT] [RUM-SLIM]
• Define an error type and message for handling stacks (#3359) [LOGS] [RUM] [RUM-REACT] [RUM-SLIM] [WORKER]
• ♻️ [RUM-8649] Use assembly hook for feature flags (#3353) [RUM] [RUM-REACT] [RUM-SLIM]
• ♻️ refactor npm scripts (#3345)
• ♻️ use playwright for e2e (#3159) [RUM]
• Add modifiable field path for lcp resource_url (#3346) [LOGS] [RUM] [RUM-REACT] [RUM-SLIM] [WORKER]
• ♻️ Use window.crypto instead of getCrypto wrapper [RUM] [RUM-REACT] [RUM-SLIM]
• 🔥 remove some workarounds related to unsupported browsers (#3336) [RUM] [RUM-REACT] [RUM-SLIM]
• Add flag to always publish all pacakages (#3343)
• ♻️ [RUM-8340] Use assembly hook for ci and synthetics contexts (#3310) [RUM] [RUM-REACT] [RUM-SLIM]
• ♻️ [RUM-8319] Use assembly hook for action (#3305) [RUM] [RUM-REACT] [RUM-SLIM]