lighthouse 11.7.0-dev.20240404 → 11.7.0-dev.20240405

package/core/audits/layout-shifts.js

@@ -78,7 +78,7 @@ class LayoutShifts extends Audit {
       .slice(0, MAX_LAYOUT_SHIFTS);
     for (const event of topLayoutShiftEvents) {
       const biggestImpactNodeId = TraceElements.getBiggestImpactNodeForShiftEvent(
-        event.args.data.impacted_nodes || [], impactByNodeId);
+        event.args.data.impacted_nodes || [], impactByNodeId, event);
       const biggestImpactElement = traceElements.find(t => t.nodeId === biggestImpactNodeId);
 
       // Turn root causes into sub-items.

package/core/gather/gatherers/trace-elements.d.ts

@@ -25,9 +25,10 @@ declare class TraceElements extends BaseGatherer {
      *
      * @param {LH.Artifacts.TraceImpactedNode[]} impactedNodes
      * @param {Map<number, number>} impactByNodeId
+     * @param {import('../../lib/trace-engine.js').SaneSyntheticLayoutShift} event Only for debugging
      * @return {number|undefined}
      */
-    static getBiggestImpactNodeForShiftEvent(impactedNodes: LH.Artifacts.TraceImpactedNode[], impactByNodeId: Map<number, number>): number | undefined;
+    static getBiggestImpactNodeForShiftEvent(impactedNodes: LH.Artifacts.TraceImpactedNode[], impactByNodeId: Map<number, number>, event: import('../../lib/trace-engine.js').SaneSyntheticLayoutShift): number | undefined;
     /**
      * This function finds the top (up to 15) layout shifts on the page, and returns
      * the id of the largest impacted node of each shift, along with any related nodes

package/core/gather/gatherers/trace-elements.js

@@ -88,19 +88,49 @@ class TraceElements extends BaseGatherer {
    *
    * @param {LH.Artifacts.TraceImpactedNode[]} impactedNodes
    * @param {Map<number, number>} impactByNodeId
+   * @param {import('../../lib/trace-engine.js').SaneSyntheticLayoutShift} event Only for debugging
    * @return {number|undefined}
    */
-  static getBiggestImpactNodeForShiftEvent(impactedNodes, impactByNodeId) {
-    let biggestImpactNodeId;
-    let biggestImpactNodeScore = Number.NEGATIVE_INFINITY;
-    for (const node of impactedNodes) {
-      const impactScore = impactByNodeId.get(node.node_id);
-      if (impactScore !== undefined && impactScore > biggestImpactNodeScore) {
-        biggestImpactNodeId = node.node_id;
-        biggestImpactNodeScore = impactScore;
+  static getBiggestImpactNodeForShiftEvent(impactedNodes, impactByNodeId, event) {
+    try {
+      let biggestImpactNodeId;
+      let biggestImpactNodeScore = Number.NEGATIVE_INFINITY;
+      for (const node of impactedNodes) {
+        const impactScore = impactByNodeId.get(node.node_id);
+        if (impactScore !== undefined && impactScore > biggestImpactNodeScore) {
+          biggestImpactNodeId = node.node_id;
+          biggestImpactNodeScore = impactScore;
+        }
       }
+      return biggestImpactNodeId;
+    } catch (err) {
+      // See https://github.com/GoogleChrome/lighthouse/issues/15870
+      // `impactedNodes` should always be an array here, but it can randomly be something else for
+      // currently unknown reasons. This exception handling will help us identify what
+      // `impactedNodes` really is and also prevent the error from being fatal.
+
+      // It's possible `impactedNodes` is not JSON serializable, so let's add more supplemental
+      // fields just in case.
+      const impactedNodesType = typeof impactedNodes;
+      const impactedNodesClassName = impactedNodes?.constructor?.name;
+
+      let impactedNodesJson;
+      let eventJson;
+      try {
+        impactedNodesJson = JSON.parse(JSON.stringify(impactedNodes));
+        eventJson = JSON.parse(JSON.stringify(event));
+      } catch {}
+
+      Sentry.captureException(err, {
+        extra: {
+          impactedNodes: impactedNodesJson,
+          event: eventJson,
+          impactedNodesType,
+          impactedNodesClassName,
+        },
+      });
+      return;
     }
-    return biggestImpactNodeId;
   }
 
   /**
@@ -129,7 +159,7 @@ class TraceElements extends BaseGatherer {
         const nodeIds = [];
         const impactedNodes = event.args.data.impacted_nodes || [];
         const biggestImpactedNodeId =
-          this.getBiggestImpactNodeForShiftEvent(impactedNodes, impactByNodeId);
+          this.getBiggestImpactNodeForShiftEvent(impactedNodes, impactByNodeId, event);
         if (biggestImpactedNodeId !== undefined) {
           nodeIds.push(biggestImpactedNodeId);
         }

package/flow-report/assets/standalone-flow-template.html

@@ -0,0 +1,25 @@
+<!--
+@license
+Copyright 2021 Google LLC
+SPDX-License-Identifier: Apache-2.0
+-->
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
+  <link rel="icon" href='data:image/svg+xml;utf8,<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="m14 7 10-7 10 7v10h5v7h-5l5 24H9l5-24H9v-7h5V7Z" fill="%23F63"/><path d="M31.561 24H14l-1.689 8.105L31.561 24ZM18.983 48H9l1.022-4.907L35.723 32.27l1.663 7.98L18.983 48Z" fill="%23FFA385"/><path fill="%23FF3" d="M20.5 10h7v7h-7z"/></svg>'>
+  <title>Lighthouse Flow Report</title>
+  <style>/*%%LIGHTHOUSE_FLOW_CSS%%*/</style>
+  <style>body {margin: 0}</style>
+</head>
+<body>
+  <noscript>Lighthouse report requires JavaScript. Please enable.</noscript>
+
+  <main><!-- report populated here --></main>
+
+  <script>window.__LIGHTHOUSE_FLOW_JSON__ = %%LIGHTHOUSE_FLOW_JSON%%;</script>
+  <script>%%LIGHTHOUSE_FLOW_JAVASCRIPT%%</script>
+  <script>console.log('window.__LIGHTHOUSE_FLOW_JSON__', __LIGHTHOUSE_FLOW_JSON__);</script>
+</body>
+</html>