feat(tracing): Add beforeNavigate option (#2691)

Adds a beforeNavigate option to the Tracing integration. It allows for users of the integration to change the transaction name before a navigation/pageload transaction has been created.

Currently it defaults to setting the transaction name to `location.pathname` (changed from `location.href` because we don't want to include query params).

Author: AbhiPrasad

CHANGELOG.md

@@ -15,6 +15,8 @@
 - [react] ref: Refactor Profiler to account for update and render (#2677)
 - [apm] feat: Add ability to get span from activity using `getActivitySpan` (#2677)
 - [apm] fix: Check if `performance.mark` exists before calling it (#2680)
+- [tracing] feat: Add `beforeNavigate` option (#2691)
+- [tracing] ref: Create navigation transactions using `window.location.pathname` instead of `window.location.href` (#2691)
 
 ## 5.17.0
 

packages/apm/src/integrations/tracing.ts

@@ -107,6 +107,15 @@ export interface TracingOptions {
     writeAsBreadcrumbs: boolean;
     spanDebugTimingInfo: boolean;
   };
+
+  /**
+   * beforeNavigate is called before a pageload/navigation transaction is created and allows for users
+   * to set a custom navigation transaction name based on the current `window.location`. Defaults to returning
+   * `window.location.pathname`.
+   *
+   * @param location the current location before navigation span is created
+   */
+  beforeNavigate(location: Location): string;
 }
 
 /** JSDoc */
@@ -177,6 +186,9 @@ export class Tracing implements Integration {
       Tracing._trackLCP();
     }
     const defaults = {
+      beforeNavigate(location: Location): string {
+        return location.pathname;
+      },
       debug: {
         spanDebugTimingInfo: false,
         writeAsBreadcrumbs: false,
@@ -221,10 +233,9 @@ export class Tracing implements Integration {
     }
 
     // Starting pageload transaction
-    if (global.location && global.location.href && Tracing.options && Tracing.options.startTransactionOnPageLoad) {
-      // Use `${global.location.href}` as transaction name
+    if (global.location && Tracing.options && Tracing.options.startTransactionOnPageLoad) {
       Tracing.startIdleTransaction({
-        name: global.location.href,
+        name: Tracing.options.beforeNavigate(window.location),
         op: 'pageload',
       });
     }
@@ -997,7 +1008,7 @@ function historyCallback(_: { [key: string]: any }): void {
   if (Tracing.options.startTransactionOnLocationChange && global && global.location) {
     Tracing.finishIdleTransaction(timestampWithMs());
     Tracing.startIdleTransaction({
-      name: global.location.href,
+      name: Tracing.options.beforeNavigate(window.location),
       op: 'navigation',
     });
   }