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

* 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 <mail4alberto@gmail.com>

Co-authored-by: Alberto Leal <mail4alberto@gmail.com>

Author: k-fish

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;