Skip to content

Commit e9418c0

Browse files
mydeamydea
authored
ref(react): Streamline browser tracing integrations & remove old code (#11012)
This removes the unused codepaths & fallbacks for the old browser tracing stuff in react.
1 parent b1a6a43 commit e9418c0

File tree

4 files changed

+103
-229
lines changed

4 files changed

+103
-229
lines changed

‎packages/react/src/reactrouter.tsx

Lines changed: 45 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,11 @@ import {
1212
getRootSpan,
1313
spanToJSON,
1414
} from '@sentry/core';
15-
import type { Integration, Span, StartSpanOptions, TransactionSource } from '@sentry/types';
15+
import type { Client, Integration, Span, TransactionSource } from '@sentry/types';
1616
import hoistNonReactStatics from 'hoist-non-react-statics';
1717
import * as React from 'react';
1818

19-
import type { Action, Location, ReactRouterInstrumentation } from './types';
19+
import type { Action, Location } from './types';
2020

2121
// We need to disable eslint no-explict-any because any is required for the
2222
// react-router typings.
@@ -63,21 +63,15 @@ export function reactRouterV4BrowserTracingIntegration(
6363
afterAllSetup(client) {
6464
integration.afterAllSetup(client);
6565

66-
const startPageloadCallback = (startSpanOptions: StartSpanOptions): undefined => {
67-
startBrowserTracingPageLoadSpan(client, startSpanOptions);
68-
return undefined;
69-
};
70-
71-
const startNavigationCallback = (startSpanOptions: StartSpanOptions): undefined => {
72-
startBrowserTracingNavigationSpan(client, startSpanOptions);
73-
return undefined;
74-
};
75-
76-
const instrumentation = createReactRouterInstrumentation(history, 'reactrouter_v4', routes, matchPath);
77-
78-
// Now instrument page load & navigation with correct settings
79-
instrumentation(startPageloadCallback, instrumentPageLoad, false);
80-
instrumentation(startNavigationCallback, false, instrumentNavigation);
66+
instrumentReactRouter(
67+
client,
68+
instrumentPageLoad,
69+
instrumentNavigation,
70+
history,
71+
'reactrouter_v4',
72+
routes,
73+
matchPath,
74+
);
8175
},
8276
};
8377
}
@@ -95,38 +89,35 @@ export function reactRouterV5BrowserTracingIntegration(
9589
instrumentNavigation: false,
9690
});
9791

98-
const { history, routes, matchPath } = options;
92+
const { history, routes, matchPath, instrumentPageLoad = true, instrumentNavigation = true } = options;
9993

10094
return {
10195
...integration,
10296
afterAllSetup(client) {
10397
integration.afterAllSetup(client);
10498

105-
const startPageloadCallback = (startSpanOptions: StartSpanOptions): undefined => {
106-
startBrowserTracingPageLoadSpan(client, startSpanOptions);
107-
return undefined;
108-
};
109-
110-
const startNavigationCallback = (startSpanOptions: StartSpanOptions): undefined => {
111-
startBrowserTracingNavigationSpan(client, startSpanOptions);
112-
return undefined;
113-
};
114-
115-
const instrumentation = createReactRouterInstrumentation(history, 'reactrouter_v5', routes, matchPath);
116-
117-
// Now instrument page load & navigation with correct settings
118-
instrumentation(startPageloadCallback, options.instrumentPageLoad, false);
119-
instrumentation(startNavigationCallback, false, options.instrumentNavigation);
99+
instrumentReactRouter(
100+
client,
101+
instrumentPageLoad,
102+
instrumentNavigation,
103+
history,
104+
'reactrouter_v5',
105+
routes,
106+
matchPath,
107+
);
120108
},
121109
};
122110
}
123111

