fix(tracing): Better guarding for performance observer (#8872)

This removes a type cast for the performance observer and actually adds
some guards to make sure we do not run into cases where a property we
expect to exist does not exist.

It seems we sometimes ran into cases where `nextHopProtocol` would be
`undefined`, not a string, leading to
https://github.com/getsentry/sentry-javascript/blob/develop/packages/tracing-internal/src/browser/request.ts#L202
failing.

I now specifically check for the existence of this property, as well as
also adding a default for all the time based stuff (0) to ensure these
also work in the case one of the fields does not exist (instead of
checking for existence of all of them).

Closes #8870
Closes #8863

Author: mydea

packages/tracing-internal/src/browser/request.ts

@@ -166,6 +166,15 @@ export function instrumentOutgoingRequests(_options?: Partial<RequestInstrumenta
   }
 }
 
+function isPerformanceResourceTiming(entry: PerformanceEntry): entry is PerformanceResourceTiming {
+  return (
+    entry.entryType === 'resource' &&
+    'initiatorType' in entry &&
+    typeof (entry as PerformanceResourceTiming).nextHopProtocol === 'string' &&
+    (entry.initiatorType === 'fetch' || entry.initiatorType === 'xmlhttprequest')
+  );
+}
+
 /**
  * Creates a temporary observer to listen to the next fetch/xhr resourcing timings,
  * so that when timings hit their per-browser limit they don't need to be removed.
@@ -175,9 +184,9 @@ export function instrumentOutgoingRequests(_options?: Partial<RequestInstrumenta
 function addHTTPTimings(span: Span): void {
   const url = span.data.url;
   const observer = new PerformanceObserver(list => {
-    const entries = list.getEntries() as PerformanceResourceTiming[];
+    const entries = list.getEntries();
     entries.forEach(entry => {
-      if ((entry.initiatorType === 'fetch' || entry.initiatorType === 'xmlhttprequest') && entry.name.endsWith(url)) {
+      if (isPerformanceResourceTiming(entry) && entry.name.endsWith(url)) {
         const spanData = resourceTimingEntryToSpanData(entry);
         spanData.forEach(data => span.setData(...data));
         observer.disconnect();
@@ -220,7 +229,7 @@ export function extractNetworkProtocol(nextHopProtocol: string): { name: string;
   return { name, version };
 }
 
-function getAbsoluteTime(time: number): number {
+function getAbsoluteTime(time: number = 0): number {
   return ((browserPerformanceTimeOrigin || performance.timeOrigin) + time) / 1000;
 }