Overview
With the Datadog RUM React integration, resolve performance issues quickly in React components by:
- Debugging the root cause of performance bottlenecks, such as a slow server response time, render-blocking resource, or an error inside a component
- Automatically correlating web performance data with user journeys, HTTP calls, and logs
- Alerting your engineering teams when crucial web performance metrics (such as Core Web Vitals) fall below a threshold that results in a poor user experience
Monitor your React applications from end-to-end by:
- Tracking and visualizing user journeys across your entire stack
- Debugging the root cause of slow load times, which may be an issue with your React code, network performance, or underlying infrastructure
- Analyzing and contextualizing every user session with attributes such as user ID, email, name, and more
- Unifying full-stack monitoring in one platform for frontend and backend development teams
Setup
Start by setting up Datadog RUM in your React application. If you’re creating a new RUM application in the Datadog App, select React as the application type. If you already have an existing RUM application, you can update its type to React instead. Once configured, the Datadog App will provide instructions for integrating the RUM-React plugin with the Browser SDK.
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 }) {
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, errorInfo) {
addReactError(error, errorInfo)
}
render() {
...
}
}
React 19 createRoot
Error Handling
React 19 introduced new error handling options for createRoot
that can help capture errors more effectively. You can configure these options to work with Datadog RUM error tracking. See the createRoot documentation for more details:
import { createRoot } from 'react-dom/client'
import { datadogRum } from '@datadog/browser-rum'
import { addReactError } from '@datadog/browser-rum-react'
const container = document.getElementById('root')
const root = createRoot(container, {
onUncaughtError: (error, errorInfo) => {
// Report uncaught errors to Datadog
addReactError(error, errorInfo)
console.error('Uncaught error:', error, errorInfo)
},
onCaughtError: (error, errorInfo) => {
// Report caught errors to Datadog
addReactError(error, errorInfo)
console.error('Caught error:', error, errorInfo)
},
onRecoverableError: (error, errorInfo) => {
// Report recoverable errors to Datadog
addReactError(error, errorInfo)
console.warn('Recoverable error:', error, errorInfo)
}
})
root.render(<App />)
These options provide comprehensive error coverage:
onUncaughtError
: Captures errors that would normally cause the app to crashonCaughtError
: Captures errors that are caught by error boundariesonRecoverableError
: Captures errors that React can recover from (like hydration mismatches)
React Router integration
react-router
v6 allows you to declare routes using the following methods:
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} />)
Go further with Datadog React integration
Traces
Connect your RUM and trace data to get a complete view of your application’s performance. See Connect RUM and Traces.
Logs
To start forwarding your React application’s logs to Datadog, see JavaScript Logs Collection.
Metrics
To generate custom metrics from your RUM application, see Generate Metrics.
Troubleshooting
Need help? Contact Datadog Support.
Further Reading
Additional helpful documentation, links, and articles: