ref: Add updated CLS

Author: AbhiPrasad

packages/tracing/src/browser/metrics.ts

@@ -9,6 +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 { getUpdatedCLS } from './web-vitals/getUpdatedCLS';
 import { getVisibilityWatcher } from './web-vitals/lib/getVisibilityWatcher';
 import { NavigatorDeviceMemory, NavigatorNetworkInformation } from './web-vitals/types';
 
@@ -21,6 +22,7 @@ export class MetricsInstrumentation {
   private _performanceCursor: number = 0;
   private _lcpEntry: LargestContentfulPaint | undefined;
   private _clsEntry: LayoutShift | undefined;
+  private _updatedClsEntry: LayoutShift | undefined;
 
   public constructor() {
     if (!isNodeEnv() && global?.performance) {
@@ -221,13 +223,19 @@ export class MetricsInstrumentation {
         transaction.setTag(`cls.source.${index + 1}`, htmlTreeAsString(source.node)),
       );
     }
+
+    if (this._updatedClsEntry && this._updatedClsEntry.sources) {
+      logger.log('[Measurements] Adding Updated CLS Data');
+      this._updatedClsEntry.sources.map((source, index) =>
+        transaction.setTag(`updated-cls.source.${index + 1}`, htmlTreeAsString(source.node)),
+      );
+    }
   }
 
   /** Starts tracking the Cumulative Layout Shift on the current page. */
   private _trackCLS(): void {
     getCLS(metric => {
       const entry = metric.entries.pop();
-
       if (!entry) {
         return;
       }
@@ -236,6 +244,17 @@ export class MetricsInstrumentation {
       this._measurements['cls'] = { value: metric.value };
       this._clsEntry = entry as LayoutShift;
     });
+
+    getUpdatedCLS(metric => {
+      const entry = metric.entries.pop();
+      if (!entry) {
+        return;
+      }
+
+      logger.log('[Measurements] Adding Updated CLS');
+      this._measurements['updated-cls'] = { value: metric.value };
+      this._updatedClsEntry = entry as LayoutShift;
+    });
   }
 
   /**

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

@@ -18,6 +18,9 @@ Current vendored web vitals are:
 
 ## CHANGELOG
 
+https://github.com/getsentry/sentry-javascript/pull/3781
+- Bumped from Web Vitals v0.2.4 to v2.1.0
+
 https://github.com/getsentry/sentry-javascript/pull/3515
 - Remove support for Time to First Byte (TTFB)
 

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

@@ -38,38 +38,12 @@ export const getCLS = (onReport: ReportHandler, reportAllChanges?: boolean): voi
   const 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) {
-      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;
-        if (report) {
-          report();
-        }
+      (metric.value as number) += entry.value;
+      metric.entries.push(entry);
+      if (report) {
+        report();
       }
     }
   };

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

@@ -0,0 +1,86 @@
+/*
+ * 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 { initMetric } from './lib/initMetric';
+import { observe, PerformanceEntryHandler } from './lib/observe';
+import { onHidden } from './lib/onHidden';
+import { ReportHandler } from './types';
+
+// https://wicg.github.io/layout-instability/#sec-layout-shift
+export interface LayoutShift extends PerformanceEntry {
+  value: number;
+  hadRecentInput: boolean;
+  sources: Array<LayoutShiftAttribution>;
+  toJSON(): Record<string, unknown>;
+}
+
+export interface LayoutShiftAttribution {
+  node?: Node;
+  previousRect: DOMRectReadOnly;
+  currentRect: DOMRectReadOnly;
+}
+
+export const getUpdatedCLS = (onReport: ReportHandler, reportAllChanges?: boolean): void => {
+  const metric = initMetric('UpdatedCLS', 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) {
+      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;
+        if (report) {
+          report();
+        }
+      }
+    }
+  };
+
+  const po = observe('layout-shift', entryHandler as PerformanceEntryHandler);
+  if (po) {
+    report = bindReporter(onReport, metric, reportAllChanges);
+
+    onHidden(() => {
+      po.takeRecords().map(entryHandler as PerformanceEntryHandler);
+      report(true);
+    });
+  }
+};

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

@@ -16,7 +16,7 @@
 
 export interface Metric {
   // The name of the metric (in acronym form).
-  name: 'CLS' | 'FCP' | 'FID' | 'LCP' | 'TTFB';
+  name: 'CLS' | 'FCP' | 'FID' | 'LCP' | 'TTFB' | 'UpdatedCLS';
 
   // The current value of the metric.
   value: number;