Skip to content
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.

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

feat(react): React Router v7 support (library) #14513

Merged
merged 13 commits into from
Nov 29, 2024
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# production
/build

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*

/test-results/
/playwright-report/
/playwright/.cache/

!*.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
@sentry:registry=http://127.0.0.1:4873
@sentry-internal:registry=http://127.0.0.1:4873
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
{
"name": "react-router-7-spa",
"version": "0.1.0",
"private": true,
"dependencies": {
"@sentry/react": "latest || *",
"@types/react": "18.3.1",
"@types/react-dom": "18.3.1",
"react": "18.3.1",
"react-dom": "18.3.1",
"react-router": "^7.0.1"
},
"devDependencies": {
"@playwright/test": "^1.44.1",
"@sentry-internal/test-utils": "link:../../../test-utils",
"vite": "^6.0.1",
"@vitejs/plugin-react": "^4.3.4",
"typescript": "4.9.5"
},
"scripts": {
"build": "vite build",
"dev": "vite",
"preview": "vite preview",
"test": "playwright test",
"clean": "npx rimraf node_modules pnpm-lock.yaml",
"test:build": "pnpm install && npx playwright install && pnpm build",
"test:build-ts3.8": "pnpm install && pnpm add typescript@3.8 && npx playwright install && pnpm build",
"test:build-canary": "pnpm install && pnpm add react@canary react-dom@canary && npx playwright install && pnpm build",
"test:assert": "pnpm test"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"volta": {
"extends": "../../package.json"
},
"sentryTest": {
"variants": [
{
"build-command": "test:build-ts3.8",
"label": "react-router-7-spa (TS 3.8)"
}
]
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { getPlaywrightConfig } from '@sentry-internal/test-utils';

const config = getPlaywrightConfig({
startCommand: `pnpm preview --port 3030`,
port: 3030,
});

export default config;
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
interface Window {
recordedTransactions?: string[];
capturedExceptionId?: string;
sentryReplayId?: string;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import * as Sentry from '@sentry/react';
import React from 'react';
import ReactDOM from 'react-dom/client';
import {
BrowserRouter,
Route,
Routes,
createRoutesFromChildren,
matchRoutes,
useLocation,
useNavigationType,
} from 'react-router';
import Index from './pages/Index';
import SSE from './pages/SSE';
import User from './pages/User';

const replay = Sentry.replayIntegration();

Sentry.init({
environment: 'qa', // dynamic sampling bias to keep transactions
dsn: import.meta.env.PUBLIC_E2E_TEST_DSN,
integrations: [
Sentry.reactRouterV7BrowserTracingIntegration({
useEffect: React.useEffect,
useLocation,
useNavigationType,
createRoutesFromChildren,
matchRoutes,
trackFetchStreamPerformance: true,
}),
replay,
],
// We recommend adjusting this value in production, or using tracesSampler
// for finer control
tracesSampleRate: 1.0,
release: 'e2e-test',

// Always capture replays, so we can test this properly
replaysSessionSampleRate: 1.0,
replaysOnErrorSampleRate: 0.0,
tunnel: 'http://localhost:3031',
});

const SentryRoutes = Sentry.withSentryReactRouterV7Routing(Routes);

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
<BrowserRouter>
<SentryRoutes>
<Route path="/" element={<Index />} />
<Route path="/user/:id" element={<User />} />
<Route path="/sse" element={<SSE />} />
</SentryRoutes>
</BrowserRouter>,
);
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
// biome-ignore lint/nursery/noUnusedImports: Need React import for JSX
import * as React from 'react';
import { Link } from 'react-router';

const Index = () => {
return (
<>
<input
type="button"
value="Capture Exception"
id="exception-button"
onClick={() => {
throw new Error('I am an error!');
}}
/>
<Link to="/user/5" id="navigation">
navigate
</Link>
</>
);
};

export default Index;
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import * as Sentry from '@sentry/react';
// biome-ignore lint/nursery/noUnusedImports: Need React import for JSX
import * as React from 'react';

const fetchSSE = async ({ timeout, abort = false }: { timeout: boolean; abort?: boolean }) => {
Sentry.startSpanManual({ name: 'sse stream using fetch' }, async span => {
const controller = new AbortController();

const res = await Sentry.startSpan({ name: 'sse fetch call' }, async () => {
const endpoint = `http://localhost:8080/${timeout ? 'sse-timeout' : 'sse'}`;

const signal = controller.signal;
return await fetch(endpoint, { signal });
});

const stream = res.body;
const reader = stream?.getReader();

const readChunk = async () => {
if (abort) {
controller.abort();
}
const readRes = await reader?.read();
if (readRes?.done) {
return;
}

new TextDecoder().decode(readRes?.value);

await readChunk();
};

try {
await readChunk();
} catch (error) {
console.error('Could not fetch sse', error);
}

span.end();
});
};

const SSE = () => {
return (
<>
<button id="fetch-button" onClick={() => fetchSSE({ timeout: false })}>
Fetch SSE
</button>
<button id="fetch-timeout-button" onClick={() => fetchSSE({ timeout: true })}>
Fetch timeout SSE
</button>
<button id="fetch-sse-abort" onClick={() => fetchSSE({ timeout: false, abort: true })}>
Fetch SSE with error
</button>
</>
);
};

export default SSE;
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
// biome-ignore lint/nursery/noUnusedImports: Need React import for JSX
import * as React from 'react';

const User = () => {
return <p>I am a blank page :)</p>;
};

export default User;
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { startEventProxyServer } from '@sentry-internal/test-utils';

startEventProxyServer({
port: 3031,
proxyServerName: 'react-router-7-spa',
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import { expect, test } from '@playwright/test';
import { waitForError, waitForTransaction } from '@sentry-internal/test-utils';

test('Sends correct error event', async ({ page, baseURL }) => {
const errorEventPromise = waitForError('react-router-7-spa', event => {
return !event.type && event.exception?.values?.[0]?.value === 'I am an error!';
});

await page.goto('/');

const exceptionButton = page.locator('id=exception-button');
await exceptionButton.click();

const errorEvent = await errorEventPromise;

expect(errorEvent.exception?.values).toHaveLength(1);
expect(errorEvent.exception?.values?.[0]?.value).toBe('I am an error!');

expect(errorEvent.request).toEqual({
headers: expect.any(Object),
url: 'http://localhost:3030/',
});

expect(errorEvent.transaction).toEqual('/');

expect(errorEvent.contexts?.trace).toEqual({
trace_id: expect.any(String),
span_id: expect.any(String),
});
});

test('Sets correct transactionName', async ({ page }) => {
const transactionPromise = waitForTransaction('react-router-7-spa', async transactionEvent => {
return !!transactionEvent?.transaction && transactionEvent.contexts?.trace?.op === 'pageload';
});

const errorEventPromise = waitForError('react-router-7-spa', event => {
return !event.type && event.exception?.values?.[0]?.value === 'I am an error!';
});

await page.goto('/');
const transactionEvent = await transactionPromise;

// Only capture error once transaction was sent
const exceptionButton = page.locator('id=exception-button');
await exceptionButton.click();

const errorEvent = await errorEventPromise;

expect(errorEvent.exception?.values).toHaveLength(1);
expect(errorEvent.exception?.values?.[0]?.value).toBe('I am an error!');

expect(errorEvent.transaction).toEqual('/');

expect(errorEvent.contexts?.trace).toEqual({
trace_id: transactionEvent.contexts?.trace?.trace_id,
span_id: expect.not.stringContaining(transactionEvent.contexts?.trace?.span_id || ''),
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
import { expect, test } from '@playwright/test';
import { waitForEnvelopeItem, waitForTransaction } from '@sentry-internal/test-utils';

test('sends a pageload transaction with a parameterized URL', async ({ page }) => {
const transactionPromise = waitForTransaction('react-router-7-spa', async transactionEvent => {
return !!transactionEvent?.transaction && transactionEvent.contexts?.trace?.op === 'pageload';
});

await page.goto(`/`);

const rootSpan = await transactionPromise;

expect(rootSpan).toMatchObject({
contexts: {
trace: {
op: 'pageload',
origin: 'auto.pageload.react.reactrouter_v7',
},
},
transaction: '/',
transaction_info: {
source: 'route',
},
});
});

test('sends a navigation transaction with a parameterized URL', async ({ page }) => {
page.on('console', msg => console.log(msg.text()));
const pageloadTxnPromise = waitForTransaction('react-router-7-spa', async transactionEvent => {
return !!transactionEvent?.transaction && transactionEvent.contexts?.trace?.op === 'pageload';
});

const navigationTxnPromise = waitForTransaction('react-router-7-spa', async transactionEvent => {
return !!transactionEvent?.transaction && transactionEvent.contexts?.trace?.op === 'navigation';
});

await page.goto(`/`);
await pageloadTxnPromise;

const linkElement = page.locator('id=navigation');

const [_, navigationTxn] = await Promise.all([linkElement.click(), navigationTxnPromise]);

expect(navigationTxn).toMatchObject({
contexts: {
trace: {
op: 'navigation',
origin: 'auto.navigation.react.reactrouter_v7',
},
},
transaction: '/user/:id',
transaction_info: {
source: 'route',
},
});
});

test('sends an INP span', async ({ page }) => {
const inpSpanPromise = waitForEnvelopeItem('react-router-7-spa', item => {
return item[0].type === 'span';
});

await page.goto(`/`);

await page.click('#exception-button');

await page.waitForTimeout(500);

// Page hide to trigger INP
await page.evaluate(() => {
window.dispatchEvent(new Event('pagehide'));
});

const inpSpan = await inpSpanPromise;

expect(inpSpan[1]).toEqual({
data: {
'sentry.origin': 'auto.http.browser.inp',
'sentry.op': 'ui.interaction.click',
release: 'e2e-test',
environment: 'qa',
transaction: '/',
'sentry.exclusive_time': expect.any(Number),
replay_id: expect.any(String),
'user_agent.original': expect.stringContaining('Chrome'),
},
description: 'body > div#root > input#exception-button[type="button"]',
op: 'ui.interaction.click',
parent_span_id: expect.any(String),
span_id: expect.any(String),
start_timestamp: expect.any(Number),
timestamp: expect.any(Number),
trace_id: expect.any(String),
origin: 'auto.http.browser.inp',
exclusive_time: expect.any(Number),
measurements: { inp: { unit: 'millisecond', value: expect.any(Number) } },
segment_id: expect.any(String),
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
{
"compilerOptions": {
"target": "es2018",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react",
"types": ["vite/client"],
},
"include": ["src", "tests"]
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';

// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
envPrefix: 'PUBLIC_',
});
5 changes: 5 additions & 0 deletions docs/migration/draft-v9-migration-guide.md
Original file line number Diff line number Diff line change
@@ -99,6 +99,11 @@

- Deprecated `autoInstrumentRemix: false`. The next major version will default to behaving as if this option were `true` and the option itself will be removed.

## `@sentry/react`

- Deprecated `wrapUseRoutes`. Use `wrapUseRoutesV6` or `wrapUseRoutesV7` instead.
- Deprecated `wrapCreateBrowserRouter`. Use `wrapCreateBrowserRouterV6` or `wrapCreateBrowserRouterV7` instead.

## `@sentry/opentelemetry`

- Deprecated `generateSpanContextForPropagationContext` in favor of doing this manually - we do not need this export anymore.
10 changes: 10 additions & 0 deletions packages/react/src/index.ts
Original file line number Diff line number Diff line change
@@ -16,6 +16,16 @@ export {
export {
reactRouterV6BrowserTracingIntegration,
withSentryReactRouterV6Routing,
// eslint-disable-next-line deprecation/deprecation
wrapUseRoutes,
wrapUseRoutesV6,
// eslint-disable-next-line deprecation/deprecation
wrapCreateBrowserRouter,
wrapCreateBrowserRouterV6,
} from './reactrouterv6';
export {
reactRouterV7BrowserTracingIntegration,
withSentryReactRouterV7Routing,
wrapCreateBrowserRouterV7,
wrapUseRoutesV7,
} from './reactrouterv7';
436 changes: 436 additions & 0 deletions packages/react/src/reactrouterv6-compat-utils.tsx

Large diffs are not rendered by default.

436 changes: 37 additions & 399 deletions packages/react/src/reactrouterv6.tsx

Large diffs are not rendered by default.

50 changes: 50 additions & 0 deletions packages/react/src/reactrouterv7.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
// React Router v7 uses the same integration as v6
import type { browserTracingIntegration } from '@sentry/browser';

import type { Integration } from '@sentry/core';
import type { ReactRouterOptions } from './reactrouterv6-compat-utils';
import {
createReactRouterV6CompatibleTracingIntegration,
createV6CompatibleWithSentryReactRouterRouting,
createV6CompatibleWrapCreateBrowserRouter,
createV6CompatibleWrapUseRoutes,
} from './reactrouterv6-compat-utils';
import type { CreateRouterFunction, Router, RouterState, UseRoutes } from './types';

/**
* A browser tracing integration that uses React Router v7 to instrument navigations.
* Expects `useEffect`, `useLocation`, `useNavigationType`, `createRoutesFromChildren` and `matchRoutes` to be passed as options.
*/
export function reactRouterV7BrowserTracingIntegration(
options: Parameters<typeof browserTracingIntegration>[0] & ReactRouterOptions,
): Integration {
return createReactRouterV6CompatibleTracingIntegration(options, '7');
}

/**
* A higher-order component that adds Sentry routing instrumentation to a React Router v7 Route component.
* This is used to automatically capture route changes as transactions.
*/
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export function withSentryReactRouterV7Routing<P extends Record<string, any>, R extends React.FC<P>>(routes: R): R {
return createV6CompatibleWithSentryReactRouterRouting<P, R>(routes, '7');
}

/**
* A wrapper function that adds Sentry routing instrumentation to a React Router v7 createBrowserRouter function.
* This is used to automatically capture route changes as transactions when using the createBrowserRouter API.
*/
export function wrapCreateBrowserRouterV7<
TState extends RouterState = RouterState,
TRouter extends Router<TState> = Router<TState>,
>(createRouterFunction: CreateRouterFunction<TState, TRouter>): CreateRouterFunction<TState, TRouter> {
return createV6CompatibleWrapCreateBrowserRouter(createRouterFunction, '7');
}

/**
* A wrapper function that adds Sentry routing instrumentation to a React Router v7 useRoutes hook.
* This is used to automatically capture route changes as transactions when using the useRoutes hook.
*/
export function wrapUseRoutesV7(origUseRoutes: UseRoutes): UseRoutes {
return createV6CompatibleWrapUseRoutes(origUseRoutes, '7');
}
12 changes: 12 additions & 0 deletions packages/react/test/reactrouterv6.4.test.tsx
Original file line number Diff line number Diff line change
@@ -94,6 +94,7 @@ describe('reactRouterV6BrowserTracingIntegration (v6.4)', () => {
matchRoutes,
}),
);
// eslint-disable-next-line deprecation/deprecation
const sentryCreateBrowserRouter = wrapCreateBrowserRouter(createMemoryRouter as CreateRouterFunction);

const router = sentryCreateBrowserRouter(
@@ -135,6 +136,7 @@ describe('reactRouterV6BrowserTracingIntegration (v6.4)', () => {
matchRoutes,
}),
);
// eslint-disable-next-line deprecation/deprecation
const sentryCreateBrowserRouter = wrapCreateBrowserRouter(createMemoryRouter as CreateRouterFunction);

const router = sentryCreateBrowserRouter(
@@ -168,6 +170,7 @@ describe('reactRouterV6BrowserTracingIntegration (v6.4)', () => {
matchRoutes,
}),
);
// eslint-disable-next-line deprecation/deprecation
const sentryCreateBrowserRouter = wrapCreateBrowserRouter(createMemoryRouter as CreateRouterFunction);

const router = sentryCreateBrowserRouter(
@@ -213,6 +216,7 @@ describe('reactRouterV6BrowserTracingIntegration (v6.4)', () => {
matchRoutes,
}),
);
// eslint-disable-next-line deprecation/deprecation
const sentryCreateBrowserRouter = wrapCreateBrowserRouter(createMemoryRouter as CreateRouterFunction);

const router = sentryCreateBrowserRouter(
@@ -264,6 +268,7 @@ describe('reactRouterV6BrowserTracingIntegration (v6.4)', () => {
matchRoutes,
}),
);
// eslint-disable-next-line deprecation/deprecation
const sentryCreateBrowserRouter = wrapCreateBrowserRouter(createMemoryRouter as CreateRouterFunction);

const router = sentryCreateBrowserRouter(
@@ -315,6 +320,7 @@ describe('reactRouterV6BrowserTracingIntegration (v6.4)', () => {
matchRoutes,
}),
);
// eslint-disable-next-line deprecation/deprecation
const sentryCreateBrowserRouter = wrapCreateBrowserRouter(createMemoryRouter as CreateRouterFunction);

const router = sentryCreateBrowserRouter(
@@ -378,6 +384,7 @@ describe('reactRouterV6BrowserTracingIntegration (v6.4)', () => {
matchRoutes,
}),
);
// eslint-disable-next-line deprecation/deprecation
const sentryCreateBrowserRouter = wrapCreateBrowserRouter(createMemoryRouter as CreateRouterFunction);

const router = sentryCreateBrowserRouter(
@@ -419,6 +426,7 @@ describe('reactRouterV6BrowserTracingIntegration (v6.4)', () => {
matchRoutes,
}),
);
// eslint-disable-next-line deprecation/deprecation
const sentryCreateBrowserRouter = wrapCreateBrowserRouter(createMemoryRouter as CreateRouterFunction);

const router = sentryCreateBrowserRouter(
@@ -471,6 +479,7 @@ describe('reactRouterV6BrowserTracingIntegration (v6.4)', () => {
matchRoutes,
}),
);
// eslint-disable-next-line deprecation/deprecation
const sentryCreateBrowserRouter = wrapCreateBrowserRouter(createMemoryRouter as CreateRouterFunction);

const router = sentryCreateBrowserRouter(
@@ -528,6 +537,7 @@ describe('reactRouterV6BrowserTracingIntegration (v6.4)', () => {
stripBasename: true,
}),
);
// eslint-disable-next-line deprecation/deprecation
const sentryCreateBrowserRouter = wrapCreateBrowserRouter(createMemoryRouter as CreateRouterFunction);

const router = sentryCreateBrowserRouter(
@@ -585,6 +595,7 @@ describe('reactRouterV6BrowserTracingIntegration (v6.4)', () => {
stripBasename: true,
}),
);
// eslint-disable-next-line deprecation/deprecation
const sentryCreateBrowserRouter = wrapCreateBrowserRouter(createMemoryRouter as CreateRouterFunction);

const router = sentryCreateBrowserRouter(
@@ -637,6 +648,7 @@ describe('reactRouterV6BrowserTracingIntegration (v6.4)', () => {
matchRoutes,
}),
);
// eslint-disable-next-line deprecation/deprecation
const sentryCreateBrowserRouter = wrapCreateBrowserRouter(createMemoryRouter as CreateRouterFunction);

const router = sentryCreateBrowserRouter(
13 changes: 13 additions & 0 deletions packages/react/test/reactrouterv6.test.tsx
Original file line number Diff line number Diff line change
@@ -536,6 +536,7 @@ describe('reactRouterV6BrowserTracingIntegration', () => {
}),
);

// eslint-disable-next-line deprecation/deprecation
const wrappedUseRoutes = wrapUseRoutes(useRoutes);

const Routes = () =>
@@ -577,6 +578,7 @@ describe('reactRouterV6BrowserTracingIntegration', () => {
}),
);

// eslint-disable-next-line deprecation/deprecation
const wrappedUseRoutes = wrapUseRoutes(useRoutes);

const Routes = () =>
@@ -611,6 +613,7 @@ describe('reactRouterV6BrowserTracingIntegration', () => {
}),
);

// eslint-disable-next-line deprecation/deprecation
const wrappedUseRoutes = wrapUseRoutes(useRoutes);

const Routes = () =>
@@ -645,6 +648,7 @@ describe('reactRouterV6BrowserTracingIntegration', () => {
}),
);

// eslint-disable-next-line deprecation/deprecation
const wrappedUseRoutes = wrapUseRoutes(useRoutes);

const Routes = () =>
@@ -682,6 +686,7 @@ describe('reactRouterV6BrowserTracingIntegration', () => {
matchRoutes,
}),
);
// eslint-disable-next-line deprecation/deprecation
const wrappedUseRoutes = wrapUseRoutes(useRoutes);

const Routes = () =>
@@ -726,6 +731,7 @@ describe('reactRouterV6BrowserTracingIntegration', () => {
matchRoutes,
}),
);
// eslint-disable-next-line deprecation/deprecation
const wrappedUseRoutes = wrapUseRoutes(useRoutes);

const Routes = () =>
@@ -776,6 +782,7 @@ describe('reactRouterV6BrowserTracingIntegration', () => {
matchRoutes,
}),
);
// eslint-disable-next-line deprecation/deprecation
const wrappedUseRoutes = wrapUseRoutes(useRoutes);

const Routes = () =>
@@ -826,6 +833,7 @@ describe('reactRouterV6BrowserTracingIntegration', () => {
matchRoutes,
}),
);
// eslint-disable-next-line deprecation/deprecation
const wrappedUseRoutes = wrapUseRoutes(useRoutes);

const Routes = () =>
@@ -882,6 +890,7 @@ describe('reactRouterV6BrowserTracingIntegration', () => {
matchRoutes,
}),
);
// eslint-disable-next-line deprecation/deprecation
const wrappedUseRoutes = wrapUseRoutes(useRoutes);

const Routes = () =>
@@ -962,6 +971,7 @@ describe('reactRouterV6BrowserTracingIntegration', () => {
matchRoutes,
}),
);
// eslint-disable-next-line deprecation/deprecation
const wrappedUseRoutes = wrapUseRoutes(useRoutes);

const Routes = () =>
@@ -1040,6 +1050,7 @@ describe('reactRouterV6BrowserTracingIntegration', () => {
matchRoutes,
}),
);
// eslint-disable-next-line deprecation/deprecation
const wrappedUseRoutes = wrapUseRoutes(useRoutes);

const Routes = () =>
@@ -1098,6 +1109,7 @@ describe('reactRouterV6BrowserTracingIntegration', () => {
matchRoutes,
}),
);
// eslint-disable-next-line deprecation/deprecation
const wrappedUseRoutes = wrapUseRoutes(useRoutes);

const Routes = () =>
@@ -1155,6 +1167,7 @@ describe('reactRouterV6BrowserTracingIntegration', () => {
matchRoutes,
}),
);
// eslint-disable-next-line deprecation/deprecation
const wrappedUseRoutes = wrapUseRoutes(useRoutes);

const Routes = () =>