Package Exports

@datadog/browser-rum-react
@datadog/browser-rum-react/cjs/entries/main.js
@datadog/browser-rum-react/esm/entries/main.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@datadog/browser-rum-react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

RUM Browser Monitoring - React integration

[!CAUTION] This package is experimental. Use at your own risk.

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 betaPlugins option of the datadogRum.init method:

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

datadogRum.init({
  applicationId: ...,
  clientToken: ...,
  ...
  betaPlugins: [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({
  ...
  betaPlugins: [reactPlugin({ router: true })],
})

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

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

@datadog/browser-rum-react