ref(tracing): Reduce metrics bundle size (#4432)

- Extract out function `_tagMetricInfo` (rename to `tagMetricInfo`)
- Update `addPerformanceNavigationTiming` function signature to avoid
  using object destructure
- Small change to entryScriptSrc

Author: AbhiPrasad

packages/tracing/src/browser/metrics.ts

@@ -44,7 +44,7 @@ export class MetricsInstrumentation {
     logger.log('[Tracing] Adding & adjusting spans using Performance API');
 
     const timeOrigin = msToSec(browserPerformanceTimeOrigin);
-    let entryScriptSrc: string | undefined;
+    let entryScriptSrc = '';
 
     if (global.document && global.document.scripts) {
       // eslint-disable-next-line @typescript-eslint/prefer-for-of
@@ -114,7 +114,7 @@ export class MetricsInstrumentation {
             const resourceName = (entry.name as string).replace(global.location.origin, '');
             const endTimestamp = addResourceSpans(transaction, entry, resourceName, startTime, duration, timeOrigin);
             // We remember the entry script end time to calculate the difference to the first init mark
-            if (entryScriptStartTimestamp === undefined && (entryScriptSrc || '').indexOf(resourceName) > -1) {
+            if (entryScriptStartTimestamp === undefined && entryScriptSrc.indexOf(resourceName) > -1) {
               entryScriptStartTimestamp = endTimestamp;
             }
             break;
@@ -194,60 +194,11 @@ export class MetricsInstrumentation {
       }
 
       transaction.setMeasurements(this._measurements);
-      this._tagMetricInfo(transaction);
-
+      tagMetricInfo(transaction, this._lcpEntry, this._clsEntry);
       transaction.setTag('sentry_reportAllChanges', this._reportAllChanges);
     }
   }
 
-  /** Add LCP / CLS data to transaction to allow debugging */
-  private _tagMetricInfo(transaction: Transaction): void {
-    if (this._lcpEntry) {
-      logger.log('[Measurements] Adding LCP Data');
-      // Capture Properties of the LCP element that contributes to the LCP.
-
-      if (this._lcpEntry.element) {
-        transaction.setTag('lcp.element', htmlTreeAsString(this._lcpEntry.element));
-      }
-
-      if (this._lcpEntry.id) {
-        transaction.setTag('lcp.id', this._lcpEntry.id);
-      }
-
-      if (this._lcpEntry.url) {
-        // Trim URL to the first 200 characters.
-        transaction.setTag('lcp.url', this._lcpEntry.url.trim().slice(0, 200));
-      }
-
-      transaction.setTag('lcp.size', this._lcpEntry.size);
-    }
-
-    // See: https://developer.mozilla.org/en-US/docs/Web/API/LayoutShift
-    if (this._clsEntry && this._clsEntry.sources) {
-      logger.log('[Measurements] Adding CLS Data');
-      this._clsEntry.sources.forEach((source, index) =>
-        transaction.setTag(`cls.source.${index + 1}`, htmlTreeAsString(source.node)),
-      );
-    }
-  }
-
-  /** Starts tracking the Cumulative Layout Shift on the current page. */
-  private _trackCLS(): void {
-    // See:
-    // https://web.dev/evolving-cls/
-    // https://web.dev/cls-web-tooling/
-    getCLS(metric => {
-      const entry = metric.entries.pop();
-      if (!entry) {
-        return;
-      }
-
-      logger.log('[Measurements] Adding CLS');
-      this._measurements['cls'] = { value: metric.value };
-      this._clsEntry = entry as LayoutShift;
-    });
-  }
-
   /**
    * Capture the information of the user agent.
    */
@@ -286,11 +237,27 @@ export class MetricsInstrumentation {
     }
   }
 
+  /** Starts tracking the Cumulative Layout Shift on the current page. */
+  private _trackCLS(): void {
+    // See:
+    // https://web.dev/evolving-cls/
+    // https://web.dev/cls-web-tooling/
+    getCLS(metric => {
+      const entry = metric.entries.pop();
+      if (!entry) {
+        return;
+      }
+
+      logger.log('[Measurements] Adding CLS');
+      this._measurements['cls'] = { value: metric.value };
+      this._clsEntry = entry as LayoutShift;
+    });
+  }
+
   /** Starts tracking the Largest Contentful Paint on the current page. */
   private _trackLCP(): void {
     getLCP(metric => {
       const entry = metric.entries.pop();
-
       if (!entry) {
         return;
       }
@@ -308,7 +275,6 @@ export class MetricsInstrumentation {
   private _trackFID(): void {
     getFID(metric => {
       const entry = metric.entries.pop();
-
       if (!entry) {
         return;
       }
@@ -324,28 +290,12 @@ export class MetricsInstrumentation {
 
 /** Instrument navigation entries */
 function addNavigationSpans(transaction: Transaction, entry: Record<string, any>, timeOrigin: number): void {
-  addPerformanceNavigationTiming({ transaction, entry, event: 'unloadEvent', timeOrigin });
-  addPerformanceNavigationTiming({ transaction, entry, event: 'redirect', timeOrigin });
-  addPerformanceNavigationTiming({ transaction, entry, event: 'domContentLoadedEvent', timeOrigin });
-  addPerformanceNavigationTiming({ transaction, entry, event: 'loadEvent', timeOrigin });
-  addPerformanceNavigationTiming({ transaction, entry, event: 'connect', timeOrigin });
-  addPerformanceNavigationTiming({
-    transaction,
-    entry,
-    event: 'secureConnection',
-    timeOrigin,
-    eventEnd: 'connectEnd',
-    description: 'TLS/SSL',
+  ['unloadEvent', 'redirect', 'domContentLoadedEvent', 'loadEvent', 'connect'].forEach(event => {
+    addPerformanceNavigationTiming(transaction, entry, event, timeOrigin);
   });
-  addPerformanceNavigationTiming({
-    transaction,
-    entry,
-    event: 'fetch',
-    timeOrigin,
-    eventEnd: 'domainLookupStart',
-    description: 'cache',
-  });
-  addPerformanceNavigationTiming({ transaction, entry, event: 'domainLookup', timeOrigin, description: 'DNS' });
+  addPerformanceNavigationTiming(transaction, entry, 'secureConnection', timeOrigin, 'TLS/SSL', 'connectEnd');
+  addPerformanceNavigationTiming(transaction, entry, 'fetch', timeOrigin, 'cache', 'domainLookupStart');
+  addPerformanceNavigationTiming(transaction, entry, 'domainLookup', timeOrigin, 'DNS');
   addRequest(transaction, entry, timeOrigin);
 }
 
@@ -418,16 +368,14 @@ export function addResourceSpans(
 }
 
 /** Create performance navigation related spans */
-function addPerformanceNavigationTiming(props: {
-  transaction: Transaction;
-  entry: Record<string, any>;
-  event: string;
-  timeOrigin: number;
-  eventEnd?: string;
-  description?: string;
-}): void {
-  const { transaction, entry, event, timeOrigin, eventEnd, description } = props;
-
+function addPerformanceNavigationTiming(
+  transaction: Transaction,
+  entry: Record<string, any>,
+  event: string,
+  timeOrigin: number,
+  description?: string,
+  eventEnd?: string,
+): void {
   const end = eventEnd ? (entry[eventEnd] as number | undefined) : (entry[`${event}End`] as number | undefined);
   const start = entry[`${event}Start`] as number | undefined;
   if (!start || !end) {
@@ -480,3 +428,39 @@ export function _startChild(transaction: Transaction, { startTimestamp, ...ctx }
 function isMeasurementValue(value: any): boolean {
   return typeof value === 'number' && isFinite(value);
 }
+
+/** Add LCP / CLS data to transaction to allow debugging */
+function tagMetricInfo(
+  transaction: Transaction,
+  lcpEntry: MetricsInstrumentation['_lcpEntry'],
+  clsEntry: MetricsInstrumentation['_clsEntry'],
+): void {
+  if (lcpEntry) {
+    logger.log('[Measurements] Adding LCP Data');
+
+    // Capture Properties of the LCP element that contributes to the LCP.
+
+    if (lcpEntry.element) {
+      transaction.setTag('lcp.element', htmlTreeAsString(lcpEntry.element));
+    }
+
+    if (lcpEntry.id) {
+      transaction.setTag('lcp.id', lcpEntry.id);
+    }
+
+    if (lcpEntry.url) {
+      // Trim URL to the first 200 characters.
+      transaction.setTag('lcp.url', lcpEntry.url.trim().slice(0, 200));
+    }
+
+    transaction.setTag('lcp.size', lcpEntry.size);
+  }
+
+  // See: https://developer.mozilla.org/en-US/docs/Web/API/LayoutShift
+  if (clsEntry && clsEntry.sources) {
+    logger.log('[Measurements] Adding CLS Data');
+    clsEntry.sources.forEach((source, index) =>
+      transaction.setTag(`cls.source.${index + 1}`, htmlTreeAsString(source.node)),
+    );
+  }
+}