feat: React Router v3 instrumentation

Author: AbhiPrasad

packages/react/package.json

@@ -28,17 +28,21 @@
     "react-dom": "15.x || 16.x"
   },
   "devDependencies": {
+    "@sentry/tracing": "5.19.2",
     "@testing-library/react": "^10.0.6",
     "@testing-library/react-hooks": "^3.3.0",
+    "@types/history": "^4.7.6",
     "@types/hoist-non-react-statics": "^3.3.1",
     "@types/react": "^16.9.35",
+    "@types/react-router-3": "npm:@types/[email protected]",
     "jest": "^24.7.1",
     "jsdom": "^16.2.2",
     "npm-run-all": "^4.1.2",
     "prettier": "^1.17.0",
     "prettier-check": "^2.0.0",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
+    "react-router-3": "npm:[email protected]",
     "react-test-renderer": "^16.13.1",
     "redux": "^4.0.5",
     "rimraf": "^2.6.3",

packages/react/src/index.ts

@@ -26,5 +26,6 @@ export * from '@sentry/browser';
 export { Profiler, withProfiler, useProfiler } from './profiler';
 export { ErrorBoundary, withErrorBoundary } from './errorboundary';
 export { createReduxEnhancer } from './redux';
+export { reactRouterV3Instrumenation } from './reactrouter';
 
 createReactEventProcessor();

packages/react/src/reactrouter.tsx

@@ -0,0 +1,122 @@
+import { Transaction, TransactionContext } from '@sentry/types';
+
+type routingInstrumentation = (
+  startTransaction: (context: TransactionContext) => Transaction,
+  startTransactionOnPageLoad?: boolean,
+  startTransactionOnLocationChange?: boolean,
+) => void;
+
+// Many of the types below had to be mocked out to lower bundle size.
+type PlainRoute = { path: string; childRoutes: PlainRoute[] };
+
+type Match = (
+  props: { location: Location; routes: PlainRoute[] },
+  cb: (error?: Error, _redirectLocation?: Location, renderProps?: { routes?: PlainRoute[] }) => void,
+) => void;
+
+type Location = {
+  pathname: string;
+  action: 'PUSH' | 'REPLACE' | 'POP';
+  key: string;
+} & Record<string, any>;
+
+type History = {
+  location: Location;
+  listen(cb: (location: Location) => void): void;
+} & Record<string, any>;
+
+/**
+ * Creates routing instrumentation for React Router v3
+ *
+ * @param history object from the `history` library
+ * @param routes a list of all routes, should be
+ * @param match `Router.match` utility
+ */
+export function reactRouterV3Instrumenation(
+  history: History,
+  routes: PlainRoute[],
+  match: Match,
+): routingInstrumentation {
+  return (
+    startTransaction: (context: TransactionContext) => Transaction | undefined,
+    startTransactionOnPageLoad: boolean = true,
+    startTransactionOnLocationChange: boolean = true,
+  ) => {
+    let activeTransaction: Transaction | undefined;
+    let name = normalizeTransactionName(routes, history.location, match);
+    if (startTransactionOnPageLoad) {
+      activeTransaction = startTransaction({
+        name,
+        op: 'pageload',
+        tags: {
+          from: name,
+          routingInstrumentation: 'react-router-v3',
+        },
+      });
+    }
+
+    if (startTransactionOnLocationChange) {
+      history.listen(location => {
+        if (location.action === 'PUSH') {
+          if (activeTransaction) {
+            activeTransaction.finish();
+          }
+          const tags = { from: name, routingInstrumentation: 'react-router-v3' };
+          name = normalizeTransactionName(routes, history.location, match);
+          activeTransaction = startTransaction({
+            name,
+            op: 'navigation',
+            tags,
+          });
+        }
+      });
+    }
+  };
+}
+
+export function normalizeTransactionName(appRoutes: PlainRoute[], location: Location, match: Match): string {
+  const defaultName = location.pathname;
+  match(
+    {
+      location,
+      routes: appRoutes,
+    },
+    (error?: Error, _redirectLocation?: Location, renderProps?: { routes?: PlainRoute[] }) => {
+      if (error || !renderProps) {
+        return defaultName;
+      }
+
+      const routePath = getRouteStringFromRoutes(renderProps.routes || []);
+
+      if (routePath.length === 0 || routePath === '/*') {
+        return defaultName;
+      }
+
+      return routePath;
+    },
+  );
+
+  return defaultName;
+}
+
+function getRouteStringFromRoutes(routes: PlainRoute[]): string {
+  if (!Array.isArray(routes)) {
+    return '';
+  }
+
+  const routesWithPaths: PlainRoute[] = routes.filter((route: PlainRoute) => !!route.path);
+
+  let index = -1;
+  for (let x = routesWithPaths.length; x >= 0; x--) {
+    if (routesWithPaths[x].path.startsWith('/')) {
+      index = x;
+      break;
+    }
+  }
+
+  return routesWithPaths
+    .slice(index)
+    .filter(({ path }) => !!path)
+    .map(({ path }) => path)
+    .join('');
+}

packages/react/test/reactrouter.test.tsx

@@ -0,0 +1,6 @@
+import { browserHistory } from 'react-router-3';
+import { routes } from './routes';
+
+describe('React Router V3', () => {
+  it('works', () => {});
+});