|
| 1 | +import { Transaction } from '@sentry/types'; |
| 2 | +import { getGlobalObject } from '@sentry/utils'; |
| 3 | +import * as React from 'react'; |
| 4 | + |
| 5 | +import { Action, Location, ReactRouterInstrumentation } from './types'; |
| 6 | + |
| 7 | +type Match = { path: string; url: string; params: Record<string, any>; isExact: boolean }; |
| 8 | + |
| 9 | +export type RouterHistory = { |
| 10 | + location?: Location; |
| 11 | + listen?(cb: (location: Location, action: Action) => void): void; |
| 12 | +} & Record<string, any>; |
| 13 | + |
| 14 | +export type RouteConfig = { |
| 15 | + path?: string | string[]; |
| 16 | + exact?: boolean; |
| 17 | + component?: JSX.Element; |
| 18 | + routes?: RouteConfig[]; |
| 19 | + [propName: string]: any; |
| 20 | +}; |
| 21 | + |
| 22 | +type MatchPath = (pathname: string, props: string | string[] | any, parent?: Match | null) => Match | null; |
| 23 | + |
| 24 | +const global = getGlobalObject<Window>(); |
| 25 | + |
| 26 | +let activeTransaction: Transaction | undefined; |
| 27 | + |
| 28 | +export function reactRouterV4Instrumentation( |
| 29 | + history: RouterHistory, |
| 30 | + routes?: RouteConfig[], |
| 31 | + matchPath?: MatchPath, |
| 32 | +): ReactRouterInstrumentation { |
| 33 | + return reactRouterInstrumentation(history, 'react-router-v4', routes, matchPath); |
| 34 | +} |
| 35 | + |
| 36 | +export function reactRouterV5Instrumentation( |
| 37 | + history: RouterHistory, |
| 38 | + routes?: RouteConfig[], |
| 39 | + matchPath?: MatchPath, |
| 40 | +): ReactRouterInstrumentation { |
| 41 | + return reactRouterInstrumentation(history, 'react-router-v5', routes, matchPath); |
| 42 | +} |
| 43 | + |
| 44 | +function reactRouterInstrumentation( |
| 45 | + history: RouterHistory, |
| 46 | + name: string, |
| 47 | + allRoutes: RouteConfig[] = [], |
| 48 | + matchPath?: MatchPath, |
| 49 | +): ReactRouterInstrumentation { |
| 50 | + function getName(pathname: string): string { |
| 51 | + if (allRoutes === [] || !matchPath) { |
| 52 | + return pathname; |
| 53 | + } |
| 54 | + |
| 55 | + const branches = matchRoutes(allRoutes, pathname, matchPath); |
| 56 | + // tslint:disable-next-line: prefer-for-of |
| 57 | + for (let x = 0; x < branches.length; x++) { |
| 58 | + if (branches[x].match.isExact) { |
| 59 | + return branches[x].match.path; |
| 60 | + } |
| 61 | + } |
| 62 | + |
| 63 | + return pathname; |
| 64 | + } |
| 65 | + |
| 66 | + return (startTransaction, startTransactionOnPageLoad = true, startTransactionOnLocationChange = true) => { |
| 67 | + if (startTransactionOnPageLoad && global && global.location) { |
| 68 | + activeTransaction = startTransaction({ |
| 69 | + name: getName(global.location.pathname), |
| 70 | + op: 'pageload', |
| 71 | + tags: { |
| 72 | + 'routing.instrumentation': name, |
| 73 | + }, |
| 74 | + }); |
| 75 | + } |
| 76 | + |
| 77 | + if (startTransactionOnLocationChange && history.listen) { |
| 78 | + history.listen((location, action) => { |
| 79 | + // console.log(location, action); |
| 80 | + if (action && action === 'PUSH') { |
| 81 | + if (activeTransaction) { |
| 82 | + activeTransaction.finish(); |
| 83 | + } |
| 84 | + const tags = { |
| 85 | + 'routing.instrumentation': name, |
| 86 | + }; |
| 87 | + |
| 88 | + activeTransaction = startTransaction({ |
| 89 | + name: getName(location.pathname), |
| 90 | + op: 'navigation', |
| 91 | + tags, |
| 92 | + }); |
| 93 | + } |
| 94 | + }); |
| 95 | + } |
| 96 | + }; |
| 97 | +} |
| 98 | + |
| 99 | +/** |
| 100 | + * Matches a set of routes to a pathname |
| 101 | + * Based on implementation from |
| 102 | + */ |
| 103 | +function matchRoutes( |
| 104 | + routes: RouteConfig[], |
| 105 | + pathname: string, |
| 106 | + matchPath: MatchPath, |
| 107 | + branch: Array<{ route: RouteConfig; match: Match }> = [], |
| 108 | +): Array<{ route: RouteConfig; match: Match }> { |
| 109 | + routes.some(route => { |
| 110 | + const match = route.path |
| 111 | + ? matchPath(pathname, route) |
| 112 | + : branch.length |
| 113 | + ? branch[branch.length - 1].match // use parent match |
| 114 | + : computeRootMatch(pathname); // use default "root" match |
| 115 | + |
| 116 | + if (match) { |
| 117 | + branch.push({ route, match }); |
| 118 | + |
| 119 | + if (route.routes) { |
| 120 | + matchRoutes(route.routes, pathname, matchPath, branch); |
| 121 | + } |
| 122 | + } |
| 123 | + |
| 124 | + return !!match; |
| 125 | + }); |
| 126 | + |
| 127 | + return branch; |
| 128 | +} |
| 129 | + |
| 130 | +function computeRootMatch(pathname: string): Match { |
| 131 | + return { path: '/', url: '/', params: {}, isExact: pathname === '/' }; |
| 132 | +} |
| 133 | + |
| 134 | +export const withSentryRouting = (Route: React.ElementType) => (props: any) => { |
| 135 | + // tslint:disable: no-unsafe-any |
| 136 | + if (activeTransaction && props && props.computedMatch && props.computedMatch.isExact) { |
| 137 | + activeTransaction.setName(props.computedMatch.path); |
| 138 | + } |
| 139 | + return <Route {...props} />; |
| 140 | + // tslint:enable: no-unsafe-any |
| 141 | +}; |
0 commit comments