|
| 1 | +import { startBrowserTracingNavigationSpan } from '@sentry/browser'; |
| 2 | +import type { Span } from '@sentry/core'; |
| 3 | +import { |
| 4 | + consoleSandbox, |
| 5 | + getActiveSpan, |
| 6 | + getClient, |
| 7 | + getRootSpan, |
| 8 | + GLOBAL_OBJ, |
| 9 | + SEMANTIC_ATTRIBUTE_SENTRY_OP, |
| 10 | + SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN, |
| 11 | + SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, |
| 12 | + spanToJSON, |
| 13 | +} from '@sentry/core'; |
| 14 | +import type { DataRouter, RouterState } from 'react-router'; |
| 15 | +import { DEBUG_BUILD } from '../common/debug-build'; |
| 16 | + |
| 17 | +const GLOBAL_OBJ_WITH_DATA_ROUTER = GLOBAL_OBJ as typeof GLOBAL_OBJ & { |
| 18 | + __reactRouterDataRouter?: DataRouter; |
| 19 | +}; |
| 20 | + |
| 21 | +const MAX_RETRIES = 40; // 2 seconds at 50ms interval |
| 22 | + |
| 23 | +/** |
| 24 | + * Instruments the React Router Data Router for pageloads and navigation. |
| 25 | + * |
| 26 | + * This function waits for the router to be available after hydration, then: |
| 27 | + * 1. Updates the pageload transaction with parameterized route info |
| 28 | + * 2. Patches router.navigate() to create navigation transactions |
| 29 | + * 3. Subscribes to router state changes to update navigation transactions with parameterized routes |
| 30 | + */ |
| 31 | +export function instrumentHydratedRouter(): void { |
| 32 | + function trySubscribe(): boolean { |
| 33 | + const router = GLOBAL_OBJ_WITH_DATA_ROUTER.__reactRouterDataRouter; |
| 34 | + |
| 35 | + if (router) { |
| 36 | + // The first time we hit the router, we try to update the pageload transaction |
| 37 | + // todo: update pageload tx here |
| 38 | + const pageloadSpan = getActiveRootSpan(); |
| 39 | + const pageloadName = pageloadSpan ? spanToJSON(pageloadSpan).description : undefined; |
| 40 | + const parameterizePageloadRoute = getParameterizedRoute(router.state); |
| 41 | + if ( |
| 42 | + pageloadName && |
| 43 | + normalizePathname(router.state.location.pathname) === normalizePathname(pageloadName) && // this event is for the currently active pageload |
| 44 | + normalizePathname(parameterizePageloadRoute) !== normalizePathname(pageloadName) // route is not parameterized yet |
| 45 | + ) { |
| 46 | + pageloadSpan?.updateName(parameterizePageloadRoute); |
| 47 | + pageloadSpan?.setAttribute(SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, 'route'); |
| 48 | + } |
| 49 | + |
| 50 | + // Patching navigate for creating accurate navigation transactions |
| 51 | + if (typeof router.navigate === 'function') { |
| 52 | + const originalNav = router.navigate.bind(router); |
| 53 | + router.navigate = function sentryPatchedNavigate(...args) { |
| 54 | + maybeCreateNavigationTransaction( |
| 55 | + String(args[0]) || '<unknown route>', // will be updated anyway |
| 56 | + 'url', // this also will be updated once we have the parameterized route |
| 57 | + ); |
| 58 | + return originalNav(...args); |
| 59 | + }; |
| 60 | + } |
| 61 | + |
| 62 | + // Subscribe to router state changes to update navigation transactions with parameterized routes |
| 63 | + router.subscribe(newState => { |
| 64 | + const navigationSpan = getActiveRootSpan(); |
| 65 | + const navigationSpanName = navigationSpan ? spanToJSON(navigationSpan).description : undefined; |
| 66 | + const parameterizedNavRoute = getParameterizedRoute(newState); |
| 67 | + |
| 68 | + if ( |
| 69 | + navigationSpanName && // we have an active pageload tx |
| 70 | + newState.navigation.state === 'idle' && // navigation has completed |
| 71 | + normalizePathname(newState.location.pathname) === normalizePathname(navigationSpanName) && // this event is for the currently active navigation |
| 72 | + normalizePathname(parameterizedNavRoute) !== normalizePathname(navigationSpanName) // route is not parameterized yet |
| 73 | + ) { |
| 74 | + navigationSpan?.updateName(parameterizedNavRoute); |
| 75 | + navigationSpan?.setAttribute(SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, 'route'); |
| 76 | + } |
| 77 | + }); |
| 78 | + return true; |
| 79 | + } |
| 80 | + return false; |
| 81 | + } |
| 82 | + |
| 83 | + // Wait until the router is available (since the SDK loads before hydration) |
| 84 | + if (!trySubscribe()) { |
| 85 | + let retryCount = 0; |
| 86 | + // Retry until the router is available or max retries reached |
| 87 | + const interval = setInterval(() => { |
| 88 | + if (trySubscribe() || retryCount >= MAX_RETRIES) { |
| 89 | + if (retryCount >= MAX_RETRIES) { |
| 90 | + DEBUG_BUILD && |
| 91 | + consoleSandbox(() => { |
| 92 | + // eslint-disable-next-line no-console |
| 93 | + console.warn('Unable to instrument React Router: router not found after hydration.'); |
| 94 | + }); |
| 95 | + } |
| 96 | + clearInterval(interval); |
| 97 | + } |
| 98 | + retryCount++; |
| 99 | + }, 50); |
| 100 | + } |
| 101 | +} |
| 102 | + |
| 103 | +function maybeCreateNavigationTransaction(name: string, source: 'url' | 'route'): Span | undefined { |
| 104 | + const client = getClient(); |
| 105 | + |
| 106 | + if (!client) { |
| 107 | + return undefined; |
| 108 | + } |
| 109 | + |
| 110 | + return startBrowserTracingNavigationSpan(client, { |
| 111 | + name, |
| 112 | + attributes: { |
| 113 | + [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: source, |
| 114 | + [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation', |
| 115 | + [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.navigation.react-router', |
| 116 | + }, |
| 117 | + }); |
| 118 | +} |
| 119 | + |
| 120 | +function getActiveRootSpan(): Span | undefined { |
| 121 | + const activeSpan = getActiveSpan(); |
| 122 | + if (!activeSpan) { |
| 123 | + return undefined; |
| 124 | + } |
| 125 | + |
| 126 | + const rootSpan = getRootSpan(activeSpan); |
| 127 | + |
| 128 | + const op = spanToJSON(rootSpan).op; |
| 129 | + |
| 130 | + // Only use this root span if it is a pageload or navigation span |
| 131 | + return op === 'navigation' || op === 'pageload' ? rootSpan : undefined; |
| 132 | +} |
| 133 | + |
| 134 | +function getParameterizedRoute(routerState: RouterState): string { |
| 135 | + const lastMatch = routerState.matches[routerState.matches.length - 1]; |
| 136 | + return normalizePathname(lastMatch?.route.path ?? routerState.location.pathname); |
| 137 | +} |
| 138 | + |
| 139 | +function normalizePathname(pathname: string): string { |
| 140 | + // Ensure it starts with a single slash |
| 141 | + let normalized = pathname.startsWith('/') ? pathname : `/${pathname}`; |
| 142 | + // Remove trailing slash unless it's the root |
| 143 | + if (normalized.length > 1 && normalized.endsWith('/')) { |
| 144 | + normalized = normalized.slice(0, -1); |
| 145 | + } |
| 146 | + return normalized; |
| 147 | +} |
0 commit comments