@datadog/browser-rum-react
Advanced tools
This package provides React and React ecosystem integrations for Datadog Browser RUM.
npm install @datadog/browser-rum @datadog/browser-rum-react
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()],
})
To track React component rendering errors, use one of the following:
ErrorBoundary component (see React documentation) that catches errors and reports them to Datadog.ErrorBoundary component.ErrorBoundary usageimport { 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>
)
}
ErrorBoundaryimport { addReactError } from '@datadog/browser-rum-react'
class MyErrorBoundary extends React.Component {
componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
addReactError(error, errorInfo)
}
render() {
...
}
}
react-router v6 allows you to declare routes using the following methods:
createMemoryRouter, createHashRouter, or createBrowserRouter functions.useRoutes hook.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} />)
v6.4.0
Public Changes:
Internal Changes:
FAQs
Unknown package
The npm package @datadog/browser-rum-react receives a total of 24,429 weekly downloads. As such, @datadog/browser-rum-react popularity was classified as popular.
We found that @datadog/browser-rum-react demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket's Rubygems ecosystem support is moving from beta to GA, featuring enhanced security scanning to detect supply chain threats beyond traditional CVEs in your Ruby dependencies.
Research
The Socket Research Team investigates a malicious npm package that appears to be an Advcash integration but triggers a reverse shell during payment success, targeting servers handling transactions.
Security Fundamentals
The Socket Threat Research Team uncovers how threat actors weaponize shell techniques across npm, PyPI, and Go ecosystems to maintain persistence and exfiltrate data.