From cbb747c83d34e5159b163f0cac0cf68cbd27f07e Mon Sep 17 00:00:00 2001 From: Onur Temizkan Date: Fri, 13 May 2022 09:50:37 +0000 Subject: [PATCH 1/4] Add React Router v6 instrumentation docs. --- .../integrations/react-router.mdx | 62 ++++++++++++++++++- 1 file changed, 61 insertions(+), 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 e48b64fa4038b..a8a428ed9505a 100644 --- a/src/platforms/javascript/guides/react/configuration/integrations/react-router.mdx +++ b/src/platforms/javascript/guides/react/configuration/integrations/react-router.mdx @@ -15,7 +15,67 @@ The React Router integration is designed to work with our Tracing SDK, `@sentry/ -We support integrations for React Router 3, 4 and 5. +We support integrations for React Router 3, 4, 5 and 6. + +## React Router v6 +_(Available in version 7 and above)_ + +To use React Router v6 with Sentry, you need to: + +1. Initialize `Sentry.reactRouterV6Instrumentation` as your routing instrumentation, and provide functions it needs to enable performance tracing. + + You need to provide: + + - `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. + +Example usage: + +```javascript +import React from 'react'; +import ReactDOM from "react-dom"; +import { + Routes, + BrowserRouter, + useLocation, + useNavigationType, + createRoutesFromChildren, + matchRoutes, +} from "react-router-dom"; +import * as Sentry from "@sentry/react"; +import { BrowserTracing } "@sentry/tracing"; + +Sentry.init({ + integrations: [ + new BrowserTracing({ + routingInstrumentation: Sentry.reactRouterV6Instrumentation( + React.useEffect, + useLocation, + useNavigationType, + createRoutesFromChildren, + matchRoutes, + ), + }), + ], + tracesSampleRate: 1.0, +}); + +const SentryRoutes = Sentry.withSentryReactRouterV6Routing(Routes) + +ReactDOM.render( + + + Home} /> + + , +); +``` + +Now, Sentry should be generating `pageload`/`navigation` transactions, with parameterized transaction names (ex. /teams/:teamid/user/:userid), where applicable. + ## React Router v4/v5 From b336868afd231abd8c080ce115a4de009efd0e3a Mon Sep 17 00:00:00 2001 From: Onur Temizkan Date: Fri, 13 May 2022 15:12:30 +0100 Subject: [PATCH 2/4] Apply suggestions from code review Co-authored-by: Isabel <76437239+imatwawana@users.noreply.github.com> --- .../configuration/integrations/react-router.mdx | 14 +++++--------- 1 file changed, 5 insertions(+), 9 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 a8a428ed9505a..b161dd21d221f 100644 --- a/src/platforms/javascript/guides/react/configuration/integrations/react-router.mdx +++ b/src/platforms/javascript/guides/react/configuration/integrations/react-router.mdx @@ -15,24 +15,20 @@ The React Router integration is designed to work with our Tracing SDK, `@sentry/ -We support integrations for React Router 3, 4, 5 and 6. +We support integrations for React Router 3, 4, 5, and 6. ## React Router v6 _(Available in version 7 and above)_ -To use React Router v6 with Sentry, you need to: +To use React Router v6 with Sentry: -1. Initialize `Sentry.reactRouterV6Instrumentation` as your routing instrumentation, and provide functions it needs to enable performance tracing. - - You need to provide: +1. 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. - -Example usage: +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: ```javascript import React from 'react'; @@ -74,7 +70,7 @@ ReactDOM.render( ); ``` -Now, Sentry should be generating `pageload`/`navigation` transactions, with parameterized transaction names (ex. /teams/:teamid/user/:userid), where applicable. +Now, Sentry should generate `pageload`/`navigation` transactions with parameterized transaction names (ex. /teams/:teamid/user/:userid), where applicable. ## React Router v4/v5 From 95b43dcb653038b7f82cd99d6e28f4945c230ed7 Mon Sep 17 00:00:00 2001 From: Onur Temizkan Date: Fri, 13 May 2022 15:42:24 +0100 Subject: [PATCH 3/4] Update src/platforms/javascript/guides/react/configuration/integrations/react-router.mdx Co-authored-by: Isabel <76437239+imatwawana@users.noreply.github.com> --- .../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 b161dd21d221f..1a688652d96c9 100644 --- a/src/platforms/javascript/guides/react/configuration/integrations/react-router.mdx +++ b/src/platforms/javascript/guides/react/configuration/integrations/react-router.mdx @@ -70,7 +70,7 @@ ReactDOM.render( ); ``` -Now, Sentry should generate `pageload`/`navigation` transactions with parameterized transaction names (ex. /teams/:teamid/user/:userid), where applicable. +Now, Sentry should generate `pageload`/`navigation` transactions with parameterized transaction names (for example, /teams/:teamid/user/:userid), where applicable. ## React Router v4/v5 From 6fb88b96422d36eeee6d975b9b8d824461e44c0d Mon Sep 17 00:00:00 2001 From: Onur Temizkan Date: Tue, 24 May 2022 09:08:06 +0000 Subject: [PATCH 4/4] Add missing `from`. --- .../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 1a688652d96c9..6b4824f4f1e3b 100644 --- a/src/platforms/javascript/guides/react/configuration/integrations/react-router.mdx +++ b/src/platforms/javascript/guides/react/configuration/integrations/react-router.mdx @@ -42,7 +42,7 @@ import { matchRoutes, } from "react-router-dom"; import * as Sentry from "@sentry/react"; -import { BrowserTracing } "@sentry/tracing"; +import { BrowserTracing } from "@sentry/tracing"; Sentry.init({ integrations: [