ref(tracing): Clarify naming in BrowserTracing integration (#3338)

Author: lobsterkatie

packages/angular/README.md

@@ -82,15 +82,15 @@ Registering a Trace Service is a 3-step process.
    instrumentation:
 
 ```javascript
-import { init, routingInstrumentation } from '@sentry/angular';
+import { init, instrumentAngularRouting } from '@sentry/angular';
 import { Integrations as TracingIntegrations } from '@sentry/tracing';
 
 init({
   dsn: '__DSN__',
   integrations: [
     new TracingIntegrations.BrowserTracing({
       tracingOrigins: ['localhost', 'https://yourserver.io/api'],
-      routingInstrumentation: routingInstrumentation,
+      routingInstrumentation: instrumentAngularRouting,
     }),
   ],
   tracesSampleRate: 1,

packages/angular/src/index.ts

@@ -4,7 +4,9 @@ export { init } from './sdk';
 export { createErrorHandler, ErrorHandlerOptions } from './errorhandler';
 export {
   getActiveTransaction,
-  routingInstrumentation,
+  // TODO `instrumentAngularRouting` is just an alias for `routingInstrumentation`; deprecate the latter at some point
+  instrumentAngularRouting, // new name
+  routingInstrumentation, // legacy name
   TraceClassDecorator,
   TraceMethodDecorator,
   TraceDirective,

packages/angular/src/tracing.ts

@@ -14,22 +14,24 @@ let stashedStartTransactionOnLocationChange: boolean;
  * Creates routing instrumentation for Angular Router.
  */
 export function routingInstrumentation(
-  startTransaction: (context: TransactionContext) => Transaction | undefined,
+  customStartTransaction: (context: TransactionContext) => Transaction | undefined,
   startTransactionOnPageLoad: boolean = true,
   startTransactionOnLocationChange: boolean = true,
 ): void {
   instrumentationInitialized = true;
-  stashedStartTransaction = startTransaction;
+  stashedStartTransaction = customStartTransaction;
   stashedStartTransactionOnLocationChange = startTransactionOnLocationChange;
 
   if (startTransactionOnPageLoad) {
-    startTransaction({
+    customStartTransaction({
       name: window.location.pathname,
       op: 'pageload',
     });
   }
 }
 
+export const instrumentAngularRouting = routingInstrumentation;
+
 /**
  * Grabs active transaction off scope
  */

packages/ember/addon/instance-initializers/sentry-performance.ts

@@ -337,10 +337,10 @@ export async function instrumentForPerformance(appInstance: ApplicationInstance)
   sentryConfig['integrations'] = [
     ...existingIntegrations,
     new tracing.Integrations.BrowserTracing({
-      routingInstrumentation: (startTransaction, startTransactionOnPageLoad) => {
+      routingInstrumentation: (customStartTransaction, startTransactionOnPageLoad) => {
         const routerMain = appInstance.lookup('router:main');
         const routerService = appInstance.lookup('service:router');
-        _instrumentEmberRouter(routerService, routerMain, config, startTransaction, startTransactionOnPageLoad);
+        _instrumentEmberRouter(routerService, routerMain, config, customStartTransaction, startTransactionOnPageLoad);
       },
       idleTimeout,
     }),

packages/react/src/reactrouter.tsx

@@ -47,24 +47,24 @@ export function reactRouterV4Instrumentation(
   routes?: RouteConfig[],
   matchPath?: MatchPath,
 ): ReactRouterInstrumentation {
-  return reactRouterInstrumentation(history, 'react-router-v4', routes, matchPath);
+  return createReactRouterInstrumentation(history, 'react-router-v4', routes, matchPath);
 }
 
 export function reactRouterV5Instrumentation(
   history: RouterHistory,
   routes?: RouteConfig[],
   matchPath?: MatchPath,
 ): ReactRouterInstrumentation {
-  return reactRouterInstrumentation(history, 'react-router-v5', routes, matchPath);
+  return createReactRouterInstrumentation(history, 'react-router-v5', routes, matchPath);
 }
 
-function reactRouterInstrumentation(
+function createReactRouterInstrumentation(
   history: RouterHistory,
   name: string,
   allRoutes: RouteConfig[] = [],
   matchPath?: MatchPath,
 ): ReactRouterInstrumentation {
-  function getName(pathname: string): string {
+  function getTransactionName(pathname: string): string {
     if (allRoutes === [] || !matchPath) {
       return pathname;
     }
@@ -80,10 +80,10 @@ function reactRouterInstrumentation(
     return pathname;
   }
 
-  return (startTransaction, startTransactionOnPageLoad = true, startTransactionOnLocationChange = true): void => {
+  return (customStartTransaction, startTransactionOnPageLoad = true, startTransactionOnLocationChange = true): void => {
     if (startTransactionOnPageLoad && global && global.location) {
-      activeTransaction = startTransaction({
-        name: getName(global.location.pathname),
+      activeTransaction = customStartTransaction({
+        name: getTransactionName(global.location.pathname),
         op: 'pageload',
         tags: {
           'routing.instrumentation': name,
@@ -101,8 +101,8 @@ function reactRouterInstrumentation(
             'routing.instrumentation': name,
           };
 
-          activeTransaction = startTransaction({
-            name: getName(location.pathname),
+          activeTransaction = customStartTransaction({
+            name: getTransactionName(location.pathname),
             op: 'navigation',
             tags,
           });

packages/tracing/src/browser/browsertracing.ts

@@ -10,10 +10,10 @@ import { registerBackgroundTabDetection } from './backgroundtab';
 import { MetricsInstrumentation } from './metrics';
 import {
   defaultRequestInstrumentationOptions,
-  registerRequestInstrumentation,
+  instrumentOutgoingRequests,
   RequestInstrumentationOptions,
 } from './request';
-import { defaultRoutingInstrumentation } from './router';
+import { instrumentRoutingWithDefaults } from './router';
 
 export const DEFAULT_MAX_TRANSACTION_DURATION_SECONDS = 600;
 
@@ -77,7 +77,7 @@ export interface BrowserTracingOptions extends RequestInstrumentationOptions {
    * pageload and navigation transactions.
    */
   routingInstrumentation<T extends Transaction>(
-    startTransaction: (context: TransactionContext) => T | undefined,
+    customStartTransaction: (context: TransactionContext) => T | undefined,
     startTransactionOnPageLoad?: boolean,
     startTransactionOnLocationChange?: boolean,
   ): void;
@@ -87,7 +87,7 @@ const DEFAULT_BROWSER_TRACING_OPTIONS = {
   idleTimeout: DEFAULT_IDLE_TIMEOUT,
   markBackgroundTransactions: true,
   maxTransactionDuration: DEFAULT_MAX_TRANSACTION_DURATION_SECONDS,
-  routingInstrumentation: defaultRoutingInstrumentation,
+  routingInstrumentation: instrumentRoutingWithDefaults,
   startTransactionOnLocationChange: true,
   startTransactionOnPageLoad: true,
   ...defaultRequestInstrumentationOptions,
@@ -158,7 +158,7 @@ export class BrowserTracing implements Integration {
 
     // eslint-disable-next-line @typescript-eslint/unbound-method
     const {
-      routingInstrumentation,
+      routingInstrumentation: instrumentRouting,
       startTransactionOnLocationChange,
       startTransactionOnPageLoad,
       markBackgroundTransactions,
@@ -168,7 +168,7 @@ export class BrowserTracing implements Integration {
       shouldCreateSpanForRequest,
     } = this.options;
 
-    routingInstrumentation(
+    instrumentRouting(
       (context: TransactionContext) => this._createRouteTransaction(context),
       startTransactionOnPageLoad,
       startTransactionOnLocationChange,
@@ -178,7 +178,7 @@ export class BrowserTracing implements Integration {
       registerBackgroundTabDetection();
     }
 
-    registerRequestInstrumentation({ traceFetch, traceXHR, tracingOrigins, shouldCreateSpanForRequest });
+    instrumentOutgoingRequests({ traceFetch, traceXHR, tracingOrigins, shouldCreateSpanForRequest });
   }
 
   /** Create routing idle transaction. */

packages/tracing/src/browser/index.ts

@@ -1,6 +1,6 @@
 export { BrowserTracing } from './browsertracing';
 export {
-  registerRequestInstrumentation,
+  instrumentOutgoingRequests,
   RequestInstrumentationOptions,
   defaultRequestInstrumentationOptions,
 } from './request';

packages/tracing/src/browser/request.ts

@@ -83,7 +83,7 @@ export const defaultRequestInstrumentationOptions: RequestInstrumentationOptions
 };
 
 /** Registers span creators for xhr and fetch requests  */
-export function registerRequestInstrumentation(_options?: Partial<RequestInstrumentationOptions>): void {
+export function instrumentOutgoingRequests(_options?: Partial<RequestInstrumentationOptions>): void {
   // eslint-disable-next-line @typescript-eslint/unbound-method
   const { traceFetch, traceXHR, tracingOrigins, shouldCreateSpanForRequest } = {
     ...defaultRequestInstrumentationOptions,

packages/tracing/src/browser/router.ts

@@ -6,8 +6,8 @@ const global = getGlobalObject<Window>();
 /**
  * Default function implementing pageload and navigation transactions
  */
-export function defaultRoutingInstrumentation<T extends Transaction>(
-  startTransaction: (context: TransactionContext) => T | undefined,
+export function instrumentRoutingWithDefaults<T extends Transaction>(
+  customStartTransaction: (context: TransactionContext) => T | undefined,
   startTransactionOnPageLoad: boolean = true,
   startTransactionOnLocationChange: boolean = true,
 ): void {
@@ -20,7 +20,7 @@ export function defaultRoutingInstrumentation<T extends Transaction>(
 
   let activeTransaction: T | undefined;
   if (startTransactionOnPageLoad) {
-    activeTransaction = startTransaction({ name: global.location.pathname, op: 'pageload' });
+    activeTransaction = customStartTransaction({ name: global.location.pathname, op: 'pageload' });
   }
 
   if (startTransactionOnLocationChange) {
@@ -47,7 +47,7 @@ export function defaultRoutingInstrumentation<T extends Transaction>(
             // If there's an open transaction on the scope, we need to finish it before creating an new one.
             activeTransaction.finish();
           }
-          activeTransaction = startTransaction({ name: global.location.pathname, op: 'navigation' });
+          activeTransaction = customStartTransaction({ name: global.location.pathname, op: 'navigation' });
         }
       },
       type: 'history',

packages/tracing/src/index.ts

@@ -8,7 +8,8 @@ export { Integrations };
 export { Span } from './span';
 export { Transaction } from './transaction';
 export {
-  registerRequestInstrumentation,
+  // TODO deprecate old name in v7
+  instrumentOutgoingRequests as registerRequestInstrumentation,
   RequestInstrumentationOptions,
   defaultRequestInstrumentationOptions,
 } from './browser';