lighthouse 11.5.0 → 11.6.0

package/core/audits/layout-shifts.js

@@ -69,13 +69,16 @@ class LayoutShifts extends Audit {
 
     /** @type {Item[]} */
     const items = [];
-    const layoutShiftEvents = clusters.flatMap(c => c.events);
+    const layoutShiftEvents =
+      /** @type {import('../lib/trace-engine.js').SaneSyntheticLayoutShift[]} */(
+        clusters.flatMap(c => c.events)
+      );
     const topLayoutShiftEvents = layoutShiftEvents
       .sort((a, b) => b.args.data.weighted_score_delta - a.args.data.weighted_score_delta)
       .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);
       const biggestImpactElement = traceElements.find(t => t.nodeId === biggestImpactNodeId);
 
       // Turn root causes into sub-items.

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

@@ -159,7 +159,13 @@ class CumulativeLayoutShift {
         LayoutShifts: TraceEngine.TraceHandlers.LayoutShifts,
         Screenshots: TraceEngine.TraceHandlers.Screenshots,
       });
-      await processor.parse(events);
+      // eslint-disable-next-line max-len
+      await processor.parse(/** @type {import('@paulirish/trace_engine').Types.TraceEvents.TraceEventData[]} */ (
+        events
+      ));
+      if (!processor.data) {
+        throw new Error('null trace engine result');
+      }
       return processor.data.LayoutShifts.sessionMaxScore;
     };
     const cumulativeLayoutShift = await run(allFrameShiftEvents.map(e => e.event));

package/core/computed/trace-engine-result.d.ts

@@ -4,14 +4,7 @@ declare const TraceEngineResultComputed: typeof TraceEngineResult & {
         trace: LH.Trace;
     }, context: import("../../types/utility-types.js").default.ImmutableObject<{
         computedCache: Map<string, import("../lib/arbitrary-equality-map.js").ArbitraryEqualityMap>;
-    }>) => Promise<{
-        LayoutShifts: {
-            clusters: {
-                events: import("../../types/trace-engine.js").LayoutShiftTraceEvent[];
-            }[];
-            sessionMaxScore: number;
-        };
-    }>;
+    }>) => Promise<Readonly<import("@paulirish/trace_engine/models/trace/handlers/types.js").EnabledHandlerDataWithMeta<typeof import("@paulirish/trace_engine/models/trace/handlers/ModelHandlers.js")>>>;
 };
 /**
  * @fileoverview Processes trace with the shared trace engine.
@@ -20,14 +13,7 @@ declare class TraceEngineResult {
     /**
      * @param {LH.TraceEvent[]} traceEvents
      */
-    static runTraceEngine(traceEvents: LH.TraceEvent[]): Promise<{
-        LayoutShifts: {
-            clusters: {
-                events: import("../../types/trace-engine.js").LayoutShiftTraceEvent[];
-            }[];
-            sessionMaxScore: number;
-        };
-    }>;
+    static runTraceEngine(traceEvents: LH.TraceEvent[]): Promise<Readonly<import("@paulirish/trace_engine/models/trace/handlers/types.js").EnabledHandlerDataWithMeta<typeof import("@paulirish/trace_engine/models/trace/handlers/ModelHandlers.js")>>>;
     /**
      * @param {{trace: LH.Trace}} data
      * @param {LH.Artifacts.ComputedContext} context

package/core/computed/trace-engine-result.js

@@ -26,8 +26,13 @@ class TraceEngineResult {
       Samples: TraceEngine.TraceHandlers.Samples,
       Screenshots: TraceEngine.TraceHandlers.Screenshots,
     });
-    await engine.parse(traceEvents);
-    return engine.data;
+    // eslint-disable-next-line max-len
+    await engine.parse(/** @type {import('@paulirish/trace_engine').Types.TraceEvents.TraceEventData[]} */ (
+      traceEvents
+    ));
+    // TODO: use TraceEngine.TraceProcessor.createWithAllHandlers above.
+    return /** @type {import('@paulirish/trace_engine').Handlers.Types.TraceParseData} */(
+      engine.data);
   }
 
   /**
@@ -61,7 +66,11 @@ class TraceEngineResult {
       }
     }
 
-    return TraceEngineResult.runTraceEngine(traceEvents);
+    const result = await TraceEngineResult.runTraceEngine(traceEvents);
+    if (!result) {
+      throw new Error('null trace engine result');
+    }
+    return result;
   }
 }
 

package/core/gather/driver/wait-for-condition.js

@@ -446,6 +446,21 @@ async function waitForFullyLoaded(session, networkMonitor, options) {
   // CPU listener. Resolves when the CPU has been idle for cpuQuietThresholdMs after network idle.
   let resolveOnCPUIdle = waitForNothing();
 
+  if (log.isVerbose()) {
+    resolveOnFcp.promise.then(() => {
+      log.verbose('waitFor', 'resolveOnFcp fired');
+    });
+    resolveOnLoadEvent.promise.then(() => {
+      log.verbose('waitFor', 'resolveOnLoadEvent fired');
+    });
+    resolveOnNetworkIdle.promise.then(() => {
+      log.verbose('waitFor', 'resolveOnNetworkIdle fired');
+    });
+    resolveOnCriticalNetworkIdle.promise.then(() => {
+      log.verbose('waitFor', 'resolveOnCriticalNetworkIdle fired');
+    });
+  }
+
   // Wait for all initial load promises. Resolves on cleanup function the clears load
   // timeout timer.
   /** @type {Promise<() => Promise<{timedOut: boolean}>>} */

