{message}
+{details}
+ {stack && ( +
+ {stack}
+
+ )}
+ {details}
+ {stack && ( +
+ {stack}
+
+ )}
+ The parameter value is: {param}
+{actionData.greeting}
: null} +User: {user?.name}
+I am a blank page :)
; +}; + +export default User; diff --git a/dev-packages/e2e-tests/test-applications/react-router-8-spa/start-event-proxy.mjs b/dev-packages/e2e-tests/test-applications/react-router-8-spa/start-event-proxy.mjs new file mode 100644 index 000000000000..98bb1db1c281 --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/react-router-8-spa/start-event-proxy.mjs @@ -0,0 +1,6 @@ +import { startEventProxyServer } from '@sentry-internal/test-utils'; + +startEventProxyServer({ + port: 3031, + proxyServerName: 'react-router-8-spa', +}); diff --git a/dev-packages/e2e-tests/test-applications/react-router-8-spa/tests/errors.test.ts b/dev-packages/e2e-tests/test-applications/react-router-8-spa/tests/errors.test.ts new file mode 100644 index 000000000000..97a147f065e0 --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/react-router-8-spa/tests/errors.test.ts @@ -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-8-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-8-spa', async transactionEvent => { + return !!transactionEvent?.transaction && transactionEvent.contexts?.trace?.op === 'pageload'; + }); + + const errorEventPromise = waitForError('react-router-8-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 || ''), + }); +}); diff --git a/dev-packages/e2e-tests/test-applications/react-router-8-spa/tests/navigation-trace-propagation.test.ts b/dev-packages/e2e-tests/test-applications/react-router-8-spa/tests/navigation-trace-propagation.test.ts new file mode 100644 index 000000000000..921c20dee117 --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/react-router-8-spa/tests/navigation-trace-propagation.test.ts @@ -0,0 +1,44 @@ +import { expect, test } from '@playwright/test'; +import { waitForTransaction } from '@sentry-internal/test-utils'; + +test('propagates the navigation trace (not the stale pageload trace) for a fetch in a route mount effect', async ({ + page, +}) => { + // Intercept the /products data fetch and capture the tracing header the SDK attached. + let productsRequestSentryTrace: string | undefined; + await page.route('**/api/products', async route => { + productsRequestSentryTrace = route.request().headers()['sentry-trace']; + await route.fulfill({ + status: 200, + contentType: 'application/json', + body: '[]', + }); + }); + + const pageloadTxnPromise = waitForTransaction('react-router-8-spa', async transactionEvent => { + return !!transactionEvent?.transaction && transactionEvent.contexts?.trace?.op === 'pageload'; + }); + + const navigationTxnPromise = waitForTransaction('react-router-8-spa', async transactionEvent => { + return transactionEvent.contexts?.trace?.op === 'navigation' && transactionEvent.transaction === '/products'; + }); + + await page.goto('/'); + const pageloadTxn = await pageloadTxnPromise; + + await page.locator('id=navigation-products').click(); + const navigationTxn = await navigationTxnPromise; + + const pageloadTraceId = pageloadTxn.contexts?.trace?.trace_id; + const navigationTraceId = navigationTxn.contexts?.trace?.trace_id; + const propagatedTraceId = productsRequestSentryTrace?.split('-')[0]; + + expect(pageloadTraceId).toBeDefined(); + expect(navigationTraceId).toBeDefined(); + expect(propagatedTraceId).toBeDefined(); + expect(navigationTraceId).not.toEqual(pageloadTraceId); + + // The fetch fired on /products must carry the navigation trace, not the stale pageload trace. + expect(propagatedTraceId).toEqual(navigationTraceId); + expect(propagatedTraceId).not.toEqual(pageloadTraceId); +}); diff --git a/dev-packages/e2e-tests/test-applications/react-router-8-spa/tests/transactions.test.ts b/dev-packages/e2e-tests/test-applications/react-router-8-spa/tests/transactions.test.ts new file mode 100644 index 000000000000..fcf012f4b51c --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/react-router-8-spa/tests/transactions.test.ts @@ -0,0 +1,100 @@ +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-8-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', + }, + }, + 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-8-spa', async transactionEvent => { + return !!transactionEvent?.transaction && transactionEvent.contexts?.trace?.op === 'pageload'; + }); + + const navigationTxnPromise = waitForTransaction('react-router-8-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', + }, + }, + transaction: '/user/:id', + transaction_info: { + source: 'route', + }, + }); +}); + +test('sends an INP span', async ({ page }) => { + const inpSpanPromise = waitForEnvelopeItem('react-router-8-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'), + 'client.address': '{{auto}}', + }, + 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), + }); +}); diff --git a/dev-packages/e2e-tests/test-applications/react-router-8-spa/tsconfig.json b/dev-packages/e2e-tests/test-applications/react-router-8-spa/tsconfig.json new file mode 100644 index 000000000000..7af258198f12 --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/react-router-8-spa/tsconfig.json @@ -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"] +} diff --git a/dev-packages/e2e-tests/test-applications/react-router-8-spa/vite.config.ts b/dev-packages/e2e-tests/test-applications/react-router-8-spa/vite.config.ts new file mode 100644 index 000000000000..63c2c4317df7 --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/react-router-8-spa/vite.config.ts @@ -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_', +}); diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index 139401da7a6e..a25f05e62a2f 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -16,6 +16,7 @@ export { reactRouterV4BrowserTracingIntegration, reactRouterV5BrowserTracingIntegration, } from './reactrouter'; +/* oxlint-disable typescript/no-deprecated -- Intentional re-exports for backwards compatibility */ export { reactRouterV6BrowserTracingIntegration, withSentryReactRouterV6Routing, @@ -30,3 +31,11 @@ export { wrapCreateMemoryRouterV7, wrapUseRoutesV7, } from './reactrouterv7'; +/* oxlint-enable typescript/no-deprecated */ +export { + reactRouterBrowserTracingIntegration, + wrapReactRouterRouting, + wrapCreateBrowserRouter, + wrapCreateMemoryRouter, + wrapUseRoutes, +} from './reactrouter.compat'; diff --git a/packages/react/src/reactrouter-compat-utils/instrumentation.tsx b/packages/react/src/reactrouter-compat-utils/instrumentation.tsx index da4e3e078aa8..5bc58325f963 100644 --- a/packages/react/src/reactrouter-compat-utils/instrumentation.tsx +++ b/packages/react/src/reactrouter-compat-utils/instrumentation.tsx @@ -225,7 +225,7 @@ export interface ReactRouterOptions { lazyRouteManifest?: string[]; } -type V6CompatibleVersion = '6' | '7'; +type V6CompatibleVersion = '6' | '7' | ''; export function addResolvedRoutesToParent(resolvedRoutes: RouteObject[], parentRoute: RouteObject): void { const existingChildren = parentRoute.children || []; @@ -500,7 +500,7 @@ export function createV6CompatibleWrapCreateBrowserRouter< if (!_useEffect || !_useLocation || !_useNavigationType || !_matchRoutes) { DEBUG_BUILD && debug.warn( - `reactRouterV${version}Instrumentation was unable to wrap the \`createRouter\` function because of one or more missing parameters.`, + `reactRouter${version ? `V${version}` : ''}Instrumentation was unable to wrap the \`createRouter\` function because of one or more missing parameters.`, ); return createRouterFunction; @@ -572,7 +572,7 @@ export function createV6CompatibleWrapCreateMemoryRouter< if (!_useEffect || !_useLocation || !_useNavigationType || !_matchRoutes) { DEBUG_BUILD && debug.warn( - `reactRouterV${version}Instrumentation was unable to wrap the \`createMemoryRouter\` function because of one or more missing parameters.`, + `reactRouter${version ? `V${version}` : ''}Instrumentation was unable to wrap the \`createMemoryRouter\` function because of one or more missing parameters.`, ); return createRouterFunction; @@ -735,7 +735,7 @@ export function createReactRouterV6CompatibleTracingIntegration( attributes: { [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'url', [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'pageload', - [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: `auto.pageload.react.reactrouter_v${version}`, + [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: `auto.pageload.react.reactrouter${version ? `_v${version}` : ''}`, }, }); } @@ -1031,7 +1031,7 @@ export function handleNavigation(opts: { attributes: { [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: source, [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation', - [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: `auto.navigation.react.reactrouter_v${version}`, + [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: `auto.navigation.react.reactrouter${version ? `_v${version}` : ''}`, }, }); } catch (e) { diff --git a/packages/react/src/reactrouter.compat.tsx b/packages/react/src/reactrouter.compat.tsx new file mode 100644 index 000000000000..814c8f74ee41 --- /dev/null +++ b/packages/react/src/reactrouter.compat.tsx @@ -0,0 +1,72 @@ +import type { browserTracingIntegration } from '@sentry/browser'; +import type { Integration } from '@sentry/core'; +import type { ReactRouterOptions } from './reactrouter-compat-utils'; +import { + createReactRouterV6CompatibleTracingIntegration, + createV6CompatibleWithSentryReactRouterRouting, + createV6CompatibleWrapCreateBrowserRouter, + createV6CompatibleWrapCreateMemoryRouter, + createV6CompatibleWrapUseRoutes, +} from './reactrouter-compat-utils'; +import type { CreateRouterFunction, Router, RouterState, UseRoutes } from './types'; + +/** + * A browser tracing integration that uses React Router to instrument navigations. + * Expects `useEffect`, `useLocation`, `useNavigationType`, `createRoutesFromChildren` and `matchRoutes` to be passed as options. + * + * Works with React Router v6+. + */ +export function reactRouterBrowserTracingIntegration( + options: Parameters, R extends React.FC
>(routes: R): R {
+ return createV6CompatibleWithSentryReactRouterRouting , R extends React.FC >(routes: R): R {
diff --git a/packages/react/src/reactrouterv7.tsx b/packages/react/src/reactrouterv7.tsx
index a25e12d40e68..335a1d0886f7 100644
--- a/packages/react/src/reactrouterv7.tsx
+++ b/packages/react/src/reactrouterv7.tsx
@@ -14,6 +14,8 @@ import type { CreateRouterFunction, Router, RouterState, UseRoutes } from './typ
/**
* A browser tracing integration that uses React Router v7 to instrument navigations.
* Expects `useEffect`, `useLocation`, `useNavigationType`, `createRoutesFromChildren` and `matchRoutes` to be passed as options.
+ *
+ * @deprecated Use `reactRouterBrowserTracingIntegration` instead.
*/
export function reactRouterV7BrowserTracingIntegration(
options: Parameters , R extends React.FC >(routes: R): R {
@@ -33,6 +37,8 @@ export function withSentryReactRouterV7Routing , R
/**
* 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.
+ *
+ * @deprecated Use `wrapCreateBrowserRouter` instead.
*/
export function wrapCreateBrowserRouterV7<
TState extends RouterState = RouterState,
@@ -46,6 +52,8 @@ export function wrapCreateBrowserRouterV7<
* This is used to automatically capture route changes as transactions when using the createMemoryRouter API.
* The difference between createBrowserRouter and createMemoryRouter is that with createMemoryRouter,
* optional `initialEntries` are also taken into account.
+ *
+ * @deprecated Use `wrapCreateMemoryRouter` instead.
*/
export function wrapCreateMemoryRouterV7<
TState extends RouterState = RouterState,
@@ -57,6 +65,8 @@ export function wrapCreateMemoryRouterV7<
/**
* 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.
+ *
+ * @deprecated Use `wrapUseRoutes` instead.
*/
export function wrapUseRoutesV7(origUseRoutes: UseRoutes): UseRoutes {
return createV6CompatibleWrapUseRoutes(origUseRoutes, '7');