Product} />
@@ -474,7 +588,7 @@ function updatePageloadTransaction(
): void {
const branches = Array.isArray(matches)
? matches
- : (_matchRoutes(routes, location, basename) as unknown as RouteMatch[]);
+ : (_matchRoutes(allRoutes || routes, location, basename) as unknown as RouteMatch[]);
if (branches) {
let name,
@@ -490,7 +604,7 @@ function updatePageloadTransaction(
[name, source] = getNormalizedName(routes, location, branches, basename);
}
- getCurrentScope().setTransactionName(name);
+ getCurrentScope().setTransactionName(name || '/');
if (activeRootSpan) {
activeRootSpan.updateName(name);
@@ -513,8 +627,6 @@ export function createV6CompatibleWithSentryReactRouterRouting = (props: P) => {
const isMountRenderPass = React.useRef(true);
@@ -527,10 +639,14 @@ export function createV6CompatibleWithSentryReactRouterRouting
{
- allRoutes.push(...getChildRoutesRecursively(route));
+ const extractedChildRoutes = getChildRoutesRecursively(route);
+
+ extractedChildRoutes.forEach(r => {
+ allRoutes.add(r);
+ });
});
- updatePageloadTransaction(getActiveRootSpan(), location, routes, undefined, undefined, allRoutes);
+ updatePageloadTransaction(getActiveRootSpan(), location, routes, undefined, undefined, Array.from(allRoutes));
isMountRenderPass.current = false;
} else {
handleNavigation({
@@ -538,7 +654,7 @@ export function createV6CompatibleWithSentryReactRouterRouting
= Router,
+>(createMemoryRouterFunction: CreateRouterFunction): CreateRouterFunction {
+ return createV6CompatibleWrapCreateMemoryRouter(createMemoryRouterFunction, '6');
+}
+
/**
* A higher-order component that adds Sentry routing instrumentation to a React Router v6 Route component.
* This is used to automatically capture route changes as transactions.
diff --git a/packages/react/src/reactrouterv7.tsx b/packages/react/src/reactrouterv7.tsx
index df2badd35e44..5a80482cd2c3 100644
--- a/packages/react/src/reactrouterv7.tsx
+++ b/packages/react/src/reactrouterv7.tsx
@@ -6,6 +6,7 @@ import {
createReactRouterV6CompatibleTracingIntegration,
createV6CompatibleWithSentryReactRouterRouting,
createV6CompatibleWrapCreateBrowserRouter,
+ createV6CompatibleWrapCreateMemoryRouter,
createV6CompatibleWrapUseRoutes,
} from './reactrouterv6-compat-utils';
import type { CreateRouterFunction, Router, RouterState, UseRoutes } from './types';
@@ -40,6 +41,19 @@ export function wrapCreateBrowserRouterV7<
return createV6CompatibleWrapCreateBrowserRouter(createRouterFunction, '7');
}
+/**
+ * A wrapper function that adds Sentry routing instrumentation to a React Router v7 createMemoryRouter function.
+ * 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.
+ */
+export function wrapCreateMemoryRouterV7<
+ TState extends RouterState = RouterState,
+ TRouter extends Router = Router,
+>(createMemoryRouterFunction: CreateRouterFunction): CreateRouterFunction {
+ return createV6CompatibleWrapCreateMemoryRouter(createMemoryRouterFunction, '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.
diff --git a/packages/react/src/tanstackrouter.ts b/packages/react/src/tanstackrouter.ts
index 2f5467ee1640..2fb55afc0c4e 100644
--- a/packages/react/src/tanstackrouter.ts
+++ b/packages/react/src/tanstackrouter.ts
@@ -64,8 +64,9 @@ export function tanstackRouterBrowserTracingIntegration(
if (instrumentNavigation) {
// The onBeforeNavigate hook is called at the very beginning of a navigation and is only called once per navigation, even when the user is redirected
castRouterInstance.subscribe('onBeforeNavigate', onBeforeNavigateArgs => {
+ const fromLocationState = onBeforeNavigateArgs.fromLocation && onBeforeNavigateArgs.fromLocation.state;
// onBeforeNavigate is called during pageloads. We can avoid creating navigation spans by comparing the states of the to and from arguments.
- if (onBeforeNavigateArgs.toLocation.state === onBeforeNavigateArgs.fromLocation.state) {
+ if (onBeforeNavigateArgs.toLocation.state === fromLocationState) {
return;
}
diff --git a/packages/react/src/types.ts b/packages/react/src/types.ts
index 1a40ec4fce91..b29a2dbd1cad 100644
--- a/packages/react/src/types.ts
+++ b/packages/react/src/types.ts
@@ -182,10 +182,14 @@ export interface RouterInit {
hydrationData?: HydrationState;
}
+export type NavigationState = {
+ state: 'idle' | 'loading' | 'submitting';
+};
+
export type NavigationStates = {
- Idle: any;
- Loading: any;
- Submitting: any;
+ Idle: NavigationState;
+ Loading: NavigationState;
+ Submitting: NavigationState;
};
export type Navigation = NavigationStates[keyof NavigationStates];
@@ -202,6 +206,7 @@ export declare enum HistoryAction {
export interface RouterState {
historyAction: Action | HistoryAction | any;
location: Location;
+ navigation: Navigation;
}
export interface Router {
state: TState;
diff --git a/packages/react/src/vendor/tanstackrouter-types.ts b/packages/react/src/vendor/tanstackrouter-types.ts
index e5eeba71aa87..417d2b1447b1 100644
--- a/packages/react/src/vendor/tanstackrouter-types.ts
+++ b/packages/react/src/vendor/tanstackrouter-types.ts
@@ -46,7 +46,7 @@ export interface VendoredTanstackRouter {
eventType: 'onResolved' | 'onBeforeNavigate',
callback: (stateUpdate: {
toLocation: VendoredTanstackRouterLocation;
- fromLocation: VendoredTanstackRouterLocation;
+ fromLocation?: VendoredTanstackRouterLocation;
}) => void,
): () => void;
}
diff --git a/packages/react/test/errorboundary.test.tsx b/packages/react/test/errorboundary.test.tsx
index e0a7328995e0..81f276255a96 100644
--- a/packages/react/test/errorboundary.test.tsx
+++ b/packages/react/test/errorboundary.test.tsx
@@ -4,7 +4,7 @@ import { fireEvent, render, screen } from '@testing-library/react';
import * as React from 'react';
import { useState } from 'react';
-import type { ErrorBoundaryProps } from '../src/errorboundary';
+import type { ErrorBoundaryProps, FallbackRender } from '../src/errorboundary';
import { ErrorBoundary, UNKNOWN_COMPONENT, withErrorBoundary } from '../src/errorboundary';
const mockCaptureException = jest.fn();
@@ -537,47 +537,47 @@ describe('ErrorBoundary', () => {
expect(mockOnReset).toHaveBeenCalledTimes(1);
expect(mockOnReset).toHaveBeenCalledWith(expect.any(Error), expect.any(String), expect.any(String));
});
+ it.each`
+ fallback | handled | expected
+ ${true} | ${undefined} | ${true}
+ ${false} | ${undefined} | ${false}
+ ${true} | ${false} | ${false}
+ ${true} | ${true} | ${true}
+ ${false} | ${true} | ${true}
+ ${false} | ${false} | ${false}
+ `(
+ 'sets `handled: $expected` when `handled` is $handled and `fallback` is $fallback',
+ async ({
+ fallback,
+ handled,
+ expected,
+ }: {
+ fallback: boolean;
+ handled: boolean | undefined;
+ expected: boolean;
+ }) => {
+ const fallbackComponent: FallbackRender | undefined = fallback
+ ? ({ resetError }) =>
+ : undefined;
+ render(
+
+ children
+ ,
+ );
- it('sets `handled: true` when a fallback is provided', async () => {
- render(
- }>
- children
- ,
- );
-
- expect(mockCaptureException).toHaveBeenCalledTimes(0);
-
- const btn = screen.getByTestId('errorBtn');
- fireEvent.click(btn);
-
- expect(mockCaptureException).toHaveBeenCalledTimes(1);
- expect(mockCaptureException).toHaveBeenLastCalledWith(expect.any(Object), {
- captureContext: {
- contexts: { react: { componentStack: expect.any(String) } },
- },
- mechanism: { handled: true },
- });
- });
-
- it('sets `handled: false` when no fallback is provided', async () => {
- render(
-
- children
- ,
- );
-
- expect(mockCaptureException).toHaveBeenCalledTimes(0);
-
- const btn = screen.getByTestId('errorBtn');
- fireEvent.click(btn);
+ expect(mockCaptureException).toHaveBeenCalledTimes(0);
- expect(mockCaptureException).toHaveBeenCalledTimes(1);
- expect(mockCaptureException).toHaveBeenLastCalledWith(expect.any(Object), {
- captureContext: {
- contexts: { react: { componentStack: expect.any(String) } },
- },
- mechanism: { handled: false },
- });
- });
+ const btn = screen.getByTestId('errorBtn');
+ fireEvent.click(btn);
+
+ expect(mockCaptureException).toHaveBeenCalledTimes(1);
+ expect(mockCaptureException).toHaveBeenLastCalledWith(expect.any(Object), {
+ captureContext: {
+ contexts: { react: { componentStack: expect.any(String) } },
+ },
+ mechanism: { handled: expected },
+ });
+ },
+ );
});
});
diff --git a/packages/react/test/reactrouter-descendant-routes.test.tsx b/packages/react/test/reactrouter-descendant-routes.test.tsx
new file mode 100644
index 000000000000..dcc73a2275df
--- /dev/null
+++ b/packages/react/test/reactrouter-descendant-routes.test.tsx
@@ -0,0 +1,397 @@
+import {
+ SEMANTIC_ATTRIBUTE_SENTRY_OP,
+ SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN,
+ SEMANTIC_ATTRIBUTE_SENTRY_SOURCE,
+ createTransport,
+ getCurrentScope,
+ setCurrentClient,
+} from '@sentry/core';
+import { render } from '@testing-library/react';
+import * as React from 'react';
+import {
+ MemoryRouter,
+ Navigate,
+ Outlet,
+ Route,
+ Routes,
+ createRoutesFromChildren,
+ matchRoutes,
+ useLocation,
+ useNavigationType,
+ useRoutes,
+} from 'react-router-6';
+
+import { BrowserClient } from '../src';
+import {
+ reactRouterV6BrowserTracingIntegration,
+ withSentryReactRouterV6Routing,
+ wrapUseRoutesV6,
+} from '../src/reactrouterv6';
+
+const mockStartBrowserTracingPageLoadSpan = jest.fn();
+const mockStartBrowserTracingNavigationSpan = jest.fn();
+
+const mockRootSpan = {
+ updateName: jest.fn(),
+ setAttribute: jest.fn(),
+ getSpanJSON() {
+ return { op: 'pageload' };
+ },
+};
+
+jest.mock('@sentry/browser', () => {
+ const actual = jest.requireActual('@sentry/browser');
+ return {
+ ...actual,
+ startBrowserTracingNavigationSpan: (...args: unknown[]) => {
+ mockStartBrowserTracingNavigationSpan(...args);
+ return actual.startBrowserTracingNavigationSpan(...args);
+ },
+ startBrowserTracingPageLoadSpan: (...args: unknown[]) => {
+ mockStartBrowserTracingPageLoadSpan(...args);
+ return actual.startBrowserTracingPageLoadSpan(...args);
+ },
+ };
+});
+
+jest.mock('@sentry/core', () => {
+ const actual = jest.requireActual('@sentry/core');
+ return {
+ ...actual,
+ getRootSpan: () => {
+ return mockRootSpan;
+ },
+ };
+});
+
+describe('React Router Descendant Routes', () => {
+ function createMockBrowserClient(): BrowserClient {
+ return new BrowserClient({
+ integrations: [],
+ tracesSampleRate: 1,
+ transport: () => createTransport({ recordDroppedEvent: () => undefined }, _ => Promise.resolve({})),
+ stackParser: () => [],
+ });
+ }
+
+ beforeEach(() => {
+ jest.clearAllMocks();
+ getCurrentScope().setClient(undefined);
+ });
+
+ describe('withSentryReactRouterV6Routing', () => {
+ it('works with descendant wildcard routes - pageload', () => {
+ const client = createMockBrowserClient();
+ setCurrentClient(client);
+
+ client.addIntegration(
+ reactRouterV6BrowserTracingIntegration({
+ useEffect: React.useEffect,
+ useLocation,
+ useNavigationType,
+ createRoutesFromChildren,
+ matchRoutes,
+ }),
+ );
+ const SentryRoutes = withSentryReactRouterV6Routing(Routes);
+
+ const DetailsRoutes = () => (
+
+ Details} />
+
+ );
+
+ const ViewsRoutes = () => (
+
+ Views} />
+ } />
+
+ );
+
+ const ProjectsRoutes = () => (
+
+ }>
+