Skip to content

[skill-drift] update(sentry-react-sdk): document React Router v8 support and compatibility APIs #212

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
github-actions wants to merge 1 commit into
base: main
Choose a base branch
from
Open

[skill-drift] update(sentry-react-sdk): document React Router v8 support and compatibility APIs #212

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
43 changes: 27 additions & 16 deletions skills/sentry-react-sdk/SKILL.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
name: sentry-react-sdk
description: Full Sentry SDK setup for React. Use when asked to "add Sentry to React", "install @sentry/react", or configure error monitoring, tracing, session replay, profiling, or logging for React applications. Supports React 16+, React Router v5-v7 non-framework mode, TanStack Router, Redux, Vite, and webpack.
description: Full Sentry SDK setup for React. Use when asked to "add Sentry to React", "install @sentry/react", or configure error monitoring, tracing, session replay, profiling, or logging for React applications. Supports React 16+, React Router v5-v8 non-framework mode, TanStack Router, Redux, Vite, and webpack.
license: Apache-2.0
category: sdk-setup
parent: sentry-sdk-setup
Expand All @@ -18,7 +18,7 @@ Opinionated wizard that scans your React project and guides you through complete
- User asks to "add Sentry to React" or "set up Sentry" in a React app
- User wants error monitoring, tracing, session replay, profiling, or logging in React
- User mentions `@sentry/react`, React Sentry SDK, or Sentry error boundaries
- User wants to monitor React Router v5/v6/v7 non-framework navigation, Redux state, or component performance
- User wants to monitor React Router v5/v6/v7/v8 non-framework navigation, Redux state, or component performance

If project is React Router **Framework mode** using `@sentry/react-router`, use `sentry-react-router-framework-sdk` instead of this skill.

Expand Down Expand Up @@ -64,7 +64,7 @@ cat ../go.mod ../requirements.txt ../Gemfile ../pom.xml 2>/dev/null | head -3
| React <19? | Use `Sentry.ErrorBoundary` |
| `@sentry/react` already present? | Skip install, go straight to feature config |
| React Router Framework mode indicators (`@sentry/react-router`, `@react-router/*`)? | Use `sentry-react-router-framework-sdk` |
| `react-router-dom` v5 / v6 / v7? | Determines which router integration to use |
| `react-router-dom` v5 / v6 / v7 / v8? | Determines which router integration to use |
| `@tanstack/react-router`? | Use `tanstackRouterBrowserTracingIntegration()` |
| Redux in use? | Recommend `createReduxEnhancer()` |
| Vite detected? | Source maps via `sentryVitePlugin` |
Expand Down Expand Up @@ -98,7 +98,7 @@ Present a concrete recommendation based on what you found. Don't ask open-ended

**React-specific extras:**
- React 19 detected → set up `reactErrorHandler()` on `createRoot`
- React Router v5/v6/v7 non-framework detected → configure matching router integration (see Phase 3)
- React Router v5/v6/v7/v8 non-framework detected → configure matching router integration (see Phase 3)
- React Router Framework mode detected → switch to `sentry-react-router-framework-sdk`
- Redux detected → add `createReduxEnhancer()` to Redux store
- Vite detected → configure `sentryVitePlugin` for source maps (essential for readable stack traces)
Expand Down Expand Up @@ -215,36 +215,33 @@ Configure the matching integration for your router (non-framework mode):

| Router | Integration | Notes |
|--------|------------|-------|
| React Router v7 | `reactRouterV7BrowserTracingIntegration` | `useEffect`, `useLocation`, `useNavigationType`, `createRoutesFromChildren`, `matchRoutes` from `react-router` |
| React Router v6 | `reactRouterV6BrowserTracingIntegration` | `useEffect`, `useLocation`, `useNavigationType`, `createRoutesFromChildren`, `matchRoutes` from `react-router-dom` |
| React Router v6/v7/v8 | `reactRouterBrowserTracingIntegration` | **Recommended** — works across v6+; pass hooks from your router package |
| React Router v7 | `reactRouterV7BrowserTracingIntegration` | Version-specific API (deprecated in favor of compatibility API) |
| React Router v6 | `reactRouterV6BrowserTracingIntegration` | Version-specific API (deprecated in favor of compatibility API) |
| React Router v5 | `reactRouterV5BrowserTracingIntegration` | Wrap routes in `withSentryRouting(Route)` |
| TanStack Router | `tanstackRouterBrowserTracingIntegration(router)` | Pass router instance — no hooks required |
| No router / custom | `browserTracingIntegration()` | Names transactions by URL path |

**React Router v6/v7 setup:**
**React Router v6/v7/v8 setup (recommended — compatibility APIs):**

