feat(tracing): Add more network timings to http calls (#8540)

Author: k-fish

packages/browser-integration-tests/suites/tracing/browsertracing/http-timings/test.ts

@@ -40,9 +40,16 @@ sentryTest('should create fetch spans with http timing', async ({ browserName, g
       timestamp: expect.any(Number),
       trace_id: tracingEvent.contexts?.trace?.trace_id,
       data: expect.objectContaining({
+        'http.request.redirect_start': expect.any(Number),
+        'http.request.fetch_start': expect.any(Number),
+        'http.request.domain_lookup_start': expect.any(Number),
+        'http.request.domain_lookup_end': expect.any(Number),
         'http.request.connect_start': expect.any(Number),
+        'http.request.secure_connection_start': expect.any(Number),
+        'http.request.connection_end': expect.any(Number),
         'http.request.request_start': expect.any(Number),
         'http.request.response_start': expect.any(Number),
+        'http.request.response_end': expect.any(Number),
         'network.protocol.version': expect.any(String),
       }),
     }),

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

@@ -182,6 +182,10 @@ function addHTTPTimings(span: Span): void {
   });
 }
 
+function getAbsoluteTime(time: number): number {
+  return ((browserPerformanceTimeOrigin || performance.timeOrigin) + time) / 1000;
+}
+
 function resourceTimingEntryToSpanData(resourceTiming: PerformanceResourceTiming): [string, string | number][] {
   const version = resourceTiming.nextHopProtocol.split('/')[1] || 'none';
 
@@ -195,9 +199,16 @@ function resourceTimingEntryToSpanData(resourceTiming: PerformanceResourceTiming
   }
   return [
     ...timingSpanData,
-    ['http.request.connect_start', (browserPerformanceTimeOrigin + resourceTiming.connectStart) / 1000],
-    ['http.request.request_start', (browserPerformanceTimeOrigin + resourceTiming.requestStart) / 1000],
-    ['http.request.response_start', (browserPerformanceTimeOrigin + resourceTiming.responseStart) / 1000],
+    ['http.request.redirect_start', getAbsoluteTime(resourceTiming.redirectStart)],
+    ['http.request.fetch_start', getAbsoluteTime(resourceTiming.fetchStart)],
+    ['http.request.domain_lookup_start', getAbsoluteTime(resourceTiming.domainLookupStart)],
+    ['http.request.domain_lookup_end', getAbsoluteTime(resourceTiming.domainLookupEnd)],
+    ['http.request.connect_start', getAbsoluteTime(resourceTiming.connectStart)],
+    ['http.request.secure_connection_start', getAbsoluteTime(resourceTiming.secureConnectionStart)],
+    ['http.request.connection_end', getAbsoluteTime(resourceTiming.connectEnd)],
+    ['http.request.request_start', getAbsoluteTime(resourceTiming.requestStart)],
+    ['http.request.response_start', getAbsoluteTime(resourceTiming.responseStart)],
+    ['http.request.response_end', getAbsoluteTime(resourceTiming.responseEnd)],
   ];
 }