diff --git a/src/platforms/javascript/guides/react/configuration/integrations/react-router.mdx b/src/platforms/javascript/guides/react/configuration/integrations/react-router.mdx index 5f64407502e7b..5d02bc7da87e4 100644 --- a/src/platforms/javascript/guides/react/configuration/integrations/react-router.mdx +++ b/src/platforms/javascript/guides/react/configuration/integrations/react-router.mdx @@ -22,13 +22,15 @@ _(Available in version 7 and above)_ To use React Router v6 with Sentry: -1. Initialize `Sentry.reactRouterV6Instrumentation` as your routing instrumentation and provide the functions it needs to enable performance tracing: +Initialize `Sentry.reactRouterV6Instrumentation` as your routing instrumentation and provide the functions it needs to enable performance tracing: - `useEffect` hook from `react` - `useLocation` and `useNavigationType` hooks from `react-router-dom` - `createRoutesFromChildren` and `matchRoutes` functions from `react-router-dom` or `react-router` packages. -2. Wrap [`Routes`](https://reactrouter.com/docs/en/v6/api#routes-and-route) using `Sentry.withSentryReactRouterV6Routing` to create a higher order component, which will enable Sentry to reach your router context, as in the example below: +### Usage With `` Component + +If you use the `` component from `react-router-dom` to define your routes, wrap [`Routes`](https://reactrouter.com/docs/en/v6/api#routes-and-route) using `Sentry.withSentryReactRouterV6Routing`. This creates a higher order component, which will enable Sentry to reach your router context, as in the example below: ```javascript import React from 'react'; @@ -70,7 +72,62 @@ ReactDOM.render( ); ``` -Now, Sentry should generate `pageload`/`navigation` transactions with parameterized transaction names (for example, /teams/:teamid/user/:userid), where applicable. +### Usage With `useRoutes` Hook +_(Available in version 7.12.1 and above)_ + +If you specify your route definitions as an object to the [`useRoutes` hook](https://reactrouter.com/en/main/hooks/use-routes), use `Sentry.wrapUseRoutes` to create a patched `useRoutes` hook that instruments your routes with Sentry. + + + +`wrapUseRoutes` should be called outside of a React component, as in the example below. It's also recommended that you assign the wrapped hook to a variable name starting with `use`, as per the [React documentation](https://reactjs.org/docs/hooks-custom.html#extracting-a-custom-hook). + + + +```javascript +import { + createRoutesFromChildren, + matchRoutes, + useLocation, + useNavigationType, + useRoutes, +} from "react-router-dom"; +import { wrapUseRoutes } from "@sentry/react"; +import { useEffect } from "react"; + +Sentry.init({ + dsn: "__DSN__", + integrations: [ + new BrowserTracing({ + routingInstrumentation: Sentry.reactRouterV6Instrumentation( + useEffect, + useLocation, + useNavigationType, + createRoutesFromChildren, + matchRoutes, + ), + }), + ], + tracesSampleRate: 1.0, +}); + +const useSentryRoutes = wrapUseRoutes(useRoutes); + +function App() { + return useSentryRoutes([ + // ... + ]); +} + +ReactDOM.render( + + + , + document.getElementById("root"), +); +``` + + +Now, Sentry should generate `pageload`/`navigation` transactions with parameterized transaction names (for example, `/teams/:teamid/user/:userid`), where applicable. ## React Router v4/v5