core(cumulative-layout-shift): experiment with new shared trace engine

core/computed/metrics/cumulative-layout-shift.js

@@ -7,8 +7,10 @@
 import {makeComputedArtifact} from '../computed-artifact.js';
 import {ProcessedTrace} from '../processed-trace.js';
 import * as RectHelpers from '../../lib/rect-helpers.js';
+import * as TraceEngine from '../../lib/trace-engine.js';
+import {Sentry} from '../../lib/sentry.js';
 
-/** @typedef {{ts: number, isMainFrame: boolean, weightedScore: number, impactedNodes?: LH.Artifacts.TraceImpactedNode[]}} LayoutShiftEvent */
+/** @typedef {{ts: number, isMainFrame: boolean, weightedScore: number, impactedNodes?: LH.Artifacts.TraceImpactedNode[], event: LH.TraceEvent}} LayoutShiftEvent */
 
 const RECENT_INPUT_WINDOW = 500;
 
@@ -67,6 +69,7 @@
         isMainFrame: event.args.data.is_main_frame,
         weightedScore: event.args.data.weighted_score_delta,
         impactedNodes: event.args.data.impacted_nodes,
+        event,
       });
     }
 
@@ -145,6 +148,25 @@
     return maxScore;
   }
 
+  /**
+   * @param {LayoutShiftEvent[]} allFrameShiftEvents
+   * @param {LayoutShiftEvent[]} mainFrameShiftEvents
+   */
+  static async computeWithSharedTraceEngine(allFrameShiftEvents, mainFrameShiftEvents) {
+    /** @param {LH.TraceEvent[]} events */
+    const run = async (events) => {
+      const processor = new TraceEngine.TraceProcessor({
+        LayoutShifts: TraceEngine.TraceHandlers.LayoutShifts,
+        Screenshots: TraceEngine.TraceHandlers.Screenshots,
+      });
+      await processor.parse(events);
+      return processor.data.LayoutShifts.sessionMaxScore;
+    };
+    const cumulativeLayoutShift = await run(allFrameShiftEvents.map(e => e.event));
+    const cumulativeLayoutShiftMainFrame = await run(mainFrameShiftEvents.map(e => e.event));
+    return {cumulativeLayoutShift, cumulativeLayoutShiftMainFrame};
+  }
+
   /**
    * @param {LH.Trace} trace
    * @param {LH.Artifacts.ComputedContext} context
@@ -157,10 +179,52 @@
         CumulativeLayoutShift.getLayoutShiftEvents(processedTrace);
     const impactByNodeId = CumulativeLayoutShift.getImpactByNodeId(allFrameShiftEvents);
     const mainFrameShiftEvents = allFrameShiftEvents.filter(e => e.isMainFrame);
+    const cumulativeLayoutShift = CumulativeLayoutShift.calculate(allFrameShiftEvents);
+    const cumulativeLayoutShiftMainFrame = CumulativeLayoutShift.calculate(mainFrameShiftEvents);
+
+    // Run with the new trace engine, and only throw an error if we are running our unit tests.
+    // Otherwise, simply report any differences or errors to Sentry.
+    // TODO: TraceEngine always drops `had_recent_input` events, but Lighthouse is more lenient.
+    //       See comment in `getLayoutShiftEvents`. We need to upstream this.
+    let tryNewTraceEngine = true;
+    if (allFrameShiftEvents.some(e => e.event.args.data?.had_recent_input)) {
+      tryNewTraceEngine = false;
+    }
+    if (tryNewTraceEngine) {
+      try {
+        const newEngineResult =
+          await this.computeWithSharedTraceEngine(allFrameShiftEvents, mainFrameShiftEvents);
+        const differ =
+          newEngineResult.cumulativeLayoutShift !== cumulativeLayoutShift ||
+          newEngineResult.cumulativeLayoutShiftMainFrame !== cumulativeLayoutShiftMainFrame;
+        if (differ) {
+          const expected = JSON.stringify({cumulativeLayoutShift, cumulativeLayoutShiftMainFrame});
+          const got = JSON.stringify(newEngineResult);
+          throw new Error(`new trace engine differed. expected: ${expected}, got: ${got}`);
+        }
+      } catch (err) {
+        console.error(err);
+
+        const error = new Error('Error when using new trace engine', {cause: err});
+        // @ts-expect-error Check for running from tests.
+        if (global.expect) {
+          throw error;
+        } else {
+          Sentry.captureException(error, {
+            tags: {computed: 'new-trace-engine'},
+            level: 'error',
+            extra: {
+              // Not sure if Sentry handles `cause`, so just in case add the info in a second place.
+              errorMsg: err.toString(),
+            },
+          });
+        }
+      }
+    }
 
     return {
-      cumulativeLayoutShift: CumulativeLayoutShift.calculate(allFrameShiftEvents),
-      cumulativeLayoutShiftMainFrame: CumulativeLayoutShift.calculate(mainFrameShiftEvents),
+      cumulativeLayoutShift,
+      cumulativeLayoutShiftMainFrame,
       impactByNodeId,
     };
   }

core/lib/polyfill-dom-rect.js

@@ -0,0 +1,111 @@
+// @ts-nocheck
+/* eslint-disable */
+
+function polyfillDOMRect() {
+  // devtools assumes clientside :(
+
+  // Everything else in here is the DOMRect polyfill
+  // https://raw.githubusercontent.com/JakeChampion/polyfill-library/master/polyfills/DOMRect/polyfill.js
+
+  (function (global) {
+    function number(v) {
+      return v === undefined ? 0 : Number(v);
+    }
+
+    function different(u, v) {
+      return u !== v && !(isNaN(u) && isNaN(v));
+    }
+
+    function DOMRect(xArg, yArg, wArg, hArg) {
+      let x, y, width, height, left, right, top, bottom;
+
+      x = number(xArg);
+      y = number(yArg);
+      width = number(wArg);
+      height = number(hArg);
+
+      Object.defineProperties(this, {
+        x: {
+          get: function () { return x; },
+          set: function (newX) {
+            if (different(x, newX)) {
+              x = newX;
+              left = right = undefined;
+            }
+          },
+          enumerable: true
+        },
+        y: {
+          get: function () { return y; },
+          set: function (newY) {
+            if (different(y, newY)) {
+              y = newY;
+              top = bottom = undefined;
+            }
+          },
+          enumerable: true
+        },
+        width: {
+          get: function () { return width; },
+          set: function (newWidth) {
+            if (different(width, newWidth)) {
+              width = newWidth;
+              left = right = undefined;
+            }
+          },
+          enumerable: true
+        },
+        height: {
+          get: function () { return height; },
+          set: function (newHeight) {
+            if (different(height, newHeight)) {
+              height = newHeight;
+              top = bottom = undefined;
+            }
+          },
+          enumerable: true
+        },
+        left: {
+          get: function () {
+            if (left === undefined) {
+              left = x + Math.min(0, width);
+            }
+            return left;
+          },
+          enumerable: true
+        },
+        right: {
+          get: function () {
+            if (right === undefined) {
+              right = x + Math.max(0, width);
+            }
+            return right;
+          },
+          enumerable: true
+        },
+        top: {
+          get: function () {
+            if (top === undefined) {
+              top = y + Math.min(0, height);
+            }
+            return top;
+          },
+          enumerable: true
+        },
+        bottom: {
+          get: function () {
+            if (bottom === undefined) {
+              bottom = y + Math.max(0, height);
+            }
+            return bottom;
+          },
+          enumerable: true
+        }
+      });
+    }
+
+    globalThis.DOMRect = DOMRect;
+  })(globalThis);
+}
+
+export {polyfillDOMRect};