package/core/gather/gatherers/root-causes.js

@@ -32,26 +32,33 @@ class RootCauses extends BaseGatherer {
     // nodeIds if the DOM domain was enabled before this gatherer, invoke it to be safe.
     await driver.defaultSession.sendCommand('DOM.getDocument', {depth: -1, pierce: true});
 
+    /** @type {import('@paulirish/trace_engine').RootCauses.RootCauses.RootCauseProtocolInterface} */
     const protocolInterface = {
       /** @param {string} url */
       // eslint-disable-next-line no-unused-vars
       getInitiatorForRequest(url) {
         return null;
       },
-      /** @param {number[]} backendNodeIds */
+      /** @param {import('@paulirish/trace_engine/generated/protocol.js').DOM.BackendNodeId[]} backendNodeIds */
       async pushNodesByBackendIdsToFrontend(backendNodeIds) {
         const response = await driver.defaultSession.sendCommand(
           'DOM.pushNodesByBackendIdsToFrontend', {backendNodeIds});
-        return response.nodeIds;
+        const nodeIds =
+          /** @type {import('@paulirish/trace_engine/generated/protocol.js').DOM.NodeId[]} */(
+            response.nodeIds);
+        return nodeIds;
       },
-      /** @param {number} nodeId */
+      /** @param {import('@paulirish/trace_engine/generated/protocol.js').DOM.NodeId} nodeId */
       async getNode(nodeId) {
         try {
           const response = await driver.defaultSession.sendCommand('DOM.describeNode', {nodeId});
           // This always zero, so let's fix it here.
           // https://bugs.chromium.org/p/chromium/issues/detail?id=1515175
           response.node.nodeId = nodeId;
-          return response.node;
+          const node =
+            /** @type {import('@paulirish/trace_engine/generated/protocol.js').DOM.Node} */(
+              response.node);
+          return node;
         } catch (err) {
           if (err.message.includes('Could not find node with given id')) {
             // TODO: when injecting an iframe, the engine gets the node of that frame's document element.
@@ -64,7 +71,8 @@ class RootCauses extends BaseGatherer {
             // When this is fixed, remove this try/catch.
             // Note: this could be buggy by giving the wrong node detail if a node id meant for a non-main frame
             // happens to match one from the main frame ... which is pretty likely...
-            return null;
+            // TODO: fix trace engine type to allow returning null.
+            return /** @type {any} */(null);
           }
           throw err;
         }
@@ -79,17 +87,20 @@ class RootCauses extends BaseGatherer {
           return [];
         }
       },
-      /** @param {number} nodeId */
+      /** @param {import('@paulirish/trace_engine/generated/protocol.js').DOM.NodeId} nodeId */
       async getMatchedStylesForNode(nodeId) {
         try {
           const response = await driver.defaultSession.sendCommand(
             'CSS.getMatchedStylesForNode', {nodeId});
-          return response;
-        } catch {
-          return [];
+          return {...response, getError() {}};
+        } catch (err) {
+          return /** @type {any} */({getError() {
+            return err.toString();
+          }});
         }
       },
       /** @param {string} url */
+      // @ts-expect-error not using, dont care about type error.
       // eslint-disable-next-line no-unused-vars
       async fontFaceForSource(url) {
         return null;
@@ -104,6 +115,8 @@ class RootCauses extends BaseGatherer {
     const layoutShiftEvents = traceEngineResult.LayoutShifts.clusters.flatMap(c => c.events);
     for (const event of layoutShiftEvents) {
       const r = await rootCausesEngine.layoutShifts.rootCausesForEvent(traceEngineResult, event);
+      if (!r) continue;
+
       for (const cause of r.fontChanges) {
         // TODO: why isn't trace engine unwrapping this promise ...
         cause.fontFace = await cause.fontFace;

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

@@ -117,15 +117,19 @@ class TraceElements extends BaseGatherer {
   static async getTopLayoutShifts(trace, traceEngineResult, rootCauses, context) {
     const {impactByNodeId} = await CumulativeLayoutShift.request(trace, context);
     const clusters = traceEngineResult.LayoutShifts.clusters ?? [];
-    const layoutShiftEvents = clusters.flatMap(c => c.events);
+    const layoutShiftEvents =
+      /** @type {import('../../lib/trace-engine.js').SaneSyntheticLayoutShift[]} */(
+        clusters.flatMap(c => c.events)
+      );
 
     return layoutShiftEvents
       .sort((a, b) => b.args.data.weighted_score_delta - a.args.data.weighted_score_delta)
       .slice(0, MAX_LAYOUT_SHIFTS)
       .flatMap(event => {
         const nodeIds = [];
+        const impactedNodes = event.args.data.impacted_nodes || [];
         const biggestImpactedNodeId =
-          this.getBiggestImpactNodeForShiftEvent(event.args.data.impacted_nodes, impactByNodeId);
+          this.getBiggestImpactNodeForShiftEvent(impactedNodes, impactByNodeId);
         if (biggestImpactedNodeId !== undefined) {
           nodeIds.push(biggestImpactedNodeId);
         }

package/core/gather/gatherers/trace.js

@@ -61,7 +61,8 @@ class Trace extends BaseGatherer {
 
       // Not used by Lighthouse (yet) but included for users that want JS samples when looking at
       // a trace collected by Lighthouse (e.g. "View Trace" workflow in DevTools)
-      'disabled-by-default-v8.cpu_profiler',
+      // TODO: Re-enable after investigating b/325659693
+      // 'disabled-by-default-v8.cpu_profiler',
     ];
   }
 

package/core/gather/runner-helpers.js

@@ -33,7 +33,10 @@ import {Sentry} from '../lib/sentry.js';
  * @param {Error} error
  */
 function createDependencyError(dependency, error) {
-  return new Error(`Dependency "${dependency.id}" failed with exception: ${error.message}`);
+  const err = new Error(`Dependency "${dependency.id}" failed with exception: ${error.message}`);
+  // @ts-expect-error - We already reported the original error to Sentry, don't do it again.
+  err.expected = true;
+  return err;
 }
 
 /** @return {ArtifactState} */

package/core/lib/trace-engine.d.ts

@@ -1,7 +1,11 @@
-/** @type {import('../../types/trace-engine.js').TraceProcessor & typeof import('../../types/trace-engine.js').TraceProcessor} */
-export const TraceProcessor: import('../../types/trace-engine.js').TraceProcessor & typeof import('../../types/trace-engine.js').TraceProcessor;
-/** @type {import('../../types/trace-engine.js').TraceHandlers} */
-export const TraceHandlers: any;
-/** @type {import('../../types/trace-engine.js').RootCauses & typeof import('../../types/trace-engine.js').RootCauses} */
-export const RootCauses: import('../../types/trace-engine.js').RootCauses & typeof import('../../types/trace-engine.js').RootCauses;
+export type SyntheticLayoutShift = import('@paulirish/trace_engine').Types.TraceEvents.SyntheticLayoutShift;
+export type SaneSyntheticLayoutShift = SyntheticLayoutShift & {
+    args: {
+        data: NonNullable<SyntheticLayoutShift['args']['data']>;
+    };
+};
+export const TraceProcessor: typeof TraceEngine.Processor.TraceProcessor;
+export const TraceHandlers: typeof TraceEngine.Handlers.ModelHandlers;
+export const RootCauses: typeof TraceEngine.RootCauses.RootCauses.RootCauses;
+import * as TraceEngine from '@paulirish/trace_engine';
 //# sourceMappingURL=trace-engine.d.ts.map

package/core/lib/trace-engine.js

@@ -1,15 +1,14 @@
-// @ts-expect-error missing types
 import * as TraceEngine from '@paulirish/trace_engine';
 
 import {polyfillDOMRect} from './polyfill-dom-rect.js';
 
+/** @typedef {import('@paulirish/trace_engine').Types.TraceEvents.SyntheticLayoutShift} SyntheticLayoutShift */
+/** @typedef {SyntheticLayoutShift & {args: {data: NonNullable<SyntheticLayoutShift['args']['data']>}}} SaneSyntheticLayoutShift */
+
 polyfillDOMRect();
 
-/** @type {import('../../types/trace-engine.js').TraceProcessor & typeof import('../../types/trace-engine.js').TraceProcessor} */
 const TraceProcessor = TraceEngine.Processor.TraceProcessor;
-/** @type {import('../../types/trace-engine.js').TraceHandlers} */
 const TraceHandlers = TraceEngine.Handlers.ModelHandlers;
-/** @type {import('../../types/trace-engine.js').RootCauses & typeof import('../../types/trace-engine.js').RootCauses} */
 const RootCauses = TraceEngine.RootCauses.RootCauses.RootCauses;
 
 export {