Added parameterized transaction name if parameterizedPaths is provided

.yarnrc.yml

@@ -1 +1 @@
-yarnPath: .yarn/releases/yarn-3.1.0.cjs
+yarnPath: .yarn/releases/yarn-3.2.0.cjs

package.json

@@ -1,13 +1,13 @@
 {
   "name": "react-router-v6-instrumentation",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "author": "Charles Stover <[email protected]>",
   "description": "Sentry browser tracing integration for React Router v6",
   "homepage": "https://www.npmjs.com/package/react-router-v6-instrumentation",
   "license": "MIT",
   "main": "./dist/cjs/index.cjs",
   "module": "./dist/esm/index.js",
-  "packageManager": "yarn@3.1.0",
+  "packageManager": "yarn@3.2.0",
   "type": "module",
   "types": "./dist/types/index.d.ts",
   "bugs": {
@@ -41,43 +41,45 @@
     "rollup:watch": "rollup --config --watch"
   },
   "dependencies": {
-    "@sentry/types": "^6.14.1"
+    "@sentry/types": "^6.18.2"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^21.0.1",
-    "@rollup/plugin-node-resolve": "^13.0.6",
-    "@sentry/react": "^6.14.1",
-    "@sentry/tracing": "^6.14.1",
+    "@rollup/plugin-commonjs": "^21.0.2",
+    "@rollup/plugin-node-resolve": "^13.1.3",
+    "@sentry/react": "^6.18.2",
+    "@sentry/tracing": "^6.18.2",
     "@testing-library/react-hooks": "^7.0.2",
-    "@types/jest": "^27.0.2",
-    "@types/node": "^16.11.7",
-    "@types/react": "^17.0.34",
-    "@types/react-dom": "^17.0.11",
-    "@typescript-eslint/eslint-plugin": "^5.3.1",
-    "@typescript-eslint/parser": "^5.3.1",
-    "@yarnpkg/sdks": "^2.5.1-rc.1",
-    "eslint": "^8.2.0",
-    "eslint-config-prettier": "^8.3.0",
+    "@types/jest": "^27.4.1",
+    "@types/node": "^17.0.21",
+    "@types/react": "^17.0.40",
+    "@types/react-dom": "^17.0.13",
+    "@typescript-eslint/eslint-plugin": "^5.15.0",
+    "@typescript-eslint/parser": "^5.15.0",
+    "@yarnpkg/sdks": "^2.6.0",
+    "eslint": "^8.11.0",
+    "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.27.0",
+    "eslint-plugin-react": "^7.29.4",
     "eslint-plugin-react-hooks": "^4.3.0",
-    "jest": "^27.3.1",
-    "prettier": "^2.4.1",
+    "jest": "^27.5.1",
+    "prettier": "^2.5.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-router": "^6.0.2",
+    "react-router": "^6.2.2",
+    "react-router-dom": "^6.2.2",
     "react-test-renderer": "^17.0.2",
-    "rollup": "^2.59.0",
-    "rollup-plugin-typescript2": "^0.30.0",
-    "ts-jest": "^27.0.7",
+    "rollup": "^2.70.1",
+    "rollup-plugin-typescript2": "^0.31.2",
+    "ts-jest": "^27.1.3",
     "tslib": "^2.3.1",
-    "typescript": "^4.4.4"
+    "typescript": "^4.6.2"
   },
   "peerDependencies": {
     "@sentry/react": "^6.0.0",
     "@sentry/tracing": "^6.0.0",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
-    "react-router": "^6.0.0"
+    "react-router": "^6.0.0",
+    "react-router-dom": "^6.2.2"
   }
 }

src/hooks/use-routing-instrumentation.test.ts

@@ -1,11 +1,12 @@
-import { act } from '@testing-library/react-hooks';
 import TAGS from '../constants/tags';
-import renderRoutingInstrumentation from '../test/utils/render-routing-instrumentation';
 import TEST_CUSTOM_START_TRANSACTION from '../test/utils/test-custom-start-transaction';
 import TEST_FINISH from '../test/utils/test-finish';
