fix(web-vitals): Adjust some web vitals to be relative to fetchStart

Author: dashed

packages/tracing/src/browser/metrics.ts

@@ -134,6 +134,28 @@ export class MetricsInstrumentation {
 
     // Measurements are only available for pageload transactions
     if (transaction.op === 'pageload') {
+      // normalize applicable web vital values to be relative to transaction.startTimestamp
+
+      const timeOrigin = msToSec(performance.timeOrigin);
+
+      ['fcp', 'fp', 'lcp', 'ttfb'].forEach(name => {
+        if (!this._measurements[name]) {
+          return;
+        }
+
+        const oldValue = this._measurements[name].value;
+        const measurementTimestamp = timeOrigin + msToSec(oldValue);
+        // normalizedValue should be in milliseconds
+        const normalizedValue = (measurementTimestamp - transaction.startTimestamp) * 1000;
+
+        const delta = normalizedValue - oldValue;
+        logger.log(
+          `[Measurements] Normalized ${name} from ${this._measurements[name].value} to ${normalizedValue} (${delta})`,
+        );
+
+        this._measurements[name] = { value: normalizedValue };
+      });
+
       transaction.setMeasurements(this._measurements);
     }
   }
@@ -253,6 +275,7 @@ function addNavigationSpans(transaction: Transaction, entry: Record<string, any>
   addPerformanceNavigationTiming(transaction, entry, 'loadEvent', timeOrigin);
   addPerformanceNavigationTiming(transaction, entry, 'connect', timeOrigin);
   addPerformanceNavigationTiming(transaction, entry, 'secureConnection', timeOrigin, 'connectEnd');
+  addPerformanceNavigationTiming(transaction, entry, 'fetch', timeOrigin, 'domainLookupStart');
   addPerformanceNavigationTiming(transaction, entry, 'domainLookup', timeOrigin);
   addRequest(transaction, entry, timeOrigin);
 }