```typescript
Comment on lines 217 to 227

@sentry sentry Bot Jun 22, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bug: The SKILL.md file recommends new APIs, but the referenced tracing.md file, which must be followed "exactly," only contains outdated, version-specific APIs, creating a contradiction.
Severity: MEDIUM

Suggested Fix

Update the references/tracing.md file to include the new generic compatibility APIs (reactRouterBrowserTracingIntegration, wrapCreateBrowserRouter, wrapUseRoutes). Ensure its guidance is consistent with the primary recommendations in SKILL.md.

Prompt for AI Agent 
Review the code at the location below. A potential bug has been identified by an AI
agent. Verify if this is a real issue. If it is, propose a fix; if not, explain why it's
not valid.

Location: skills/sentry-react-sdk/SKILL.md#L215-L227

Potential issue: The `SKILL.md` file was updated to recommend new generic compatibility
APIs like `reactRouterBrowserTracingIntegration`. However, the supplementary
`references/tracing.md` file, which the skill instructs an AI agent to follow "exactly,"
was not updated. This reference file still exclusively documents the older,
version-specific APIs (e.g., `reactRouterV6BrowserTracingIntegration`). This
contradiction will cause an AI agent to ignore the new guidance and generate code using
the deprecated APIs from `tracing.md`, defeating the purpose of the update.

Did we get this right? 👍 / 👎 to inform future reviews.

// in instrument.ts integrations array:
import React from "react";
import {
createRoutesFromChildren, matchRoutes,
useLocation, useNavigationType,
} from "react-router-dom"; // or "react-router" for v7
} from "react-router-dom"; // or "react-router" for v7/v8
import * as Sentry from "@sentry/react";
import { reactRouterV6BrowserTracingIntegration } from "@sentry/react";
import { createBrowserRouter } from "react-router-dom";

// Option A — createBrowserRouter (recommended for v6.4+):
const sentryCreateBrowserRouter = Sentry.wrapCreateBrowserRouterV6(createBrowserRouter);
// Option A — createBrowserRouter (recommended for v6.4+ / v7+ / v8+):
const sentryCreateBrowserRouter = Sentry.wrapCreateBrowserRouter(createBrowserRouter);
const router = sentryCreateBrowserRouter([...routes]);

// Option B — createBrowserRouter for React Router v7:
// const sentryCreateBrowserRouter = Sentry.wrapCreateBrowserRouterV7(createBrowserRouter);

// Option C — integration with hooks (v6 without data APIs):
// Option B — integration with hooks (for useRoutes or Routes component):
Sentry.init({
integrations: [
reactRouterV6BrowserTracingIntegration({
Sentry.reactRouterBrowserTracingIntegration({
useEffect: React.useEffect,
useLocation,
useNavigationType,
Expand All @@ -253,6 +250,20 @@ Sentry.init({
}),
],
});

// Option C — wrap useRoutes hook:
const sentryUseRoutes = Sentry.wrapUseRoutes(useRoutes);

@sentry sentry Bot Jun 22, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bug: The skill recommends using Sentry.wrapUseRoutes and Sentry.wrapCreateBrowserRouter, but these APIs were removed in SDK v9 and will cause a TypeError at runtime.
Severity: HIGH

Suggested Fix

Update SKILL.md to recommend the correct, versioned APIs (wrapUseRoutesV6/V7, wrapCreateBrowserRouterV6/V7) as documented in the migration guide. If these unversioned APIs were re-introduced, update all related documentation (v8-to-v9.md, tracing.md) to reflect their existence.

Prompt for AI Agent 
Review the code at the location below. A potential bug has been identified by an AI
agent. Verify if this is a real issue. If it is, propose a fix; if not, explain why it's
not valid.

Location: skills/sentry-react-sdk/SKILL.md#L255

Potential issue: The skill documentation at `SKILL.md` was updated to recommend new
generic compatibility APIs for React Router, such as `Sentry.wrapUseRoutes` and
`Sentry.wrapCreateBrowserRouter`. However, other official documentation, including the
`v8-to-v9.md` migration guide, explicitly states these unversioned functions were
removed in SDK v9 and replaced by version-specific alternatives (e.g.,
`wrapUseRoutesV6`). Users on SDK v9 following the skill's guidance will encounter a
`TypeError` at runtime because the recommended functions do not exist in the SDK.

Did we get this right? 👍 / 👎 to inform future reviews.

// then use sentryUseRoutes in your components
```

**Version-specific APIs (deprecated, use compatibility APIs above):**

```typescript
// React Router v6 — use wrapCreateBrowserRouterV6 (deprecated):
// const sentryCreateBrowserRouter = Sentry.wrapCreateBrowserRouterV6(createBrowserRouter);

// React Router v7 — use wrapCreateBrowserRouterV7 (deprecated):
// const sentryCreateBrowserRouter = Sentry.wrapCreateBrowserRouterV7(createBrowserRouter);
```

**TanStack Router setup:**
Expand Down