core/lib/trace-engine.js

@@ -0,0 +1,16 @@
+// @ts-expect-error missing types
+import * as TraceEngine from '@paulirish/trace_engine';
+
+import {polyfillDOMRect} from './polyfill-dom-rect.js';
+
+polyfillDOMRect();
+
+const TraceProcessor = TraceEngine.Processor.TraceProcessor;
+const TraceHandlers = TraceEngine.Handlers.ModelHandlers;
+const RootCauses = TraceEngine.RootCauses.RootCauses.RootCauses;
+
+export {
+  TraceProcessor,
+  TraceHandlers,
+  RootCauses,
+};

package.json

@@ -180,6 +180,7 @@
     "webtreemap-cdt": "^3.2.1"
   },
   "dependencies": {
+    "@paulirish/trace_engine": "^0.0.7",
     "@sentry/node": "^6.17.4",
     "axe-core": "^4.8.1",
     "chrome-launcher": "^1.1.0",

yarn.lock

@@ -1075,6 +1075,11 @@
     "@nodelib/fs.scandir" "2.1.3"
     fastq "^1.6.0"
 
+"@paulirish/trace_engine@^0.0.7":
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/@paulirish/trace_engine/-/trace_engine-0.0.7.tgz#c9494729f39a1c742325726474532aabfdee6f1b"
+  integrity sha512-TC639y9YlejyQcTG6LqJ3GJGuFfV9IJTBRsxyl+bGqxkfzyqJ+LG00fOht2FgnfwkCHImlIFBg4HDrX+2LHPHQ==
+
 "@protobufjs/aspromise@^1.1.1", "@protobufjs/aspromise@^1.1.2":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@protobufjs/aspromise/-/aspromise-1.1.2.tgz#9b8b0cc663d669a7d8f6f5d0893a14d348f30fbf"