From 9ef1b0b3f8107d1855da0ff0f3da4bc99397f963 Mon Sep 17 00:00:00 2001 From: Onur Temizkan Date: Thu, 1 Sep 2022 10:32:53 +0000 Subject: [PATCH 1/3] Document `wrapUseRoutes` from React Router 6 instrumentation. --- .../integrations/react-router.mdx | 63 ++++++++++++++++++- 1 file changed, 60 insertions(+), 3 deletions(-) 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..e940e3136eebb 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 `` component from `react-router-dom` to define your routes, 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: ```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.0 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 to assign the wrapped hook to a variable name starting with `use`, in accordance with [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 From b5027c2a685d2b962443cce732b3d900c0e38bb4 Mon Sep 17 00:00:00 2001 From: Onur Temizkan Date: Thu, 1 Sep 2022 15:22:57 +0100 Subject: [PATCH 2/3] Apply suggestions from code review Co-authored-by: Isabel <76437239+imatwawana@users.noreply.github.com> --- .../react/configuration/integrations/react-router.mdx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) 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 e940e3136eebb..55c5974412d6d 100644 --- a/src/platforms/javascript/guides/react/configuration/integrations/react-router.mdx +++ b/src/platforms/javascript/guides/react/configuration/integrations/react-router.mdx @@ -28,9 +28,9 @@ Initialize `Sentry.reactRouterV6Instrumentation` as your routing instrumentation - `useLocation` and `useNavigationType` hooks from `react-router-dom` - `createRoutesFromChildren` and `matchRoutes` functions from `react-router-dom` or `react-router` packages. -### Usage with `` component +### Usage With `` Component -If you use `` component from `react-router-dom` to define your routes, 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: +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'; @@ -72,14 +72,14 @@ ReactDOM.render( ); ``` -### Usage with `useRoutes` hook +### Usage With `useRoutes` Hook _(Available in version 7.12.0 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 to assign the wrapped hook to a variable name starting with `use`, in accordance with [React documentation](https://reactjs.org/docs/hooks-custom.html#extracting-a-custom-hook). +`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). From e53038b72be4168b0b255d7903a649a57544de9f Mon Sep 17 00:00:00 2001 From: Abhijeet Prasad Date: Tue, 6 Sep 2022 15:06:54 +0200 Subject: [PATCH 3/3] Update src/platforms/javascript/guides/react/configuration/integrations/react-router.mdx --- .../guides/react/configuration/integrations/react-router.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 55c5974412d6d..5d02bc7da87e4 100644 --- a/src/platforms/javascript/guides/react/configuration/integrations/react-router.mdx +++ b/src/platforms/javascript/guides/react/configuration/integrations/react-router.mdx @@ -73,7 +73,7 @@ ReactDOM.render( ``` ### Usage With `useRoutes` Hook -_(Available in version 7.12.0 and above)_ +_(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.