Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 10 additions & 14 deletions docs/platforms/javascript/guides/react/features/react-router/v6.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -19,18 +19,21 @@ Update your `Sentry.browserTracingIntegration` to `Sentry.reactRouterV6BrowserTr
To ensure proper routing instrumentation, initialize Sentry by calling `Sentry.init` **before**:
- Wrapping your `<Routes />` component
- Using `useRoutes`
- Using `createBrowserRouterV6`
- Using `wrapCreateBrowserRouterV6` or `wrapCreateMemoryRouterV6`

</Alert>

### Usage with `createBrowserRouter`
### Usage with `createBrowserRouter` or `createMemoryRouter`

<Alert level="info">
Available in `@sentry/react` version `7.21.0` and above.
</Alert>
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:

<Alert level="warning" title="Note">

`wrapCreateMemoryRouterV6` is available from `@sentry/react` version `8.49.0`. For versions prior to `8.49.0`, you can use `wrapCreateBrowserRouterV6` with `createMemoryRouter`.

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.wrapCreateBrowserRouterV6` to wrap it with the instrumentation:
You can instrument [`createHashRouter`](https://reactrouter.com/en/main/routers/create-hash-router) using the `wrapCreateBrowserRouterV6` function.

</Alert>

```javascript {2-8, 15-21, 26-33}
import React from "react";
Expand Down Expand Up @@ -66,13 +69,6 @@ const router = sentryCreateBrowserRouter([
]);
```

<Alert level="warning" title="Note">

You can instrument [`createMemoryRouter`](https://reactrouter.com/en/main/routers/create-memory-router) and [`createHashRouter`](https://reactrouter.com/en/main/routers/create-hash-router) using the `wrapCreateBrowserRouterV6` function.

</Alert>


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

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:
Expand Down Expand Up @@ -203,7 +199,7 @@ const router = sentryCreateBrowserRouter([
element: <Outlet />,
errorElement: <YourCustomRootErrorBoundary />,
children: [
// other routes ...
// other routes ...
],
},
],
Expand Down
24 changes: 12 additions & 12 deletions docs/platforms/javascript/guides/react/features/react-router/v7.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -20,14 +20,21 @@ Update your `Sentry.browserTracingIntegration` to `Sentry.reactRouterV7BrowserTr
To ensure proper routing instrumentation, initialize Sentry by calling `Sentry.init` **before**:
- Wrapping your `<Routes />` component
- Using `useRoutes`
- Using `createBrowserRouterV7`
- Using `wrapCreateBrowserRouterV7` or `wrapCreateMemoryRouterV7`

</Alert>

### Usage with `createBrowserRouter`
### Usage with `createBrowserRouter` or `createMemoryRouter`

If you choose to create your router instance with [`createBrowserRouter`](https://reactrouter.com/en/main/routers/create-browser-router) from the `react-router` package, you can use `Sentry.wrapCreateBrowserRouterV7` 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) 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:

<Alert level="warning" title="Note">

`wrapCreateMemoryRouterV7` is available from `@sentry/react` version `8.49.0`. For versions prior to `8.49.0`, you can use `wrapCreateBrowserRouterV7` with `createMemoryRouter`.

You can instrument [`createHashRouter`](https://reactrouter.com/en/main/routers/create-hash-router) using the `wrapCreateBrowserRouterV7` function.

</Alert>

```javascript {2-8, 15-21, 26-33}
import React from "react";
Expand Down Expand Up @@ -63,13 +70,6 @@ const router = sentryCreateBrowserRouter([
]);
```

<Alert level="warning" title="Note">

You can instrument [`createMemoryRouter`](https://reactrouter.com/en/main/routers/create-memory-router) and [`createHashRouter`](https://reactrouter.com/en/main/routers/create-hash-router) using the `wrapCreateBrowserRouter` function.

</Alert>


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

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:
Expand Down Expand Up @@ -197,7 +197,7 @@ const router = sentryCreateBrowserRouter([
element: <Outlet />,
errorElement: <YourCustomRootErrorBoundary />,
children: [
// other routes ...
// other routes ...
],
},
],
Expand Down Expand Up @@ -227,4 +227,4 @@ export function YourCustomRootErrorBoundary() {
## Next Steps:

- [Return to **Getting Started**](../../)
- [Return to the main integrations page](../)
- [Return to the main integrations page](../)
Loading