feat(metrics): Add secure connect navigation timing (getsentry#2980)

k-fish · dashed · web-flow · commit 3a7be5bc3002 · 2020-10-20T12:29:58.000+02:00
* feat(metrics): Add secure connect navigation timing

This is helpful to determine whether the span needed to do tls negotation, and if so, how long it takes. Had to modify the addPerformanceNavigationTiming function to allow a custom end since secure connect's end is connectEnd.

* Update packages/tracing/src/browser/metrics.ts

Co-authored-by: Alberto Leal &lt;mail4alberto@gmail.com&gt;

Co-authored-by: Alberto Leal &lt;mail4alberto@gmail.com&gt;
diff --git a/packages/tracing/src/browser/metrics.ts b/packages/tracing/src/browser/metrics.ts
@@ -252,6 +252,7 @@ function addNavigationSpans(transaction: Transaction, entry: Record<string, any>
   addPerformanceNavigationTiming(transaction, entry, 'domContentLoadedEvent', timeOrigin);
   addPerformanceNavigationTiming(transaction, entry, 'loadEvent', timeOrigin);
   addPerformanceNavigationTiming(transaction, entry, 'connect', timeOrigin);
+  addPerformanceNavigationTiming(transaction, entry, 'secureConnection', timeOrigin, 'connectEnd');
   addPerformanceNavigationTiming(transaction, entry, 'domainLookup', timeOrigin);
   addRequest(transaction, entry, timeOrigin);
 }
@@ -330,8 +331,9 @@ function addPerformanceNavigationTiming(
   entry: Record<string, any>,
   event: string,
   timeOrigin: number,
+  eventEnd?: string,
 ): void {
-  const end = entry[`${event}End`] as number | undefined;
+  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) {
     return;
