From 9bd6ecdfb24b2fbd267e8c8b91afe0d73d5ee355 Mon Sep 17 00:00:00 2001 From: Onur Temizkan Date: Mon, 21 Nov 2022 14:05:25 +0000 Subject: [PATCH 1/3] Add documentation for React Router 6.4 support. --- .../integrations/react-router.mdx | 46 +++++++++++++++++++ 1 file changed, 46 insertions(+) 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 da2fd11605a1a1..d1601c98bebeeb 100644 --- a/src/platforms/javascript/guides/react/configuration/integrations/react-router.mdx +++ b/src/platforms/javascript/guides/react/configuration/integrations/react-router.mdx @@ -34,6 +34,51 @@ Make sure `Sentry.reactRouterV6Instrumentation` is initialized by your `Sentry.i +### Usage with React Router 6.4 Data API +_(Available in version 7.21.0 and above)_ + + +If you create your router instance with [`createBrowserRouter`](https://reactrouter.com/en/main/routers/create-browser-router) from `react-router-dom` package, you can use `Sentry.wrapCreateBrowserRouter` to wrap it with the instrumentation: + +```jsx +import { createBrowserRouter } from 'react-router-dom'; +import * as Sentry from '@sentry/react'; +import { BrowserTracing } from '@sentry/tracing'; + +Sentry.init({ + dsn: '___PUBLIC_DSN___', + integrations: [ + new BrowserTracing({ + routingInstrumentation: Sentry.reactRouterV6Instrumentation( + React.useEffect, + useLocation, + useNavigationType, + createRoutesFromChildren, + matchRoutes, + ), + }), + ], + tracesSampleRate: 1.0, +}); + + +const sentryCreateBrowserRouter = Sentry.wrapCreateBrowserRouter( + createBrowserRouter +); + +const router = sentryCreateBrowserRouter([ + // ... +]); + +``` + + + +[`createHashRouter`](https://reactrouter.com/en/main/routers/create-hash-router) is not yet supported by Sentry. On the other hand [`createMemoryRouter`](https://reactrouter.com/en/main/routers/create-memory-router) can be instrumented using `wrapCreateBrowserRouter` function. + + + + ### 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: @@ -99,6 +144,7 @@ import { } from "react-router-dom"; import { wrapUseRoutes } from "@sentry/react"; import { useEffect } from "react"; +import { BrowserTracing } from "@sentry/tracing"; Sentry.init({ dsn: "___DSN___", From 435116811664b7b101a2c674d2d97ed08e64f7b7 Mon Sep 17 00:00:00 2001 From: Onur Temizkan Date: Mon, 21 Nov 2022 14:56:51 +0000 Subject: [PATCH 2/3] Use `javascript` code block instead of `jsx`. --- .../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 d1601c98bebeeb..1b589afd9901cc 100644 --- a/src/platforms/javascript/guides/react/configuration/integrations/react-router.mdx +++ b/src/platforms/javascript/guides/react/configuration/integrations/react-router.mdx @@ -40,7 +40,7 @@ _(Available in version 7.21.0 and above)_ If you create your router instance with [`createBrowserRouter`](https://reactrouter.com/en/main/routers/create-browser-router) from `react-router-dom` package, you can use `Sentry.wrapCreateBrowserRouter` to wrap it with the instrumentation: -```jsx +```javascript import { createBrowserRouter } from 'react-router-dom'; import * as Sentry from '@sentry/react'; import { BrowserTracing } from '@sentry/tracing'; From 93ce4fa140b479438f9ab38a69eef5e0b63219c4 Mon Sep 17 00:00:00 2001 From: Onur Temizkan Date: Tue, 22 Nov 2022 16:15:28 +0000 Subject: [PATCH 3/3] Apply suggestions from code review Co-authored-by: Liza Mock --- .../guides/react/configuration/integrations/react-router.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 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 1b589afd9901cc..a9cded273d1887 100644 --- a/src/platforms/javascript/guides/react/configuration/integrations/react-router.mdx +++ b/src/platforms/javascript/guides/react/configuration/integrations/react-router.mdx @@ -38,7 +38,7 @@ Make sure `Sentry.reactRouterV6Instrumentation` is initialized by your `Sentry.i _(Available in version 7.21.0 and above)_ -If you create your router instance with [`createBrowserRouter`](https://reactrouter.com/en/main/routers/create-browser-router) from `react-router-dom` package, you can use `Sentry.wrapCreateBrowserRouter` to wrap it with the instrumentation: +If you choose to create your router instance with [`createBrowserRouter`](https://reactrouter.com/en/main/routers/create-browser-router) from the `react-router-dom` package, you can use `Sentry.wrapCreateBrowserRouter` to wrap it with the instrumentation: ```javascript import { createBrowserRouter } from 'react-router-dom'; @@ -74,7 +74,7 @@ const router = sentryCreateBrowserRouter([ -[`createHashRouter`](https://reactrouter.com/en/main/routers/create-hash-router) is not yet supported by Sentry. On the other hand [`createMemoryRouter`](https://reactrouter.com/en/main/routers/create-memory-router) can be instrumented using `wrapCreateBrowserRouter` function. +While [`createHashRouter`](https://reactrouter.com/en/main/routers/create-hash-router) isn't supported by Sentry yet, you can instrument [`createMemoryRouter`](https://reactrouter.com/en/main/routers/create-memory-router) using the `wrapCreateBrowserRouter` function.