+import { act } from '@testing-library/react-hooks';
+import renderRoutingInstrumentation from '../test/utils/render-routing-instrumentation';
 
 const ONCE = 1;
 const TEST_PATHNAME = '/test/pathname';
+const TEST_PATHNAME_PARAMETERIZED = '/test/:pathname';
 
 describe('useRoutingInstrumentation', (): void => {
   it('should ignore navigation before initializing', (): void => {
@@ -129,4 +130,29 @@ describe('useRoutingInstrumentation', (): void => {
       });
     });
   });
+
+  describe('parameterizedPaths', (): void => {
+    it('should set parameterized transaction name on navigation', (): void => {
+      const { navigate, routingInstrumentation } = renderRoutingInstrumentation(
+        {
+          parameterizedPaths: [TEST_PATHNAME_PARAMETERIZED],
+        },
+      );
+
+      act((): void => {
+        routingInstrumentation(TEST_CUSTOM_START_TRANSACTION, false, true);
+      });
+
+      act((): void => {
+        navigate(TEST_PATHNAME);
+      });
+
+      expect(TEST_CUSTOM_START_TRANSACTION).toHaveBeenCalledTimes(ONCE);
+      expect(TEST_CUSTOM_START_TRANSACTION).toHaveBeenLastCalledWith({
+        name: TEST_PATHNAME_PARAMETERIZED,
+        op: 'navigation',
+        tags: TAGS,
+      });
+    });
+  });
 });

src/hooks/use-routing-instrumentation.ts

@@ -1,12 +1,39 @@
-import type { ReactRouterInstrumentation } from '@sentry/react/dist/types';
+import type { Location, NavigationType } from 'react-router';
+import { RouteObject, matchRoutes } from 'react-router-dom';
 import type { Transaction, TransactionContext } from '@sentry/types';
-import type { MutableRefObject } from 'react';
 import { useCallback, useEffect, useRef } from 'react';
-import type { Location, NavigationType } from 'react-router';
 import { useLocation, useNavigationType } from 'react-router';
+
+import type { MutableRefObject } from 'react';
+import type { ReactRouterInstrumentation } from '@sentry/react/dist/types';
 import TAGS from '../constants/tags';
 
-export default function useRoutingInstrumentation(): ReactRouterInstrumentation {
+export interface RoutingInstrumentationOptions {
+  parameterizedPaths?: string[];
+}
+
+// Extract the route matching the current pathname
+const getMatchedRoutePath = (
+  routes: RouteObject[],
+  toPathname: string,
+): string | undefined => {
+  const matchedRoutes = matchRoutes(routes, toPathname);
+  if (!!matchedRoutes && matchedRoutes.length > 0) {
+    return matchedRoutes[0].route?.path;
+  }
+  return undefined;
+};
+
+export default function useRoutingInstrumentation(
+  options?: RoutingInstrumentationOptions,
+): ReactRouterInstrumentation {
+  // Settings
+  const { parameterizedPaths = [] } = options || {};
+  const routes = parameterizedPaths.map(path => {
+    return {
+      path,
+    } as RouteObject;
+  });
   // Contexts
   const { pathname }: Location = useLocation();
   const navigationType: NavigationType = useNavigationType();
@@ -42,11 +69,14 @@ export default function useRoutingInstrumentation(): ReactRouterInstrumentation
     }
 
     activeTransaction.current = customStartTransaction.current({
-      name: pathname,
+      name:
+        routes.length > 0
+          ? getMatchedRoutePath(routes, pathname) || pathname
+          : pathname,
       op: 'navigation',
       tags: TAGS,
     });
-  }, [isIgnoredNavigationType, pathname]);
+  }, [isIgnoredNavigationType, pathname, routes, getMatchedRoutePath]);
 
   useEffect((): VoidFunction => {
     // Finish the active transaction on unmount.