feat: Add React Router Instrumentation for Tracing (#20031)

* feat: Use @sentry/tracing

* feat: Use react router instrumentation

* deps: Update Sentry SDK to 5.20.1

Author: AbhiPrasad

package.json

@@ -20,12 +20,12 @@
     "@emotion/babel-preset-css-prop": "^10.0.27",
     "@emotion/core": "^10.0.27",
     "@emotion/styled": "^10.0.27",
-    "@sentry/apm": "5.19.0",
-    "@sentry/integrations": "5.19.0",
-    "@sentry/react": "5.19.0",
+    "@sentry/tracing": "5.20.1",
+    "@sentry/integrations": "5.20.1",
+    "@sentry/react": "5.20.1",
     "@sentry/release-parser": "^0.6.0",
     "@sentry/rrweb": "^0.1.1",
-    "@sentry/utils": "5.19.0",
+    "@sentry/utils": "5.20.1",
     "@types/classnames": "^2.2.0",
     "@types/clipboard": "^2.0.1",
     "@types/color": "^3.0.0",
@@ -132,7 +132,7 @@
   "devDependencies": {
     "@babel/plugin-transform-react-jsx-source": "^7.2.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.3.1",
-    "@sentry/node": "5.19.0",
+    "@sentry/node": "5.20.1",
     "@storybook/addon-a11y": "^5.3.3",
     "@storybook/addon-actions": "^5.3.3",
     "@storybook/addon-docs": "^5.3.3",

src/sentry/static/sentry/app/bootstrap.tsx

@@ -15,7 +15,7 @@ import SentryRRWeb from '@sentry/rrweb';
 import createReactClass from 'create-react-class';
 import jQuery from 'jquery';
 import moment from 'moment';
-import {Integrations} from '@sentry/apm';
+import {Integrations} from '@sentry/tracing';
 import {ExtraErrorData} from '@sentry/integrations';
 import * as Sentry from '@sentry/react';
 
@@ -27,7 +27,6 @@ import Main from 'app/main';
 import ajaxCsrfSetup from 'app/utils/ajaxCsrfSetup';
 import plugins from 'app/plugins';
 import routes from 'app/routes';
-import {normalizeTransactionName} from 'app/utils/apm';
 
 import {setupFavicon} from './favicon';
 
@@ -51,23 +50,18 @@ const config = ConfigStore.getConfig();
 
 const tracesSampleRate = config ? config.apmSampling : 0;
 
-const appRoutes = Router.createRoutes(routes());
-
 function getSentryIntegrations(hasReplays: boolean = false) {
   const integrations = [
     new ExtraErrorData({
       // 6 is arbitrary, seems like a nice number
       depth: 6,
     }),
-    new Integrations.Tracing({
-      tracingOrigins: ['localhost', 'sentry.io', /^\//],
-      debug: {
-        spanDebugTimingInfo: true,
-        writeAsBreadcrumbs: false,
-      },
-      beforeNavigate: (location: Location) => {
-        return normalizeTransactionName(appRoutes, location);
-      },
+    new Integrations.BrowserTracing({
+      routingInstrumentation: Sentry.reactRouterV3Instrumentation(
+        Router.browserHistory,
+        Router.createRoutes(routes()),
+        Router.match
+      ),
     }),
   ];
   if (hasReplays) {

src/sentry/static/sentry/app/utils/apm.tsx

@@ -16,7 +16,6 @@ import {
 } from 'app/actionCreators/deployPreview';
 import {fetchGuides} from 'app/actionCreators/guides';
 import {openCommandPalette} from 'app/actionCreators/modal';
-import {setTransactionName} from 'app/utils/apm';
 import {t} from 'app/locale';
 import AlertActions from 'app/actions/alertActions';
 import ConfigStore from 'app/stores/configStore';
@@ -27,7 +26,6 @@ import Indicators from 'app/components/indicators';
 import LoadingIndicator from 'app/components/loadingIndicator';
 import NewsletterConsent from 'app/views/newsletterConsent';
 import OrganizationsStore from 'app/stores/organizationsStore';
-import getRouteStringFromRoutes from 'app/utils/getRouteStringFromRoutes';
 import withApi from 'app/utils/withApi';
 import withConfig from 'app/utils/withConfig';
 
@@ -82,8 +80,6 @@ class App extends React.Component<Props, State> {
   }
 
   componentDidMount() {
-    this.updateTracing();
-
     this.props.api.request('/organizations/', {
       query: {
         member: '1',
@@ -180,7 +176,6 @@ class App extends React.Component<Props, State> {
     if (!isEqual(config, prevProps.config)) {
       this.handleConfigStoreChange(config);
     }
-    this.updateTracing();
   }
 
   componentWillUnmount() {
@@ -189,11 +184,6 @@ class App extends React.Component<Props, State> {
 
   mainContainerRef = React.createRef<HTMLDivElement>();
 
-  updateTracing() {
-    const route = getRouteStringFromRoutes(this.props.routes);
-    setTransactionName(route);
-  }
-
   handleConfigStoreChange(config) {
     const newState = {} as State;
     if (config.needsUpgrade !== undefined) {