fix ttfb, fb, fco, measurements, connection attributes

Author: Lms24

dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-inp-streamed-spans/init.js

@@ -5,9 +5,6 @@ window._testBaseTimestamp = performance.timeOrigin / 1000;
 
 Sentry.init({
   dsn: 'https://public@dsn.ingest.sentry.io/1337',
-  integrations: [
-    Sentry.browserTracingIntegration({ idleTimeout: 4000 }),
-    Sentry.spanStreamingIntegration(),
-  ],
+  integrations: [Sentry.browserTracingIntegration({ idleTimeout: 4000 }), Sentry.spanStreamingIntegration()],
   tracesSampleRate: 1,
 });

dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-ttfb-streamed/init.js

@@ -0,0 +1,12 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+window._testBaseTimestamp = performance.timeOrigin / 1000;
+
+Sentry.init({
+  dsn: 'https://public@dsn.ingest.sentry.io/1337',
+  integrations: [Sentry.browserTracingIntegration(), Sentry.spanStreamingIntegration()],
+  traceLifecycle: 'stream',
+  tracesSampleRate: 1,
+  debug: true,
+});

dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-ttfb-streamed/test.ts

@@ -0,0 +1,36 @@
+import { expect } from '@playwright/test';
+import { sentryTest } from '../../../../utils/fixtures';
+import { hidePage, shouldSkipTracingTest, testingCdnBundle } from '../../../../utils/helpers';
+import { getSpanOp, waitForStreamedSpan } from '../../../../utils/spanUtils';
+
+sentryTest.beforeEach(async ({ page }) => {
+  if (shouldSkipTracingTest() || testingCdnBundle()) {
+    sentryTest.skip();
+  }
+
+  await page.setViewportSize({ width: 800, height: 1200 });
+});
+
+sentryTest(
+  'captures TTFB and TTFB request time as attributes on the streamed pageload span',
+  async ({ getLocalTestUrl, page }) => {
+    const url = await getLocalTestUrl({ testDir: __dirname });
+
+    const pageloadSpanPromise = waitForStreamedSpan(page, span => getSpanOp(span) === 'pageload');
+
+    await page.goto(url);
+    await hidePage(page);
+
+    const pageloadSpan = await pageloadSpanPromise;
+
+    // If responseStart === 0, TTFB is not reported.
+    // This seems to happen somewhat randomly, so we handle it.
+    const responseStart = await page.evaluate("performance.getEntriesByType('navigation')[0].responseStart;");
+    if (responseStart !== 0) {
+      expect(pageloadSpan.attributes?.['browser.web_vital.ttfb.value']?.type).toMatch(/^(double)|(integer)$/);
+      expect(pageloadSpan.attributes?.['browser.web_vital.ttfb.value']?.value).toBeGreaterThan(0);
+    }
+
+    expect(pageloadSpan.attributes?.['browser.web_vital.ttfb.request_time']?.type).toMatch(/^(double)|(integer)$/);
+  },
+);

packages/browser-utils/src/metrics/browserMetrics.ts

