feat(tracing): Upgrade to web-vitals 2.1.0

Author: AbhiPrasad

packages/tracing/src/browser/metrics.ts

@@ -9,7 +9,7 @@ import { msToSec } from '../utils';
 import { getCLS, LayoutShift } from './web-vitals/getCLS';
 import { getFID } from './web-vitals/getFID';
 import { getLCP, LargestContentfulPaint } from './web-vitals/getLCP';
-import { getFirstHidden } from './web-vitals/lib/getFirstHidden';
+import { getVisibilityWatcher } from './web-vitals/lib/getVisibilityWatcher';
 import { NavigatorDeviceMemory, NavigatorNetworkInformation } from './web-vitals/types';
 
 const global = getGlobalObject<Window>();
@@ -92,9 +92,9 @@ export class MetricsInstrumentation {
 
             // capture web vitals
 
-            const firstHidden = getFirstHidden();
+            const firstHidden = getVisibilityWatcher();
             // Only report if the page wasn't hidden prior to the web vital.
-            const shouldRecord = entry.startTime < firstHidden.timeStamp;
+            const shouldRecord = entry.startTime < firstHidden.firstHiddenTime;
 
             if (entry.name === 'first-paint' && shouldRecord) {
               logger.log('[Measurements] Adding FP');
@@ -243,13 +243,11 @@ export class MetricsInstrumentation {
    */
   private _trackNavigator(transaction: Transaction): void {
     const navigator = global.navigator as null | (Navigator & NavigatorNetworkInformation & NavigatorDeviceMemory);
-
     if (!navigator) {
       return;
     }
 
     // track network connectivity
-
     const connection = navigator.connection;
     if (connection) {
       if (connection.effectiveType) {

packages/tracing/src/browser/web-vitals/README.md

@@ -2,15 +2,31 @@
 
 > A modular library for measuring the [Web Vitals](https://web.dev/vitals/) metrics on real users.
 
-This was vendored from: https://github.com/GoogleChrome/web-vitals
+This was vendored from: https://github.com/GoogleChrome/web-vitals: v2.1.0
 
-The commit SHA used is: [56c736b7c4e80f295bc8a98017671c95231fa225](https://github.com/GoogleChrome/web-vitals/tree/56c736b7c4e80f295bc8a98017671c95231fa225)
+The commit SHA used is: [3f3338d994f182172d5b97b22a0fcce0c2846908](https://github.com/GoogleChrome/web-vitals/tree/3f3338d994f182172d5b97b22a0fcce0c2846908)
 
 Current vendored web vitals are:
 
 - LCP (Largest Contentful Paint)
 - FID (First Input Delay)
+- CLS (Cumulative Layout Shift)
 
-# License
+## License
 
 [Apache 2.0](https://github.com/GoogleChrome/web-vitals/blob/master/LICENSE)
+
+ ## Notable differences from `web-vitals` library
+
+ TODO(abhi): Fill this out
+
+## CHANGELOG
+
+https://github.com/getsentry/sentry-javascript/pull/3515
+- Remove support for Time to First Byte (TTFB)
+
+https://github.com/getsentry/sentry-javascript/pull/2964
+- Added support for Cumulative Layout Shift (CLS) and Time to First Byte (TTFB)
+
+https://github.com/getsentry/sentry-javascript/pull/2909
+- Added support for FID (First Input Delay) and LCP (Largest Contentful Paint)

packages/tracing/src/browser/web-vitals/getCLS.ts

@@ -14,9 +14,11 @@
  * limitations under the License.
  */
 
+import { getFCP } from './getFCP';
 import { bindReporter } from './lib/bindReporter';
 import { initMetric } from './lib/initMetric';
 import { observe, PerformanceEntryHandler } from './lib/observe';
+import { onBFCacheRestore } from './lib/onBFCacheRestore';
 import { onHidden } from './lib/onHidden';
 import { ReportHandler } from './types';
 
@@ -34,31 +36,76 @@ export interface LayoutShiftAttribution {
   currentRect: DOMRectReadOnly;
 }
 
-export const getCLS = (onReport: ReportHandler, reportAllChanges = false): void => {
-  const metric = initMetric('CLS', 0);
+let isMonitoringFCP = false;
+let fcpValue = -1;
 
+export const getCLS = (onReport: ReportHandler, reportAllChanges?: boolean): void => {
+  // Start monitoring FCP so we can only report CLS if FCP is also reported.
+  // Note: this is done to match the current behavior of CrUX.
+  if (!isMonitoringFCP) {
+    getFCP(metric => {
+      fcpValue = metric.value;
+    });
+    isMonitoringFCP = true;
+  }
+
+  const onReportWrapped: ReportHandler = arg => {
+    if (fcpValue > -1) {
+      onReport(arg);
+    }
+  };
+
+  let metric = initMetric('CLS', 0);
   let report: ReturnType<typeof bindReporter>;
 
+  let sessionValue = 0;
+  let sessionEntries: PerformanceEntry[] = [];
+
   const entryHandler = (entry: LayoutShift): void => {
     // Only count layout shifts without recent user input.
     if (!entry.hadRecentInput) {
-      (metric.value as number) += entry.value;
-      metric.entries.push(entry);
-      report();
+      const firstSessionEntry = sessionEntries[0];
+      const lastSessionEntry = sessionEntries[sessionEntries.length - 1];
+
+      // If the entry occurred less than 1 second after the previous entry and
+      // less than 5 seconds after the first entry in the session, include the
+      // entry in the current session. Otherwise, start a new session.
+      if (
+        sessionValue &&
+        entry.startTime - lastSessionEntry.startTime < 1000 &&
+        entry.startTime - firstSessionEntry.startTime < 5000
+      ) {
+        sessionValue += entry.value;
+        sessionEntries.push(entry);
+      } else {
+        sessionValue = entry.value;
+        sessionEntries = [entry];
+      }
+
+      // If the current session value is larger than the current CLS value,
+      // update CLS and the entries contributing to it.
+      if (sessionValue > metric.value) {
+        metric.value = sessionValue;
+        metric.entries = sessionEntries;
+        report();
+      }
     }
   };
 
   const po = observe('layout-shift', entryHandler as PerformanceEntryHandler);
   if (po) {
-    report = bindReporter(onReport, metric, po, reportAllChanges);
+    report = bindReporter(onReportWrapped, metric, reportAllChanges);
 
-    onHidden(({ isUnloading }) => {
+    onHidden(() => {
       po.takeRecords().map(entryHandler as PerformanceEntryHandler);
+      report(true);
+    });
 
-      if (isUnloading) {
-        metric.isFinal = true;
-      }
-      report();
+    onBFCacheRestore(() => {
+      sessionValue = 0;
+      fcpValue = -1;
+      metric = initMetric('CLS', 0);
+      report = bindReporter(onReportWrapped, metric, reportAllChanges);
     });
   }
 };

packages/tracing/src/browser/web-vitals/getFCP.ts

@@ -0,0 +1,70 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { bindReporter } from './lib/bindReporter';
+import { getVisibilityWatcher } from './lib/getVisibilityWatcher';
+import { initMetric } from './lib/initMetric';
+import { observe } from './lib/observe';
+import { onBFCacheRestore } from './lib/onBFCacheRestore';
+import { ReportHandler } from './types';
+
+export const getFCP = (onReport: ReportHandler, reportAllChanges?: boolean): void => {
+  const visibilityWatcher = getVisibilityWatcher();
+  let metric = initMetric('FCP');
+  let report: ReturnType<typeof bindReporter>;
+
+  const entryHandler = (entry: PerformanceEntry): void => {
+    if (entry.name === 'first-contentful-paint') {
+      if (po) {
+        po.disconnect();
+      }
+
+      // Only report if the page wasn't hidden prior to the first paint.
+      if (entry.startTime < visibilityWatcher.firstHiddenTime) {
+        metric.value = entry.startTime;
+        metric.entries.push(entry);
+        report(true);
+      }
+    }
+  };
+
+  // TODO(philipwalton): remove the use of `fcpEntry` once this bug is fixed.
+  // https://bugs.webkit.org/show_bug.cgi?id=225305
+  // Also, the check for `getEntriesByName` is needed to support Opera:
+  // https://github.com/GoogleChrome/web-vitals/issues/159
+  const fcpEntry = performance.getEntriesByName && performance.getEntriesByName('first-contentful-paint')[0];
+
+  const po = fcpEntry ? null : observe('paint', entryHandler);
+
+  if (fcpEntry || po) {
+    report = bindReporter(onReport, metric, reportAllChanges);
+
+    if (fcpEntry) {
+      entryHandler(fcpEntry);
+    }
+
+    onBFCacheRestore(event => {
+      metric = initMetric('FCP');
+      report = bindReporter(onReport, metric, reportAllChanges);
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          metric.value = performance.now() - event.timeStamp;
+          report(true);
+        });
+      });
+    });
+  }
+};

packages/tracing/src/browser/web-vitals/getFID.ts

@@ -15,75 +15,45 @@
  */
 
 import { bindReporter } from './lib/bindReporter';
-import { getFirstHidden } from './lib/getFirstHidden';
+import { getVisibilityWatcher } from './lib/getVisibilityWatcher';
 import { initMetric } from './lib/initMetric';
 import { observe, PerformanceEntryHandler } from './lib/observe';
+import { onBFCacheRestore } from './lib/onBFCacheRestore';
 import { onHidden } from './lib/onHidden';
-import { ReportHandler } from './types';
+import { firstInputPolyfill, resetFirstInputPolyfill } from './lib/polyfills/firstInputPolyfill';
+import { FirstInputPolyfillCallback, PerformanceEventTiming, ReportHandler } from './types';
 
-interface FIDPolyfillCallback {
-  (value: number, event: Event): void;
-}
-
-interface FIDPolyfill {
-  onFirstInputDelay: (onReport: FIDPolyfillCallback) => void;
-}
-
-declare global {
-  interface Window {
-    perfMetrics: FIDPolyfill;
-  }
-}
-
-// https://wicg.github.io/event-timing/#sec-performance-event-timing
-interface PerformanceEventTiming extends PerformanceEntry {
-  processingStart: DOMHighResTimeStamp;
-  cancelable?: boolean;
-  target?: Element;
-}
-
-export const getFID = (onReport: ReportHandler): void => {
-  const metric = initMetric('FID');
-  const firstHidden = getFirstHidden();
+export const getFID = (onReport: ReportHandler, reportAllChanges?: boolean): void => {
+  const visibilityWatcher = getVisibilityWatcher();
+  let metric = initMetric('FID');
+  let report: ReturnType<typeof bindReporter>;
 
   const entryHandler = (entry: PerformanceEventTiming): void => {
     // Only report if the page wasn't hidden prior to the first input.
-    if (entry.startTime < firstHidden.timeStamp) {
+    if (entry.startTime < visibilityWatcher.firstHiddenTime) {
       metric.value = entry.processingStart - entry.startTime;
       metric.entries.push(entry);
-      metric.isFinal = true;
-      report();
+      report(true);
     }
   };
 
   const po = observe('first-input', entryHandler as PerformanceEntryHandler);
-  const report = bindReporter(onReport, metric, po);
+  report = bindReporter(onReport, metric, reportAllChanges);
 
   if (po) {
     onHidden(() => {
       po.takeRecords().map(entryHandler as PerformanceEntryHandler);
       po.disconnect();
     }, true);
-  } else {
-    if (window.perfMetrics && window.perfMetrics.onFirstInputDelay) {
-      window.perfMetrics.onFirstInputDelay((value: number, event: Event) => {
-        // Only report if the page wasn't hidden prior to the first input.
-        if (event.timeStamp < firstHidden.timeStamp) {
-          metric.value = value;
-          metric.isFinal = true;
-          metric.entries = [
-            {
-              entryType: 'first-input',
-              name: event.type,
-              target: event.target,
-              cancelable: event.cancelable,
-              startTime: event.timeStamp,
-              processingStart: event.timeStamp + value,
-            } as PerformanceEventTiming,
-          ];
-          report();
-        }
-      });
-    }
+  }
+
+  // Only monitor bfcache restores if the browser supports FID natively.
+  if (po) {
+    onBFCacheRestore(() => {
+      metric = initMetric('FID');
+      report = bindReporter(onReport, metric, reportAllChanges);
+      resetFirstInputPolyfill();
+      firstInputPolyfill(entryHandler as FirstInputPolyfillCallback);
+    });
   }
 };