Skip to content

Commit a8ed4d4

Browse files
inventarSarahinventarSarah
committed
streamline React Router v6 and v7 documentation
1 parent 09e515b commit a8ed4d4

File tree

2 files changed

+26
-78
lines changed
  • docs/platforms/javascript/guides/react/features/react-router

2 files changed

+26
-78
lines changed

‎docs/platforms/javascript/guides/react/features/react-router/v6.mdx‎

Lines changed: 13 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -4,38 +4,14 @@ description: "Learn about Sentry's React Router v6 integration."
44
sidebar_order: 20
55
---
66

7-
<Alert>
8-
- React Router v6 support is included in the `@sentry/react` package since
9-
version `7`.
10-
</Alert>
11-
12-
Update your `Sentry.browserTracingIntegration` to `Sentry.reactRouterV6BrowserTracingIntegration` and provide the required React hooks and router functions:
13-
14-
- `useEffect` hook from `react`
15-
- `useLocation` and `useNavigationType` hooks from `react-router-dom` or `react-router`
16-
- `createRoutesFromChildren` and `matchRoutes` functions from `react-router-dom` or `react-router`
17-
18-
<Alert level="warning">
19-
20-
To ensure proper routing instrumentation, initialize Sentry by calling `Sentry.init` **before**:
21-
22-
- Wrapping your `<Routes />` component
23-
- Using `useRoutes`
24-
- Using `wrapCreateBrowserRouterV6` or `wrapCreateMemoryRouterV6`
25-
26-
</Alert>
7+
_React Router v6 support is included in the `@sentry/react` package since version `7`._
278

289
### Usage with `createBrowserRouter` or `createMemoryRouter`
2910