124-
function createReactRouterInstrumentation(
112+
function instrumentReactRouter(
113+
client: Client,
114+
instrumentPageLoad: boolean,
115+
instrumentNavigation: boolean,
125116
history: RouterHistory,
126117
instrumentationName: string,
127118
allRoutes: RouteConfig[] = [],
128119
matchPath?: MatchPath,
129-
): ReactRouterInstrumentation {
120+
): void {
130121
function getInitPathName(): string | undefined {
131122
if (history && history.location) {
132123
return history.location.pathname;
@@ -161,12 +152,11 @@ function createReactRouterInstrumentation(
161152
return [pathname, 'url'];
162153
}
163154

164-
return (customStartTransaction, startTransactionOnPageLoad = true, startTransactionOnLocationChange = true): void => {
155+
if (instrumentPageLoad) {
165156
const initPathName = getInitPathName();
166-
167-
if (startTransactionOnPageLoad && initPathName) {
157+
if (initPathName) {
168158
const [name, source] = normalizeTransactionName(initPathName);
169-
customStartTransaction({
159+
startBrowserTracingPageLoadSpan(client, {
170160
name,
171161
attributes: {
172162
[SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'pageload',
@@ -175,23 +165,23 @@ function createReactRouterInstrumentation(
175165
},
176166
});
177167
}
168+
}
178169

179-
if (startTransactionOnLocationChange && history.listen) {
180-
history.listen((location, action) => {
181-
if (action && (action === 'PUSH' || action === 'POP')) {
182-
const [name, source] = normalizeTransactionName(location.pathname);
183-
customStartTransaction({
184-
name,
185-
attributes: {
186-
[SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
187-
[SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: `auto.navigation.react.${instrumentationName}`,
188-
[SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: source,
189-
},
190-
});
191-
}
192-
});
193-
}
194-
};
170+
if (instrumentNavigation && history.listen) {
171+
history.listen((location, action) => {
172+
if (action && (action === 'PUSH' || action === 'POP')) {
173+
const [name, source] = normalizeTransactionName(location.pathname);
174+
startBrowserTracingNavigationSpan(client, {
175+
name,
176+
attributes: {
177+
[SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
178+
[SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: `auto.navigation.react.${instrumentationName}`,
179+
[SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: source,
180+
},
181+
});
182+
}
183+
});
184+
}
195185
}
196186

197187
/**

‎packages/react/src/reactrouterv3.ts

Lines changed: 40 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,9 @@ import {
99
SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN,
1010
SEMANTIC_ATTRIBUTE_SENTRY_SOURCE,
1111
} from '@sentry/core';
12-
import type {
13-
Integration,
14-
SpanAttributes,
15-
StartSpanOptions,
16-
Transaction,
17-
TransactionContext,
18-
TransactionSource,
19-
} from '@sentry/types';
12+
import type { Integration, TransactionSource } from '@sentry/types';
2013

21-
import type { Location, ReactRouterInstrumentation } from './types';
14+
import type { Location } from './types';
2215

2316
// Many of the types below had to be mocked out to prevent typescript issues
2417
// these types are required for correct functionality.
@@ -64,85 +57,46 @@ export function reactRouterV3BrowserTracingIntegration(
6457
afterAllSetup(client) {
6558
integration.afterAllSetup(client);
6659

67-
const startPageloadCallback = (startSpanOptions: StartSpanOptions): undefined => {
68-
startBrowserTracingPageLoadSpan(client, startSpanOptions);
69-
return undefined;
70-
};
71-
72-
const startNavigationCallback = (startSpanOptions: StartSpanOptions): undefined => {
73-
startBrowserTracingNavigationSpan(client, startSpanOptions);
74-
return undefined;
75-
};
76-
77-
const instrumentation = reactRouterV3Instrumentation(history, routes, match);
78-
79-
// Now instrument page load & navigation with correct settings
80-
instrumentation(startPageloadCallback, instrumentPageLoad, false);
81-
instrumentation(startNavigationCallback, false, instrumentNavigation);
82-
},
83-
};
84-
}
85-
86-
/**
87-
* Creates routing instrumentation for React Router v3
88-
* Works for React Router >= 3.2.0 and < 4.0.0
89-
*
90-
* @param history object from the `history` library
91-
* @param routes a list of all routes, should be
92-
* @param match `Router.match` utility
93-
*/
94-
function reactRouterV3Instrumentation(history: HistoryV3, routes: Route[], match: Match): ReactRouterInstrumentation {
95-
return (
96-
startTransaction: (context: TransactionContext) => Transaction | undefined,
97-
startTransactionOnPageLoad: boolean = true,
98-
startTransactionOnLocationChange: boolean = true,
99-
) => {
100-
let activeTransaction: Transaction | undefined;
101-
let prevName: string | undefined;
102-
103-
// Have to use window.location because history.location might not be defined.
104-
if (startTransactionOnPageLoad && WINDOW && WINDOW.location) {
105-
normalizeTransactionName(
106-
routes,
107-
WINDOW.location as unknown as Location,
108-
match,
109-
(localName: string, source: ReactRouterV3TransactionSource = 'url') => {
110-
prevName = localName;
111-
activeTransaction = startTransaction({
112-
name: prevName,
113-
attributes: {
114-
[SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'pageload',
115-
[SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.pageload.react.reactrouter_v3',
116-
[SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: source,
117-
},
118-
});
119-
},
120-
);
121-
}
60+
if (instrumentPageLoad && WINDOW && WINDOW.location) {
61+
normalizeTransactionName(
62+
routes,
63+
WINDOW.location as unknown as Location,
64+
match,
65+
(localName: string, source: ReactRouterV3TransactionSource = 'url') => {
66+
startBrowserTracingPageLoadSpan(client, {
67+
name: localName,
68+
attributes: {
69+
[SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'pageload',
70+
[SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.pageload.react.reactrouter_v3',
71+
[SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: source,
72+
},
73+
});
74+
},
75+
);
76+
}
12277

123-
if (startTransactionOnLocationChange && history.listen) {
124-
history.listen(location => {
125-
if (location.action === 'PUSH' || location.action === 'POP') {
126-
if (activeTransaction) {
127-
activeTransaction.end();
78+
if (instrumentNavigation && history.listen) {
79+
history.listen(location => {
80+
if (location.action === 'PUSH' || location.action === 'POP') {
81+
normalizeTransactionName(
82+
routes,
83+
location,
84+
match,
85+
(localName: string, source: TransactionSource = 'url') => {
86+
startBrowserTracingNavigationSpan(client, {
87+
name: localName,
88+
attributes: {
89+
[SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
90+
[SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.navigation.react.reactrouter_v3',
91+
[SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: source,
92+
},
93+
});
94+
},
95+
);
12896
}
129-
normalizeTransactionName(routes, location, match, (localName: string, source: TransactionSource = 'url') => {
130-
prevName = localName;
131-
132-
const attributes: SpanAttributes = {
133-
[SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
134-
[SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.navigation.react.reactrouter_v3',
135-
[SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: source,
136-
};
137-
138-
activeTransaction = startTransaction({
139-
name: prevName,
140-
attributes,
141-
});
142-
});
143-
}
144-
});
145-
}
97+
});
98+
}
99+
},
146100
};
147101
}
148102

0 commit comments

Comments
 (0)