lighthouse 11.7.0-dev.20240415 → 11.7.0-dev.20240417

package/core/gather/gatherers/css-usage.d.ts

@@ -1,26 +1,5 @@
 export default CSSUsage;
 declare class CSSUsage extends BaseGatherer {
-    /** @type {LH.Gatherer.ProtocolSession|undefined} */
-    _session: LH.Gatherer.ProtocolSession | undefined;
-    /** @type {Map<string, Promise<LH.Artifacts.CSSStyleSheetInfo|Error>>} */
-    _sheetPromises: Map<string, Promise<LH.Artifacts.CSSStyleSheetInfo | Error>>;
-    /**
-     * Initialize as undefined so we can assert results are fetched.
-     * @type {LH.Crdp.CSS.RuleUsage[]|undefined}
-     */
-    _ruleUsage: LH.Crdp.CSS.RuleUsage[] | undefined;
-    /**
-     * @param {LH.Crdp.CSS.StyleSheetAddedEvent} event
-     */
-    _onStylesheetAdded(event: LH.Crdp.CSS.StyleSheetAddedEvent): void;
-    /**
-     * @param {LH.Gatherer.Context} context
-     */
-    startInstrumentation(context: LH.Gatherer.Context): Promise<void>;
-    /**
-     * @param {LH.Gatherer.Context} context
-     */
-    stopInstrumentation(context: LH.Gatherer.Context): Promise<void>;
     /**
      * @param {LH.Gatherer.Context} context
      * @return {Promise<LH.Artifacts['CSSUsage']>}

package/core/gather/gatherers/css-usage.js

@@ -8,145 +8,35 @@
  * @fileoverview Tracks unused CSS rules.
  */
 
-import log from 'lighthouse-logger';
-
 import BaseGatherer from '../base-gatherer.js';
-import {Sentry} from '../../lib/sentry.js';
 
 class CSSUsage extends BaseGatherer {
-  constructor() {
-    super();
-    /** @type {LH.Gatherer.ProtocolSession|undefined} */
-    this._session = undefined;
-    /** @type {Map<string, Promise<LH.Artifacts.CSSStyleSheetInfo|Error>>} */
-    this._sheetPromises = new Map();
-    /**
-     * Initialize as undefined so we can assert results are fetched.
-     * @type {LH.Crdp.CSS.RuleUsage[]|undefined}
-     */
-    this._ruleUsage = undefined;
-    this._onStylesheetAdded = this._onStylesheetAdded.bind(this);
-  }
-
   /** @type {LH.Gatherer.GathererMeta} */
   meta = {
-    supportedModes: ['snapshot', 'timespan', 'navigation'],
+    supportedModes: ['snapshot', 'navigation'],
   };
 
-  /**
-   * @param {LH.Crdp.CSS.StyleSheetAddedEvent} event
-   */
-  _onStylesheetAdded(event) {
-    if (!this._session) throw new Error('Session not initialized');
-    const styleSheetId = event.header.styleSheetId;
-    const sheetPromise = this._session.sendCommand('CSS.getStyleSheetText', {styleSheetId})
-      .then(content => ({
-        header: event.header,
-        content: content.text,
-      }))
-      .catch(/** @param {Error} err */ (err) => {
-        log.warn(
-          'CSSUsage',
-          `Error fetching content of stylesheet with URL "${event.header.sourceURL}"`
-        );
-        Sentry.captureException(err, {
-          tags: {
-            gatherer: 'CSSUsage',
-          },
-          extra: {
-            url: event.header.sourceURL,
-          },
-          level: 'error',
-        });
-        return err;
-      });
-    this._sheetPromises.set(styleSheetId, sheetPromise);
-  }
-
   /**
    * @param {LH.Gatherer.Context} context
+   * @return {Promise<LH.Artifacts['CSSUsage']>}
    */
-  async startInstrumentation(context) {
+  async getArtifact(context) {
     const session = context.driver.defaultSession;
-    this._session = session;
-
-    // Calling `CSS.enable` will emit events for stylesheets currently on the page.
-    // We want to ignore these events in navigation mode because they are not relevant to the
-    // navigation that is about to happen. Adding the event listener *after* calling `CSS.enable`
-    // ensures that the events for pre-existing stylesheets are ignored.
-    const isNavigation = context.gatherMode === 'navigation';
-    if (!isNavigation) {
-      session.on('CSS.styleSheetAdded', this._onStylesheetAdded);
-    }
+    const executionContext = context.driver.executionContext;
 
     await session.sendCommand('DOM.enable');
     await session.sendCommand('CSS.enable');
     await session.sendCommand('CSS.startRuleUsageTracking');
 
-    if (isNavigation) {
-      session.on('CSS.styleSheetAdded', this._onStylesheetAdded);
-    }
-  }
-
-
-  /**
-   * @param {LH.Gatherer.Context} context
-   */
-  async stopInstrumentation(context) {
-    const session = context.driver.defaultSession;
-    const coverageResponse = await session.sendCommand('CSS.stopRuleUsageTracking');
-    this._ruleUsage = coverageResponse.ruleUsage;
-    session.off('CSS.styleSheetAdded', this._onStylesheetAdded);
-
-    // Ensure we finish fetching all stylesheet contents before disabling the CSS domain
-    await Promise.all(this._sheetPromises.values());
+    // Force style to recompute.
+    // Doesn't appear to be necessary in newer versions of Chrome.
+    await executionContext.evaluateAsync('getComputedStyle(document.body)');
 
+    const {ruleUsage} = await session.sendCommand('CSS.stopRuleUsageTracking');
     await session.sendCommand('CSS.disable');
     await session.sendCommand('DOM.disable');
-  }
-
-  /**
-   * @param {LH.Gatherer.Context} context
-   * @return {Promise<LH.Artifacts['CSSUsage']>}
-   */
-  async getArtifact(context) {
-    const executionContext = context.driver.executionContext;
-
-    if (context.gatherMode === 'snapshot') {
-      await this.startInstrumentation(context);
-
-      // Force style to recompute.
-      // Doesn't appear to be necessary in newer versions of Chrome.
-      await executionContext.evaluateAsync('getComputedStyle(document.body)');
-
-      await this.stopInstrumentation(context);
-    }
-
-    /** @type {Map<string, LH.Artifacts.CSSStyleSheetInfo>} */
-    const dedupedStylesheets = new Map();
-    const sheets = await Promise.all(this._sheetPromises.values());
-
-    for (const sheet of sheets) {
-      // Erroneous sheets will be reported via sentry and the log.
-      // We can ignore them here without throwing a fatal error.
-      if (sheet instanceof Error) {
-        continue;
-      }
-
-      // Exclude empty stylesheets.
-      if (sheet.header.length === 0) {
-        continue;
-      }
-
-      dedupedStylesheets.set(sheet.content, sheet);
-    }
-
-    if (!this._ruleUsage) throw new Error('Issue collecting rule usages');
 
-    return {
-      rules: this._ruleUsage,
-      stylesheets: Array.from(dedupedStylesheets.values()),
-    };
+    return ruleUsage;
   }
 }
 

package/core/gather/gatherers/stylesheets.d.ts

@@ -0,0 +1,26 @@
+export default Stylesheets;
+declare class Stylesheets extends BaseGatherer {
+    /** @type {LH.Gatherer.ProtocolSession|undefined} */
+    _session: LH.Gatherer.ProtocolSession | undefined;
+    /** @type {Map<string, Promise<LH.Artifacts.CSSStyleSheetInfo|null>>} */
+    _sheetPromises: Map<string, Promise<LH.Artifacts.CSSStyleSheetInfo | null>>;
+    /**
+     * @param {LH.Crdp.CSS.StyleSheetAddedEvent} event
+     */
+    _onStylesheetAdded(event: LH.Crdp.CSS.StyleSheetAddedEvent): void;
+    /**
+     * @param {LH.Gatherer.Context} context
+     */
+    startInstrumentation(context: LH.Gatherer.Context): Promise<void>;
+    /**
+     * @param {LH.Gatherer.Context} context
+     */
+    stopInstrumentation(context: LH.Gatherer.Context): Promise<void>;
+    /**
+     * @param {LH.Gatherer.Context} context
+     * @return {Promise<LH.Artifacts['Stylesheets']>}
+     */
+    getArtifact(context: LH.Gatherer.Context): Promise<LH.Artifacts['Stylesheets']>;
+}
+import BaseGatherer from '../base-gatherer.js';
+//# sourceMappingURL=stylesheets.d.ts.map

package/core/gather/gatherers/stylesheets.js

@@ -0,0 +1,138 @@
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * @fileoverview Collects all stylesheets and their contents.
+ */
+
+import log from 'lighthouse-logger';
+
+import BaseGatherer from '../base-gatherer.js';
+import {Sentry} from '../../lib/sentry.js';
+
+class Stylesheets extends BaseGatherer {
+  constructor() {
+    super();
+    /** @type {LH.Gatherer.ProtocolSession|undefined} */
+    this._session = undefined;
+    /** @type {Map<string, Promise<LH.Artifacts.CSSStyleSheetInfo|null>>} */
+    this._sheetPromises = new Map();
+    this._onStylesheetAdded = this._onStylesheetAdded.bind(this);
+  }
+
+  /** @type {LH.Gatherer.GathererMeta} */
+  meta = {
+    supportedModes: ['snapshot', 'timespan', 'navigation'],
+  };
+
+  /**
+   * @param {LH.Crdp.CSS.StyleSheetAddedEvent} event
+   */
+  _onStylesheetAdded(event) {
+    if (!this._session) throw new Error('Session not initialized');
+    const styleSheetId = event.header.styleSheetId;
+    const sheetPromise = this._session.sendCommand('CSS.getStyleSheetText', {styleSheetId})
+      .then(content => ({
+        header: event.header,
+        content: content.text,
+      }))
+      .catch(err => {
+        log.warn(
+          'Stylesheets',
+          `Error fetching content of stylesheet with URL "${event.header.sourceURL}"`
+        );
+        Sentry.captureException(err, {
+          tags: {
+            gatherer: 'Stylesheets',
+          },
+          extra: {
+            url: event.header.sourceURL,
+          },
+          level: 'error',
+        });
+        return null;
+      });
+    this._sheetPromises.set(styleSheetId, sheetPromise);
+  }
+
+  /**
+   * @param {LH.Gatherer.Context} context
+   */
+  async startInstrumentation(context) {
+    const session = context.driver.defaultSession;
+    this._session = session;
+
+    // Calling `CSS.enable` will emit events for stylesheets currently on the page.
+    // We want to ignore these events in navigation mode because they are not relevant to the
+    // navigation that is about to happen. Adding the event listener *after* calling `CSS.enable`
+    // ensures that the events for pre-existing stylesheets are ignored.
+    const isNavigation = context.gatherMode === 'navigation';
+    if (!isNavigation) {
+      session.on('CSS.styleSheetAdded', this._onStylesheetAdded);
+    }
+
+    await session.sendCommand('DOM.enable');
+    await session.sendCommand('CSS.enable');
+
+    if (isNavigation) {
+      session.on('CSS.styleSheetAdded', this._onStylesheetAdded);
+    }
+  }
+
+
+  /**
+   * @param {LH.Gatherer.Context} context
+   */
+  async stopInstrumentation(context) {
+    const session = context.driver.defaultSession;
+    session.off('CSS.styleSheetAdded', this._onStylesheetAdded);
+
+    // Ensure we finish fetching all stylesheet contents before disabling the CSS domain
+    await Promise.all(this._sheetPromises.values());
+
+    await session.sendCommand('CSS.disable');
+    await session.sendCommand('DOM.disable');
+  }
+
+  /**
+   * @param {LH.Gatherer.Context} context
+   * @return {Promise<LH.Artifacts['Stylesheets']>}
+   */
+  async getArtifact(context) {
+    const executionContext = context.driver.executionContext;
+
+    if (context.gatherMode === 'snapshot') {
+      await this.startInstrumentation(context);
+
+      // Force style to recompute.
+      // Doesn't appear to be necessary in newer versions of Chrome.
+      await executionContext.evaluateAsync('getComputedStyle(document.body)');
+
+      await this.stopInstrumentation(context);
+    }
+
+    /** @type {Map<string, LH.Artifacts.CSSStyleSheetInfo>} */
+    const dedupedStylesheets = new Map();
+    const sheets = await Promise.all(this._sheetPromises.values());
+
+    for (const sheet of sheets) {
+      // Erroneous sheets will be reported via sentry and the log.
+      // We can ignore them here without throwing a fatal error.
+      if (!sheet) continue;
+
+      // Exclude empty stylesheets.
+      if (sheet.header.length === 0) {
+        continue;
+      }
+
+      dedupedStylesheets.set(sheet.content, sheet);
+    }
+
+    return Array.from(dedupedStylesheets.values());
+  }
+}
+
+export default Stylesheets;

package/core/gather/navigation-runner.js

@@ -92,7 +92,9 @@ async function _navigate(navigationContext) {
     return {requestedUrl, mainDocumentUrl, navigationError: undefined};
   } catch (err) {
     if (!(err instanceof LighthouseError)) throw err;
-    if (err.code !== 'NO_FCP' && err.code !== 'PAGE_HUNG') throw err;
+    if (err.code !== 'NO_FCP' && err.code !== 'PAGE_HUNG' && err.code !== 'TARGET_CRASHED') {
+      throw err;
+    }
     if (typeof requestor !== 'string') throw err;
 
     // TODO: Make the urls optional here so we don't need to throw an error with a callback requestor.

package/core/gather/session.js

@@ -100,6 +100,7 @@ class ProtocolSession extends CrdpEventEmitter {
     /** @type {NodeJS.Timer|undefined} */
     let timeout;
     const timeoutPromise = new Promise((resolve, reject) => {
+      // Unexpected setTimeout invocation to preserve the error stack. https://github.com/GoogleChrome/lighthouse/issues/13332
       // eslint-disable-next-line max-len
       timeout = setTimeout(reject, timeoutMs, new LighthouseError(LighthouseError.errors.PROTOCOL_TIMEOUT, {
         protocolMethod: method,
@@ -139,7 +140,7 @@ class ProtocolSession extends CrdpEventEmitter {
   async dispose() {
     // @ts-expect-error Puppeteer expects the handler params to be type `unknown`
     this._cdpSession.off('*', this._handleProtocolEvent);
-    await this._cdpSession.detach();
+    await this._cdpSession.detach().catch(e => log.verbose('session', 'detach failed', e.message));
   }
 }
 

package/core/lib/emulation.js

@@ -128,7 +128,7 @@ function enableNetworkThrottling(session, throttlingSettings) {
  * @return {Promise<void>}
  */
 function clearNetworkThrottling(session) {
-  return session.sendCommand('Network.emulateNetworkConditions', NO_THROTTLING_METRICS);
+  return session.sendCommandAndIgnore('Network.emulateNetworkConditions', NO_THROTTLING_METRICS);
 }
 
 /**
@@ -146,7 +146,7 @@ function enableCPUThrottling(session, throttlingSettings) {
  * @return {Promise<void>}
  */
 function clearCPUThrottling(session) {
-  return session.sendCommand('Emulation.setCPUThrottlingRate', NO_CPU_THROTTLE_METRICS);
+  return session.sendCommandAndIgnore('Emulation.setCPUThrottlingRate', NO_CPU_THROTTLE_METRICS);
 }
 
 export {

package/core/lib/i18n/i18n.d.ts

@@ -19,7 +19,6 @@ export namespace UIStrings {
     const columnRequests: string;
     const columnName: string;
     const columnSource: string;
-    const columnOverBudget: string;
     const columnElement: string;
     const columnStartTime: string;
     const columnDuration: string;

package/core/lib/i18n/i18n.js

@@ -57,8 +57,6 @@ const UIStrings = {
   columnName: 'Name',
   /** Label for a column in a data table; entries will be the locations of JavaScript or CSS code, e.g. the name of a Javascript package or module. */
   columnSource: 'Source',
-  /** Label for a column in a data table; entries will be how much a predetermined budget has been exeeded by. Depending on the context, this number could represent an excess in quantity or size of network requests, or, an excess in the duration of time that it takes for the page to load.*/
-  columnOverBudget: 'Over Budget',
   /** Label for a column in a data table; entries will be a representation of a DOM element. */
   columnElement: 'Element',
   /** Label for a column in a data table; entries will be the number of milliseconds since the page started loading. */

package/core/lib/lh-error.d.ts

@@ -105,6 +105,7 @@ export namespace UIStrings {
     const missingRequiredArtifact: string;
     const erroredRequiredArtifact: string;
     const oldChromeDoesNotSupportFeature: string;
+    const targetCrashed: string;
 }
 declare namespace ERRORS {
     namespace NO_SPEEDLINE_FRAMES {
@@ -340,6 +341,14 @@ declare namespace ERRORS {
         import message_30 = UIStrings.erroredRequiredArtifact;
         export { message_30 as message };
     }
+    namespace TARGET_CRASHED {
+        const code_31: string;
+        export { code_31 as code };
+        import message_31 = UIStrings.targetCrashed;
+        export { message_31 as message };
+        const lhrRuntimeError_22: boolean;
+        export { lhrRuntimeError_22 as lhrRuntimeError };
+    }
 }
 export {};
 //# sourceMappingURL=lh-error.d.ts.map

package/core/lib/lh-error.js

@@ -91,6 +91,9 @@ const UIStrings = {
    * @example {Largest Contentful Paint} featureName
    * */
   oldChromeDoesNotSupportFeature: 'This version of Chrome is too old to support \'{featureName}\'. Use a newer version to see full results.',
+
+  /** Error message explaining that the browser tab that Lighthouse is inspecting has crashed. */
+  targetCrashed: 'Browser tab has unexpectedly crashed.',
 };
 
 const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);
@@ -423,6 +426,13 @@ const ERRORS = {
     message: UIStrings.erroredRequiredArtifact,
   },
 
+  /** The page has crashed and will no longer respond to 99% of CDP commmands. */
+  TARGET_CRASHED: {
+    code: 'TARGET_CRASHED',
+    message: UIStrings.targetCrashed,
+    lhrRuntimeError: true,
+  },
+
   // Hey! When adding a new error type, update lighthouse-result.proto too.
   // Only necessary for runtime errors, which come from artifacts or pageLoadErrors.
 };

package/core/lib/navigation-error.js

@@ -150,6 +150,9 @@ function getPageLoadError(navigationError, context) {
   let finalRecord;
   if (mainRecord) {
     finalRecord = NetworkAnalyzer.resolveRedirects(mainRecord);
+  } else {
+    // We have no network requests to process, use the navError
+    return navigationError;
   }
 
   if (finalRecord?.mimeType === XHTML_MIME_TYPE) {

package/core/runner.js

@@ -298,7 +298,6 @@ class Runner {
         auditMode: undefined,
         output: undefined,
         channel: undefined,
-        budgets: undefined,
       };
       const normalizedGatherSettings = Object.assign({}, artifacts.settings, overrides);
       const normalizedAuditSettings = Object.assign({}, settings, overrides);