30-
If you choose to create your router instance with [`createBrowserRouter`](https://reactrouter.com/en/main/routers/create-browser-router) or [`createMemoryRouter`](https://reactrouter.com/en/main/routers/create-memory-router), you can use `Sentry.wrapCreateBrowserRouterV6` or `Sentry.wrapCreateMemoryRouterV6` to wrap it with the instrumentation:
31-
32-
<Alert level="warning" title="Note">
33-
34-
`wrapCreateMemoryRouterV6` was introduced in SDK version 8.50.0. Prior to that version, we suggested using `wrapCreateBrowserRouterV6` with `createMemoryRouter`. If you are currently using `wrapCreateBrowserRouterV6` to wrap `createMemoryRouter`, it is recommended that you use `wrapCreateMemoryRouterV6` instead.
35-
36-
You can instrument [`createHashRouter`](https://reactrouter.com/en/main/routers/create-hash-router) using the `wrapCreateBrowserRouterV6` function.
11+
To instrument your React Router, update to `Sentry.reactRouterV6BrowserTracingIntegration` within `Sentry.init` and provide the required React hooks and router functions. Then, wrap the router instance created by `createBrowserRouter` or `createMemoryRouter` with one of the following functions:
3712

38-
</Alert>
13+
- Use `Sentry.wrapCreateBrowserRouterV6` for [`createBrowserRouter`](https://reactrouter.com/en/main/routers/create-browser-router) and [`createHashRouter`](https://reactrouter.com/en/main/routers/create-hash-router)
14+
- Use `Sentry.wrapCreateMemoryRouterV6` for [`createMemoryRouter`](https://reactrouter.com/en/main/routers/create-memory-router) (introduced in SDK version `8.50.0`)
3915

4016
```javascript {2-8, 15-21, 26-33}
4117
import React from "react";
@@ -73,7 +49,7 @@ const router = sentryCreateBrowserRouter([
7349

7450
### Usage With `<Routes />` Component
7551

76-
If you're using the `<Routes />` component to define your routes, wrap [`Routes`](https://reactrouter.com/en/main/components/routes) using `Sentry.withSentryReactRouterV6Routing`. This creates a higher order component, which will enable Sentry to reach your router context. You can also use `Sentry.withSentryReactRouterV6Routing` for `Routes` inside `BrowserRouter`. `MemoryRouter`, and `HashRouter` components:
52+
If you're using the `<Routes />` component to define your routes, update to `Sentry.reactRouterV6BrowserTracingIntegration` inside `Sentry.init` and provide the required React hooks and router functions. Then, wrap `<Routes />` using `Sentry.withSentryReactRouterV6Routing`. This creates a higher order component, which will enable Sentry to reach your router context. You can also use `Sentry.withSentryReactRouterV6Routing` for Routes inside `BrowserRouter`, `MemoryRouter`, and `HashRouter` components.
7753

7854
```javascript {3-11, 18-24, 29, 33-35}
7955
import React from "react";
@@ -115,19 +91,16 @@ ReactDOM.render(
11591
);
11692
```
11793

118-
This is only needed at the top level of your app, rather than how v4/v5 required wrapping every `<Route/>` you wanted parametrized.
94+
This wrapping is only needed at the top level of your app, unlike React Router v4/v5, which required wrapping every `<Route />` you wanted parametrized.
11995

12096
### Usage With `useRoutes` Hook
12197

122-
<Alert>
123-
Available in `@sentry/react` version `7.12.1` and above.
124-
</Alert>
125-
126-
If you specify your route definitions as an object to the [`useRoutes` hook](https://reactrouter.com/en/main/hooks/use-routes), use `Sentry.wrapUseRoutesV6` to create a patched `useRoutes` hook that instruments your routes with Sentry.
98+
_Available in `@sentry/react` version `7.12.1` and above._
12799

128-
<Alert level="warning">
100+
If you specify your route definitions as an object to the [`useRoutes` hook](https://reactrouter.com/en/main/hooks/use-routes), update to `Sentry.reactRouterV6BrowserTracingIntegration` inside `Sentry.init` and provide the required React hooks and router functions. Then, use `Sentry.wrapUseRoutesV6` to create a patched `useRoutes` hook that instruments your routes with Sentry.
129101

130-
`wrapUseRoutesV6` 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).
102+
<Alert level="warning" title="Important">
103+
Call `wrapUseRoutesV6` outside of a React component, as in the example below. We also recommend that you assign the wrapped hook to a variable starting with `use`, as per [React's documentation](https://react.dev/learn/reusing-logic-with-custom-hooks#hook-names-always-start-with-use).
131104

132105
</Alert>
133106

@@ -173,15 +146,15 @@ ReactDOM.render(
173146
);
174147
```
175148

176-
Now, Sentry should generate `pageload`/`navigation` transactions with parameterized transaction names (for example, `/teams/:teamid/user/:userid`), where applicable. This is only needed at the top level of your app, rather than how v4/v5 required wrapping every `<Route/>` you wanted parametrized.
149+
Now, Sentry should generate `pageload`/`navigation` transactions with parameterized transaction names (for example, `/teams/:teamid/user/:userid`), where applicable. This is only needed at the top level of your app, unlike React Router v4/v5, which required wrapping every `<Route />` you wanted parametrized.
177150

178151
### Custom Error Boundaries
179152

180153
When using `react-router`, errors thrown inside route elements will only be re-thrown in **development mode** while using [`strict mode`](https://react.dev/reference/react/StrictMode). In production, these errors won't be surfaced unless manually captured. If you **don't** have a custom error boundary in place, `react-router` will create a default one that "swallows" all errors.
181154

182155
<Alert>
183-
Note, that this only applies to render method and lifecycle errors since React
184-
doesn't need error boundaries to handle errors in event handlers.
156+
This only applies to render method and lifecycle errors since React doesn't
157+
need error boundaries to handle errors in event handlers.
185158
</Alert>
186159

187160
To send errors to Sentry while using a custom error boundary, use the `Sentry.captureException` method:

‎docs/platforms/javascript/guides/react/features/react-router/v7.mdx‎

Lines changed: 13 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -4,43 +4,19 @@ description: "Learn about Sentry's React Router v7 integration."
44
sidebar_order: 10
55
---
66

7-
8-
<Alert level="warning" title="Looking for framework mode?">
9-
- React Router v7 (framework mode) is currently in experimental Alpha, check out the docs [here](/platforms/javascript/guides/react-router/).
10-
</Alert>
11-
12-
<Alert level="info">
13-
React Router v7 (library mode) support is included in the `@sentry/react`
14-
package since version `8.42.0`.
7+
<Alert level="info" title="Looking for framework mode?">
8+
React Router v7 (framework mode) is currently in experimental Alpha, check out
9+
the docs [here](/platforms/javascript/guides/react-router/).
1510
</Alert>
1611

17-
Update your `Sentry.browserTracingIntegration` to `Sentry.reactRouterV7BrowserTracingIntegration` and provide the required React hooks and router functions:
18-
19-
- `useEffect` hook from `react`
20-
- `useLocation` and `useNavigationType` hooks from `react-router`
21-
- `createRoutesFromChildren` and `matchRoutes` functions from `react-router`
22-
23-
<Alert level="warning">
24-
25-
To ensure proper routing instrumentation, initialize Sentry by calling `Sentry.init` **before**:
26-
27-
- Wrapping your `<Routes />` component
28-
- Using `useRoutes`
29-
- Using `wrapCreateBrowserRouterV7` or `wrapCreateMemoryRouterV7`
30-
31-
</Alert>
12+
_React Router v7 (library mode) support is included in the `@sentry/react` package since version `8.42.0`._
3213

3314
### Usage with `createBrowserRouter` or `createMemoryRouter`
3415

35-
If you choose to create your router instance with [`createBrowserRouter`](https://reactrouter.com/en/main/routers/create-browser-router) or [`createMemoryRouter`](https://reactrouter.com/en/main/routers/create-memory-router), you can use `Sentry.wrapCreateBrowserRouterV7` or `Sentry.wrapCreateMemoryRouterV7` to wrap it with the instrumentation:
36-
37-
<Alert level="warning" title="Note">
38-
39-
`wrapCreateMemoryRouterV7` was introduced in SDK version 8.50.0. Prior to that version, we suggested using `wrapCreateBrowserRouterV7` with `createMemoryRouter`. If you are currently using `wrapCreateBrowserRouterV7` to wrap `createMemoryRouter`, it is recommended that you use `wrapCreateMemoryRouterV7` instead.
16+
To instrument your React Router, update to `Sentry.reactRouterV7BrowserTracingIntegration` within `Sentry.init` and provide the required React hooks and router functions. Then, wrap the router instance created by `createBrowserRouter` or `createMemoryRouter` with one of the following functions:
4017

41-
You can instrument [`createHashRouter`](https://reactrouter.com/en/main/routers/create-hash-router) using the `wrapCreateBrowserRouterV7` function.
42-
43-
</Alert>
18+
- Use `Sentry.wrapCreateBrowserRouterV7` for [`createBrowserRouter`](https://reactrouter.com/en/main/routers/create-browser-router) and [`createHashRouter`](https://reactrouter.com/en/main/routers/create-hash-router)
19+
- Use `Sentry.wrapCreateMemoryRouterV7` for [`createMemoryRouter`](https://reactrouter.com/en/main/routers/create-memory-router) (introduced in SDK version `8.50.0`)
4420

4521
```javascript {2-8, 15-21, 26-33}
4622
import React from "react";
@@ -78,7 +54,7 @@ const router = sentryCreateBrowserRouter([
7854

7955
### Usage With `<Routes />` Component
8056

81-
If you're using the `<Routes />` component to define your routes, wrap [`Routes`](https://reactrouter.com/en/main/components/routes) using `Sentry.withSentryReactRouterV7Routing`. This creates a higher order component, which will enable Sentry to reach your router context. You can also use `Sentry.withSentryReactRouterV7Routing` for `Routes` inside `BrowserRouter`. `MemoryRouter`, and `HashRouter` components:
57+
If you're using the `<Routes />` component to define your routes, update to `Sentry.reactRouterV7BrowserTracingIntegration` inside `Sentry.init` and provide the required React hooks and router functions. Then, wrap `<Routes />` using `Sentry.withSentryReactRouterV7Routing`. This creates a higher order component, which will enable Sentry to reach your router context. You can also use `Sentry.withSentryReactRouterV7Routing` for Routes inside `BrowserRouter`, `MemoryRouter`, and `HashRouter` components.
8258

8359
```javascript {3-11, 18-24, 29, 33-35}
8460
import React from "react";
@@ -120,15 +96,14 @@ ReactDOM.render(
12096
);
12197
```
12298

123-
This is only needed at the top level of your app, rather than how v4/v5 required wrapping every `<Route/>` you wanted parametrized.
99+
This wrapping is only needed at the top level of your app, unlike React Router v4/v5, which required wrapping every `<Route />` you wanted parametrized.
124100

125101
### Usage With `useRoutes` Hook
126102

127-
If you specify your route definitions as an object to the [`useRoutes` hook](https://reactrouter.com/en/main/hooks/use-routes), use `Sentry.wrapUseRoutesV7` to create a patched `useRoutes` hook that instruments your routes with Sentry.
128-
129-
<Alert level="warning">
103+
If you specify your route definitions as an object to the [`useRoutes` hook](https://reactrouter.com/en/main/hooks/use-routes), update to `Sentry.reactRouterV7BrowserTracingIntegration` inside `Sentry.init` and provide the required React hooks and router functions. Then, use `Sentry.wrapUseRoutesV7` to create a patched `useRoutes` hook that instruments your routes with Sentry.
130104

131-
`wrapUseRoutesV7` 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).
105+
<Alert level="warning" title="Important">
106+
Call `wrapUseRoutesV7` outside of a React component, as in the example below. We also recommend that you assign the wrapped hook to a variable starting with `use`, as per [React's documentation](https://react.dev/learn/reusing-logic-with-custom-hooks#hook-names-always-start-with-use).
132107

133108
</Alert>
134109

@@ -174,7 +149,7 @@ ReactDOM.render(
174149
);
175150
```
176151

177-
Now, Sentry should generate `pageload`/`navigation` transactions with parameterized transaction names (for example, `/teams/:teamid/user/:userid`), where applicable. This is only needed at the top level of your app, rather than how v4/v5 required wrapping every `<Route/>` you wanted parametrized.
152+
Now, Sentry should generate `pageload`/`navigation` transactions with parameterized transaction names (for example, `/teams/:teamid/user/:userid`), where applicable. This is only needed at the top level of your app, unlike React Router v4/v5, which required wrapping every `<Route />` you wanted parametrized.
178153

179154
### Custom Error Boundaries
180155

0 commit comments

Comments
 (0)