🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@datadog/browser-rum-react

Package Overview
Dependencies
Maintainers
1
Versions
22
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@datadog/browser-rum-react - npm Package Compare versions

Comparing version

6.6.3
to
6.6.4

14

package.json
{
"name": "@datadog/browser-rum-react",
"version": "6.6.3",
"version": "6.6.4",
"license": "Apache-2.0",

@@ -16,4 +16,4 @@ "main": "cjs/entries/main.js",

"dependencies": {
"@datadog/browser-core": "6.6.3",
"@datadog/browser-rum-core": "6.6.3"
"@datadog/browser-core": "6.6.4",
"@datadog/browser-rum-core": "6.6.4"
},

@@ -39,7 +39,7 @@ "peerDependencies": {

"devDependencies": {
"@types/react": "19.0.12",
"@types/react-dom": "19.0.4",
"@types/react": "19.1.2",
"@types/react-dom": "19.1.2",
"react": "19.1.0",
"react-dom": "19.1.0",
"react-router-dom": "7.4.1",
"react-router-dom": "7.5.1",
"react-router-dom-6": "npm:react-router-dom@6.30.0"

@@ -58,3 +58,3 @@ },

},
"gitHead": "f7d6805a736818f9cf357de5c8b9fe291bbe8af8"
"gitHead": "bd442a3ae349607cdd14c9ae2db22c9a2a240f71"
}

110

README.md

@@ -5,110 +5,4 @@ # RUM Browser Monitoring - React integration

## Installation
See the [dedicated Datadog documentation][1] for more details.
```bash
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:
```javascript
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][1]) that catches errors and reports them to Datadog.
- A function that you can use to report errors from your own `ErrorBoundary` component.
#### `ErrorBoundary` usage
```javascript
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`
```javascript
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`][2], [`createHashRouter`][3], or [`createBrowserRouter`][4] functions.
- Use the [`useRoutes`][5] hook.
- Use the [`Routes`][6] 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:
```javascript
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} />)
```
[1]: https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary
[2]: https://reactrouter.com/en/main/routers/create-memory-router
[3]: https://reactrouter.com/en/main/routers/create-hash-router
[4]: https://reactrouter.com/en/main/routers/create-browser-router
[5]: https://reactrouter.com/en/main/hooks/use-routes
[6]: https://reactrouter.com/en/main/components/routes
[1]: https://docs.datadoghq.com/integrations/rum_react