@@ -27,7 +27,7 @@ import { getBrowserPerformanceAPI, isMeasurementValue, msToSec, startAndEndSpan
 import { getActivationStart } from './web-vitals/lib/getActivationStart';
 import { getNavigationEntry } from './web-vitals/lib/getNavigationEntry';
 import { getVisibilityWatcher } from './web-vitals/lib/getVisibilityWatcher';
-
+import { debug } from '@sentry/core';
 interface NavigatorNetworkInformation {
   readonly connection?: NetworkInformation;
 }
@@ -336,6 +336,11 @@ interface AddPerformanceEntriesOptions {
    * Default: []
    */
   ignorePerformanceApiSpans: Array<string | RegExp>;
+
+  /**
+   * Whether span streaming is enabled.
+   */
+  spanStreamingEnabled?: boolean;
 }
 
 /** Add performance related spans to a transaction */
@@ -347,6 +352,14 @@ export function addPerformanceEntries(span: Span, options: AddPerformanceEntries
     return;
   }
 
+  const {
+    spanStreamingEnabled,
+    ignorePerformanceApiSpans,
+    ignoreResourceSpans,
+    recordClsOnPageloadSpan,
+    recordLcpOnPageloadSpan,
+  } = options;
+
   const timeOrigin = msToSec(origin);
 
   const performanceEntries = performance.getEntries();
@@ -375,7 +388,7 @@ export function addPerformanceEntries(span: Span, options: AddPerformanceEntries
       case 'mark':
       case 'paint':
       case 'measure': {
-        _addMeasureSpans(span, entry, startTime, duration, timeOrigin, options.ignorePerformanceApiSpans);
+        _addMeasureSpans(span, entry, startTime, duration, timeOrigin, ignorePerformanceApiSpans);
 
         // capture web vitals
         const firstHidden = getVisibilityWatcher();
@@ -398,7 +411,7 @@ export function addPerformanceEntries(span: Span, options: AddPerformanceEntries
           startTime,
           duration,
           timeOrigin,
-          options.ignoreResourceSpans,
+          ignoreResourceSpans,
         );
         break;
       }
@@ -408,25 +421,51 @@ export function addPerformanceEntries(span: Span, options: AddPerformanceEntries
 
   _performanceCursor = Math.max(performanceEntries.length - 1, 0);
 
-  _trackNavigator(span);
+  _trackNavigator(span, spanStreamingEnabled);
 
   // Measurements are only available for pageload transactions
   if (op === 'pageload') {
     _addTtfbRequestTimeToMeasurements(_measurements);
 
-    // If CLS standalone spans are enabled, don't record CLS as a measurement
-    if (!options.recordClsOnPageloadSpan) {
-      delete _measurements.cls;
-    }
+    if (spanStreamingEnabled) {
+      const setAttr = (shortWebVitalName: string, value: number, customAttrName?: string) => {
+        const attrKey = customAttrName ?? `browser.web_vital.${shortWebVitalName}.value`;
+        span.setAttribute(attrKey, value);
+        debug.log('Setting web vital attribute', { [attrKey]: value }, 'on pageload span');
+      };
+      // for streamed pageload spans, we add the web vital measurements as attributes.
+      // We omit LCP, CLS and INP because they're tracked separately as spans
+      if (_measurements['ttfb']) {
+        setAttr('ttfb', _measurements['ttfb'].value);
+      }
+      if (_measurements['ttfb.requestTime']) {
+        setAttr('ttfb.requestTime', _measurements['ttfb.requestTime'].value, 'browser.web_vital.ttfb.request_time');
+      }
+      if (_measurements['fp']) {
+        setAttr('fp', _measurements['fp'].value);
+      }
+      if (_measurements['fcp']) {
+        setAttr('fcp', _measurements['fcp'].value);
+      }
+    } else {
+      // TODO (V11): Remove this else branch once we remove v1 standalone spans and transactions
 
-    // If LCP standalone spans are enabled, don't record LCP as a measurement
-    if (!options.recordLcpOnPageloadSpan) {
-      delete _measurements.lcp;
-    }
+      // If CLS standalone spans are enabled, don't record CLS as a measurement
+      if (!recordClsOnPageloadSpan) {
+        delete _measurements.cls;
+      }
 
-    Object.entries(_measurements).forEach(([measurementName, measurement]) => {
-      setMeasurement(measurementName, measurement.value, measurement.unit);
-    });
+      // If LCP standalone spans are enabled, don't record LCP as a measurement
+      if (!recordLcpOnPageloadSpan) {
+        delete _measurements.lcp;
+      }
+
+      Object.entries(_measurements).forEach(([measurementName, measurement]) => {
+        setMeasurement(measurementName, measurement.value, measurement.unit);
+      });
+
+      _setWebVitalAttributes(span, options);
+    }
 
     // Set timeOrigin which denotes the timestamp which to base the LCP/FCP/FP/TTFB measurements on
     span.setAttribute('performance.timeOrigin', timeOrigin);
@@ -438,8 +477,6 @@ export function addPerformanceEntries(span: Span, options: AddPerformanceEntries
     // This is user action is called "activation" and the time between navigation and activation is stored in
     // the `activationStart` attribute of the "navigation" PerformanceEntry.
     span.setAttribute('performance.activationStart', getActivationStart());
-
-    _setWebVitalAttributes(span, options);
   }
 
   _lcpEntry = undefined;
@@ -734,8 +771,9 @@ export function _addResourceSpans(
 
 /**
  * Capture the information of the user agent.
+ * TODO v11: Remove non-span-streaming attributes and measurements once we removed transactions
  */
-function _trackNavigator(span: Span): void {
+function _trackNavigator(span: Span, spanStreamingEnabled: boolean | undefined): void {
   const navigator = WINDOW.navigator as null | (Navigator & NavigatorNetworkInformation & NavigatorDeviceMemory);
   if (!navigator) {
     return;
@@ -745,24 +783,37 @@ function _trackNavigator(span: Span): void {
   const connection = navigator.connection;
   if (connection) {
     if (connection.effectiveType) {
-      span.setAttribute('effectiveConnectionType', connection.effectiveType);
+      span.setAttribute(
+        spanStreamingEnabled ? 'network.connection.effective_type' : 'effectiveConnectionType',
+        connection.effectiveType,
+      );
     }
 
     if (connection.type) {
-      span.setAttribute('connectionType', connection.type);
+      span.setAttribute(spanStreamingEnabled ? 'network.connection.type' : 'connectionType', connection.type);
     }
 
     if (isMeasurementValue(connection.rtt)) {
       _measurements['connection.rtt'] = { value: connection.rtt, unit: 'millisecond' };
+      if (spanStreamingEnabled) {
+        span.setAttribute('network.connection.rtt', connection.rtt);
+      }
     }
   }
 
   if (isMeasurementValue(navigator.deviceMemory)) {
-    span.setAttribute('deviceMemory', `${navigator.deviceMemory} GB`);
+    if (spanStreamingEnabled) {
+      span.setAttribute('device.memory.estimated_capacity', navigator.deviceMemory);
+    } else {
+      span.setAttribute('deviceMemory', `${navigator.deviceMemory} GB`);
+    }
   }
 
   if (isMeasurementValue(navigator.hardwareConcurrency)) {
-    span.setAttribute('hardwareConcurrency', String(navigator.hardwareConcurrency));
+    span.setAttribute(
+      spanStreamingEnabled ? 'device.processor_count' : 'hardwareConcurrency',
+      String(navigator.hardwareConcurrency),
+    );
   }
 }
 

packages/browser-utils/src/metrics/webVitalSpans.ts

@@ -22,13 +22,13 @@ import { addClsInstrumentationHandler, addInpInstrumentationHandler, addLcpInstr
 import type { WebVitalReportEvent } from './utils';
 import { getBrowserPerformanceAPI, listenForWebVitalReportEvents, msToSec, supportsWebVital } from './utils';
 import type { PerformanceEventTiming } from './instrument';
+
 interface WebVitalSpanOptions {
   name: string;
   op: string;
   origin: string;
   metricName: 'lcp' | 'cls' | 'inp';
   value: number;
-  unit: string;
   attributes?: SpanAttributes;
   parentSpan?: Span;
   reportEvent?: WebVitalReportEvent;
@@ -147,7 +147,6 @@ export function _sendLcpSpan(
     origin: 'auto.http.browser.lcp',
     metricName: 'lcp',
     value: lcpValue,
-    unit: 'millisecond',
     attributes,
     parentSpan: pageloadSpan,
     reportEvent,
@@ -210,7 +209,6 @@ export function _sendClsSpan(
     origin: 'auto.http.browser.cls',
     metricName: 'cls',
     value: clsValue,
-    unit: '',
     attributes,
     parentSpan: pageloadSpan,
     reportEvent,
@@ -279,7 +277,6 @@ export function _sendInpSpan(inpValue: number, entry: PerformanceEventTiming): v
     origin: 'auto.http.browser.inp',
     metricName: 'inp',
     value: inpValue,
-    unit: 'millisecond',
     attributes: {
       [SEMANTIC_ATTRIBUTE_EXCLUSIVE_TIME]: entry.duration,
       'sentry.transaction': routeName,