lighthouse 10.4.0-dev.20230718 → 10.4.0-dev.20230720

package/cli/sentry-prompt.js

@@ -10,10 +10,12 @@ import log from 'lighthouse-logger';
 
 const MAXIMUM_WAIT_TIME = 20 * 1000;
 
-// eslint-disable-next-line max-len
+/* eslint-disable max-len */
 const MESSAGE = `${log.reset}We're constantly trying to improve Lighthouse and its reliability.\n  ` +
   `${log.reset}Learn more: https://github.com/GoogleChrome/lighthouse/blob/main/docs/error-reporting.md \n ` +
-  ` ${log.bold}May we anonymously report runtime exceptions to improve the tool over time?${log.reset} `; // eslint-disable-line max-len
+  ` ${log.bold}May we anonymously report runtime exceptions to improve the tool over time?${log.reset}\n  ` +
+  `We'll remember your choice, but you can also use the flag --[no-]enable-error-reporting`;
+/* eslint-enable max-len */
 
 /**
  * @return {Promise<boolean>}

package/cli/test/smokehouse/lighthouse-runners/bundle.js

@@ -17,7 +17,7 @@ import {Worker, isMainThread, parentPort, workerData} from 'worker_threads';
 import {once} from 'events';
 
 import puppeteer from 'puppeteer-core';
-import ChromeLauncher from 'chrome-launcher';
+import * as ChromeLauncher from 'chrome-launcher';
 
 import {LH_ROOT} from '../../../../root.js';
 import {loadArtifacts, saveArtifacts} from '../../../../core/lib/asset-saver.js';

package/cli/test/smokehouse/lighthouse-runners/cli.d.ts

@@ -1,4 +1,3 @@
-/// <reference path="../../../../../../types/internal/lighthouse-logger.d.ts" />
 /**
  * Launch Chrome and do a full Lighthouse run via the Lighthouse CLI.
  * @param {string} url

package/cli/test/smokehouse/report-assert.d.ts

@@ -1,4 +1,3 @@
-/// <reference path="../../../../../types/internal/lighthouse-logger.d.ts" />
 export type Difference = {
     path: string;
     actual: any;

package/core/audits/uses-rel-preconnect.js

@@ -14,6 +14,7 @@ import {LoadSimulator} from '../computed/load-simulator.js';
 import {ProcessedNavigation} from '../computed/processed-navigation.js';
 import {PageDependencyGraph} from '../computed/page-dependency-graph.js';
 import {LanternLargestContentfulPaint} from '../computed/metrics/lantern-largest-contentful-paint.js';
+import {LanternFirstContentfulPaint} from '../computed/metrics/lantern-first-contentful-paint.js';
 
 // Preconnect establishes a "clean" socket. Chrome's socket manager will keep an unused socket
 // around for 10s. Meaning, the time delta between processing preconnect a request should be <10s,
@@ -125,7 +126,8 @@ class UsesRelPreconnectAudit extends Audit {
     const devtoolsLog = artifacts.devtoolsLogs[UsesRelPreconnectAudit.DEFAULT_PASS];
     const settings = context.settings;
 
-    let maxWasted = 0;
+    let maxWastedLcp = 0;
+    let maxWastedFcp = 0;
     /** @type {Array<LH.IcuMessage>} */
     const warnings = [];
 
@@ -144,7 +146,14 @@ class UsesRelPreconnectAudit extends Audit {
     /** @type {Set<string>} */
     const lcpGraphURLs = new Set();
     lcpGraph.traverse(node => {
-      if (node.type === 'network' ) lcpGraphURLs.add(node.record.url);
+      if (node.type === 'network') lcpGraphURLs.add(node.record.url);
+    });
+
+    const fcpGraph =
+      await LanternFirstContentfulPaint.getPessimisticGraph(pageGraph, processedNavigation);
+    const fcpGraphURLs = new Set();
+    fcpGraph.traverse(node => {
+      if (node.type === 'network') fcpGraphURLs.add(node.record.url);
     });
 
     /** @type {Map<string, LH.Artifacts.NetworkRequest[]>}  */
@@ -216,7 +225,11 @@ class UsesRelPreconnectAudit extends Audit {
         return;
       }
 
-      maxWasted = Math.max(wastedMs, maxWasted);
+      maxWastedLcp = Math.max(wastedMs, maxWastedLcp);
+
+      if (fcpGraphURLs.has(firstRecordOfOrigin.url)) {
+        maxWastedFcp = Math.max(wastedMs, maxWastedLcp);
+      }
       results.push({
         url: securityOrigin,
         wastedMs: wastedMs,
@@ -240,6 +253,7 @@ class UsesRelPreconnectAudit extends Audit {
         score: 1,
         warnings: preconnectLinks.length >= 3 ?
           [...warnings, str_(UIStrings.tooManyPreconnectLinksWarning)] : warnings,
+        metricSavings: {LCP: maxWastedLcp, FCP: maxWastedFcp},
       };
     }
 
@@ -250,17 +264,18 @@ class UsesRelPreconnectAudit extends Audit {
     ];
 
     const details = Audit.makeOpportunityDetails(headings, results,
-      {overallSavingsMs: maxWasted, sortedBy: ['wastedMs']});
+      {overallSavingsMs: maxWastedLcp, sortedBy: ['wastedMs']});
 
     return {
-      score: ByteEfficiencyAudit.scoreForWastedMs(maxWasted),
-      numericValue: maxWasted,
+      score: ByteEfficiencyAudit.scoreForWastedMs(maxWastedLcp),
+      numericValue: maxWastedLcp,
       numericUnit: 'millisecond',
-      displayValue: maxWasted ?
-        str_(i18n.UIStrings.displayValueMsSavings, {wastedMs: maxWasted}) :
+      displayValue: maxWastedLcp ?
+        str_(i18n.UIStrings.displayValueMsSavings, {wastedMs: maxWastedLcp}) :
         '',
       warnings,
       details,
+      metricSavings: {LCP: maxWastedLcp, FCP: maxWastedFcp},
     };
   }
 }

package/core/config/constants.js

@@ -17,7 +17,7 @@ const throttling = {
   DEVTOOLS_RTT_ADJUSTMENT_FACTOR,
   DEVTOOLS_THROUGHPUT_ADJUSTMENT_FACTOR,
   // These values align with WebPageTest's definition of "Fast 3G"
-  // But offer similar charateristics to roughly the 75th percentile of 4G connections.
+  // But offer similar characteristics to roughly the 75th percentile of 4G connections.
   mobileSlow4G: {
     rttMs: 150,
     throughputKbps: 1.6 * 1024,

package/core/gather/driver/execution-context.js

@@ -108,7 +108,7 @@ class ExecutionContext {
         ${ExecutionContext._cachedNativesPreamble};
         globalThis.__lighthouseExecutionContextUniqueIdentifier =
           ${uniqueExecutionContextIdentifier};
-        ${pageFunctions.esbuildFunctionNameStubString}
+        ${pageFunctions.esbuildFunctionWrapperString}
         return new Promise(function (resolve) {
           return Promise.resolve()
             .then(_ => ${expression})
@@ -277,13 +277,20 @@ class ExecutionContext {
    * @return {string}
    */
   static serializeDeps(deps) {
-    deps = [pageFunctions.esbuildFunctionNameStubString, ...deps || []];
+    deps = [pageFunctions.esbuildFunctionWrapperString, ...deps || []];
     return deps.map(dep => {
       if (typeof dep === 'function') {
         // esbuild will change the actual function name (ie. function actualName() {})
-        // always, despite minification settings, but preserve the real name in `actualName.name`
-        // (see esbuildFunctionNameStubString).
-        return `const ${dep.name} = ${dep}`;
+        // always, and preserve the real name in `actualName.name`.
+        // See esbuildFunctionWrapperString.
+        const output = dep.toString();
+        const runtimeName = pageFunctions.getRuntimeFunctionName(dep);
+        if (runtimeName !== dep.name) {
+          // In addition to exposing the mangled name, also expose the original as an alias.
+          return `${output}; const ${dep.name} = ${runtimeName};`;
+        } else {
+          return output;
+        }
       } else {
         return dep;
       }

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

@@ -23,6 +23,7 @@ import {ProcessedNavigation} from '../../computed/processed-navigation.js';
 import {LighthouseError} from '../../lib/lh-error.js';
 import {Responsiveness} from '../../computed/metrics/responsiveness.js';
 import {CumulativeLayoutShift} from '../../computed/metrics/cumulative-layout-shift.js';
+import {ExecutionContext} from '../driver/execution-context.js';
 
 /** @typedef {{nodeId: number, score?: number, animations?: {name?: string, failureReasonsMask?: number, unsupportedProperties?: string[]}[], type?: string}} TraceElementData */
 
@@ -284,12 +285,15 @@ class TraceElements extends BaseGatherer {
         try {
           const objectId = await resolveNodeIdToObjectId(session, backendNodeId);
           if (!objectId) continue;
+
+          const deps = ExecutionContext.serializeDeps([
+            pageFunctions.getNodeDetails,
+            getNodeDetailsData,
+          ]);
           response = await session.sendCommand('Runtime.callFunctionOn', {
             objectId,
             functionDeclaration: `function () {
-              ${pageFunctions.esbuildFunctionNameStubString}
-              ${getNodeDetailsData.toString()};
-              ${pageFunctions.getNodeDetails};
+              ${deps}
               return getNodeDetailsData.call(this);
             }`,
             returnByValue: true,

package/core/lib/dependency-graph/simulator/network-analyzer.d.ts

@@ -65,39 +65,55 @@ export class NetworkAnalyzer {
      * single handshake.
      * This is the most accurate and preferred method of measurement when the data is available.
      *
-     * @param {LH.Artifacts.NetworkRequest[]} records
-     * @return {Map<string, number[]>}
+     * @param {RequestInfo} info
+     * @return {number[]|number|undefined}
      */
-    static _estimateRTTByOriginViaConnectionTiming(records: LH.Artifacts.NetworkRequest[]): Map<string, number[]>;
+    static _estimateRTTViaConnectionTiming(info: {
+        record: LH.Artifacts.NetworkRequest;
+        timing: LH.Crdp.Network.ResourceTiming;
+        connectionReused?: boolean | undefined;
+    }): number[] | number | undefined;
     /**
      * Estimates the observed RTT to each origin based on how long a download took on a fresh connection.
      * NOTE: this will tend to overestimate the actual RTT quite significantly as the download can be
      * slow for other reasons as well such as bandwidth constraints.
      *
-     * @param {LH.Artifacts.NetworkRequest[]} records
-     * @return {Map<string, number[]>}
+     * @param {RequestInfo} info
+     * @return {number|undefined}
      */
-    static _estimateRTTByOriginViaDownloadTiming(records: LH.Artifacts.NetworkRequest[]): Map<string, number[]>;
+    static _estimateRTTViaDownloadTiming(info: {
+        record: LH.Artifacts.NetworkRequest;
+        timing: LH.Crdp.Network.ResourceTiming;
+        connectionReused?: boolean | undefined;
+    }): number | undefined;
     /**
      * Estimates the observed RTT to each origin based on how long it took until Chrome could
      * start sending the actual request when a new connection was required.
      * NOTE: this will tend to overestimate the actual RTT as the request can be delayed for other
      * reasons as well such as more SSL handshakes if TLS False Start is not enabled.
      *
-     * @param {LH.Artifacts.NetworkRequest[]} records
-     * @return {Map<string, number[]>}
+     * @param {RequestInfo} info
+     * @return {number|undefined}
      */
-    static _estimateRTTByOriginViaSendStartTiming(records: LH.Artifacts.NetworkRequest[]): Map<string, number[]>;
+    static _estimateRTTViaSendStartTiming(info: {
+        record: LH.Artifacts.NetworkRequest;
+        timing: LH.Crdp.Network.ResourceTiming;
+        connectionReused?: boolean | undefined;
+    }): number | undefined;
     /**
      * Estimates the observed RTT to each origin based on how long it took until Chrome received the
      * headers of the response (~TTFB).
      * NOTE: this is the most inaccurate way to estimate the RTT, but in some environments it's all
      * we have access to :(
      *
-     * @param {LH.Artifacts.NetworkRequest[]} records
-     * @return {Map<string, number[]>}
+     * @param {RequestInfo} info
+     * @return {number|undefined}
      */
-    static _estimateRTTByOriginViaHeadersEndTiming(records: LH.Artifacts.NetworkRequest[]): Map<string, number[]>;
+    static _estimateRTTViaHeadersEndTiming(info: {
+        record: LH.Artifacts.NetworkRequest;
+        timing: LH.Crdp.Network.ResourceTiming;
+        connectionReused?: boolean | undefined;
+    }): number | undefined;
     /**
      * Given the RTT to each origin, estimates the observed server response times.
      *

package/core/lib/dependency-graph/simulator/network-analyzer.js

@@ -132,33 +132,32 @@ class NetworkAnalyzer {
    * single handshake.
    * This is the most accurate and preferred method of measurement when the data is available.
    *
-   * @param {LH.Artifacts.NetworkRequest[]} records
-   * @return {Map<string, number[]>}
+   * @param {RequestInfo} info
+   * @return {number[]|number|undefined}
    */
-  static _estimateRTTByOriginViaConnectionTiming(records) {
-    return NetworkAnalyzer._estimateValueByOrigin(records, ({timing, connectionReused, record}) => {
-      if (connectionReused) return;
-
-      // In LR, network records are missing connection timing, but we've smuggled it in via headers.
-      if (global.isLightrider && record.lrStatistics) {
-        if (record.protocol.startsWith('h3')) {
-          return record.lrStatistics.TCPMs;
-        } else {
-          return [record.lrStatistics.TCPMs / 2, record.lrStatistics.TCPMs / 2];
-        }
+  static _estimateRTTViaConnectionTiming(info) {
+    const {timing, connectionReused, record} = info;
+    if (connectionReused) return;
+
+    // In LR, network records are missing connection timing, but we've smuggled it in via headers.
+    if (global.isLightrider && record.lrStatistics) {
+      if (record.protocol.startsWith('h3')) {
+        return record.lrStatistics.TCPMs;
+      } else {
+        return [record.lrStatistics.TCPMs / 2, record.lrStatistics.TCPMs / 2];
       }
+    }
 
-      const {connectStart, sslStart, sslEnd, connectEnd} = timing;
-      if (connectEnd >= 0 && connectStart >= 0 && record.protocol.startsWith('h3')) {
-        // These values are equal to sslStart and sslEnd for h3.
-        return connectEnd - connectStart;
-      } else if (sslStart >= 0 && sslEnd >= 0 && sslStart !== connectStart) {
-        // SSL can also be more than 1 RT but assume False Start was used.
-        return [connectEnd - sslStart, sslStart - connectStart];
-      } else if (connectStart >= 0 && connectEnd >= 0) {
-        return connectEnd - connectStart;
-      }
-    });
+    const {connectStart, sslStart, sslEnd, connectEnd} = timing;
+    if (connectEnd >= 0 && connectStart >= 0 && record.protocol.startsWith('h3')) {
+      // These values are equal to sslStart and sslEnd for h3.
+      return connectEnd - connectStart;
+    } else if (sslStart >= 0 && sslEnd >= 0 && sslStart !== connectStart) {
+      // SSL can also be more than 1 RT but assume False Start was used.
+      return [connectEnd - sslStart, sslStart - connectStart];
+    } else if (connectStart >= 0 && connectEnd >= 0) {
+      return connectEnd - connectStart;
+    }
   }
 
   /**
@@ -166,26 +165,27 @@ class NetworkAnalyzer {
    * NOTE: this will tend to overestimate the actual RTT quite significantly as the download can be
    * slow for other reasons as well such as bandwidth constraints.
    *
-   * @param {LH.Artifacts.NetworkRequest[]} records
-   * @return {Map<string, number[]>}
+   * @param {RequestInfo} info
+   * @return {number|undefined}
    */
-  static _estimateRTTByOriginViaDownloadTiming(records) {
-    return NetworkAnalyzer._estimateValueByOrigin(records, ({record, timing, connectionReused}) => {
-      if (connectionReused) return;
-      // Only look at downloads that went past the initial congestion window
-      if (record.transferSize <= INITIAL_CWD) return;
-      if (!Number.isFinite(timing.receiveHeadersEnd) || timing.receiveHeadersEnd < 0) return;
+  static _estimateRTTViaDownloadTiming(info) {
+    const {timing, connectionReused, record} = info;
+    if (connectionReused) return;
 
-      // Compute the amount of time downloading everything after the first congestion window took
-      const totalTime = record.networkEndTime - record.networkRequestTime;
-      const downloadTimeAfterFirstByte = totalTime - timing.receiveHeadersEnd;
-      const numberOfRoundTrips = Math.log2(record.transferSize / INITIAL_CWD);
+    // Only look at downloads that went past the initial congestion window
+    if (record.transferSize <= INITIAL_CWD) return;
+    if (!Number.isFinite(timing.receiveHeadersEnd) || timing.receiveHeadersEnd < 0) return;
 
-      // Ignore requests that required a high number of round trips since bandwidth starts to play
-      // a larger role than latency
-      if (numberOfRoundTrips > 5) return;
-      return downloadTimeAfterFirstByte / numberOfRoundTrips;
-    });
+    // Compute the amount of time downloading everything after the first congestion window took
+    const totalTime = record.networkEndTime - record.networkRequestTime;
+    const downloadTimeAfterFirstByte = totalTime - timing.receiveHeadersEnd;
+    const numberOfRoundTrips = Math.log2(record.transferSize / INITIAL_CWD);
+
+    // Ignore requests that required a high number of round trips since bandwidth starts to play
+    // a larger role than latency
+    if (numberOfRoundTrips > 5) return;
+
+    return downloadTimeAfterFirstByte / numberOfRoundTrips;
   }
 
   /**
@@ -194,21 +194,21 @@ class NetworkAnalyzer {
    * NOTE: this will tend to overestimate the actual RTT as the request can be delayed for other
    * reasons as well such as more SSL handshakes if TLS False Start is not enabled.
    *
-   * @param {LH.Artifacts.NetworkRequest[]} records
-   * @return {Map<string, number[]>}
+   * @param {RequestInfo} info
+   * @return {number|undefined}
    */
-  static _estimateRTTByOriginViaSendStartTiming(records) {
-    return NetworkAnalyzer._estimateValueByOrigin(records, ({record, timing, connectionReused}) => {
-      if (connectionReused) return;
-      if (!Number.isFinite(timing.sendStart) || timing.sendStart < 0) return;
-
-      // Assume everything before sendStart was just DNS + (SSL)? + TCP handshake
-      // 1 RT for DNS, 1 RT (maybe) for SSL, 1 RT for TCP
-      let roundTrips = 1;
-      if (!record.protocol.startsWith('h3')) roundTrips += 1; // TCP
-      if (record.parsedURL.scheme === 'https') roundTrips += 1;
-      return timing.sendStart / roundTrips;
-    });
+  static _estimateRTTViaSendStartTiming(info) {
+    const {timing, connectionReused, record} = info;
+    if (connectionReused) return;
+
+    if (!Number.isFinite(timing.sendStart) || timing.sendStart < 0) return;
+
+    // Assume everything before sendStart was just DNS + (SSL)? + TCP handshake
+    // 1 RT for DNS, 1 RT (maybe) for SSL, 1 RT for TCP
+    let roundTrips = 1;
+    if (!record.protocol.startsWith('h3')) roundTrips += 1; // TCP
+    if (record.parsedURL.scheme === 'https') roundTrips += 1;
+    return timing.sendStart / roundTrips;
   }
 
   /**
@@ -217,34 +217,33 @@ class NetworkAnalyzer {
    * NOTE: this is the most inaccurate way to estimate the RTT, but in some environments it's all
    * we have access to :(
    *
-   * @param {LH.Artifacts.NetworkRequest[]} records
-   * @return {Map<string, number[]>}
+   * @param {RequestInfo} info
+   * @return {number|undefined}
    */
-  static _estimateRTTByOriginViaHeadersEndTiming(records) {
-    return NetworkAnalyzer._estimateValueByOrigin(records, ({record, timing, connectionReused}) => {
-      if (!Number.isFinite(timing.receiveHeadersEnd) || timing.receiveHeadersEnd < 0) return;
-      if (!record.resourceType) return;
-
-      const serverResponseTimePercentage =
-        SERVER_RESPONSE_PERCENTAGE_OF_TTFB[record.resourceType] ||
-        DEFAULT_SERVER_RESPONSE_PERCENTAGE;
-      const estimatedServerResponseTime = timing.receiveHeadersEnd * serverResponseTimePercentage;
-
-      // When connection was reused...
-      // TTFB = 1 RT for request + server response time
-      let roundTrips = 1;
-
-      // When connection was fresh...
-      // TTFB = DNS + (SSL)? + TCP handshake + 1 RT for request + server response time
-      if (!connectionReused) {
-        roundTrips += 1; // DNS
-        if (!record.protocol.startsWith('h3')) roundTrips += 1; // TCP
-        if (record.parsedURL.scheme === 'https') roundTrips += 1; // SSL
-      }
+  static _estimateRTTViaHeadersEndTiming(info) {
+    const {timing, connectionReused, record} = info;
+    if (!Number.isFinite(timing.receiveHeadersEnd) || timing.receiveHeadersEnd < 0) return;
+    if (!record.resourceType) return;
+
+    const serverResponseTimePercentage =
+      SERVER_RESPONSE_PERCENTAGE_OF_TTFB[record.resourceType] ||
+      DEFAULT_SERVER_RESPONSE_PERCENTAGE;
+    const estimatedServerResponseTime = timing.receiveHeadersEnd * serverResponseTimePercentage;
+
+    // When connection was reused...
+    // TTFB = 1 RT for request + server response time
+    let roundTrips = 1;
+
+    // When connection was fresh...
+    // TTFB = DNS + (SSL)? + TCP handshake + 1 RT for request + server response time
+    if (!connectionReused) {
+      roundTrips += 1; // DNS
+      if (!record.protocol.startsWith('h3')) roundTrips += 1; // TCP
+      if (record.parsedURL.scheme === 'https') roundTrips += 1; // SSL
+    }
 
-      // subtract out our estimated server response time
-      return Math.max((timing.receiveHeadersEnd - estimatedServerResponseTime) / roundTrips, 3);
-    });
+    // subtract out our estimated server response time
+    return Math.max((timing.receiveHeadersEnd - estimatedServerResponseTime) / roundTrips, 3);
   }
 
   /**
@@ -350,32 +349,61 @@ class NetworkAnalyzer {
       useHeadersEndEstimates = true,
     } = options || {};
 
-    let estimatesByOrigin = NetworkAnalyzer._estimateRTTByOriginViaConnectionTiming(records);
-    if (!estimatesByOrigin.size || forceCoarseEstimates) {
-      estimatesByOrigin = new Map();
-      const estimatesViaDownload = NetworkAnalyzer._estimateRTTByOriginViaDownloadTiming(records);
-      const estimatesViaSendStart = NetworkAnalyzer._estimateRTTByOriginViaSendStartTiming(records);
-      const estimatesViaTTFB = NetworkAnalyzer._estimateRTTByOriginViaHeadersEndTiming(records);
+    const connectionWasReused = NetworkAnalyzer.estimateIfConnectionWasReused(records);
+    const groupedByOrigin = NetworkAnalyzer.groupByOrigin(records);
 
-      for (const [origin, estimates] of estimatesViaDownload.entries()) {
-        if (!useDownloadEstimates) continue;
-        estimatesByOrigin.set(origin, estimates);
+    const estimatesByOrigin = new Map();
+    for (const [origin, originRecords] of groupedByOrigin.entries()) {
+      /** @type {number[]} */
+      const originEstimates = [];
+
+      /**
+       * @param {(e: RequestInfo) => number[]|number|undefined} estimator
+       */
+      // eslint-disable-next-line no-inner-declarations
+      function collectEstimates(estimator, multiplier = 1) {
+        for (const record of originRecords) {
+          const timing = record.timing;
+          if (!timing) continue;
+
+          const estimates = estimator({
+            record,
+            timing,
+            connectionReused: connectionWasReused.get(record.requestId),
+          });
+          if (estimates === undefined) continue;
+
+          if (!Array.isArray(estimates)) {
+            originEstimates.push(estimates * multiplier);
+          } else {
+            originEstimates.push(...estimates.map(e => e * multiplier));
+          }
+        }
       }
 
-      for (const [origin, estimates] of estimatesViaSendStart.entries()) {
-        if (!useSendStartEstimates) continue;
-        const existing = estimatesByOrigin.get(origin) || [];
-        estimatesByOrigin.set(origin, existing.concat(estimates));
+      if (!forceCoarseEstimates) {
+        collectEstimates(this._estimateRTTViaConnectionTiming);
       }
 
-      for (const [origin, estimates] of estimatesViaTTFB.entries()) {
-        if (!useHeadersEndEstimates) continue;
-        const existing = estimatesByOrigin.get(origin) || [];
-        estimatesByOrigin.set(origin, existing.concat(estimates));
+      // Connection timing can be missing for a few reasons:
+      // - Origin was preconnected, which we don't have instrumentation for.
+      // - Trace began recording after a connection has already been established (for example, in timespan mode)
+      // - Perhaps Chrome established a connection already in the background (service worker? Just guessing here)
+      // - Not provided in LR netstack.
+      if (!originEstimates.length) {
+        if (useDownloadEstimates) {
+          collectEstimates(this._estimateRTTViaDownloadTiming, coarseEstimateMultiplier);
+        }
+        if (useSendStartEstimates) {
+          collectEstimates(this._estimateRTTViaSendStartTiming, coarseEstimateMultiplier);
+        }
+        if (useHeadersEndEstimates) {
+          collectEstimates(this._estimateRTTViaHeadersEndTiming, coarseEstimateMultiplier);
+        }
       }
 
-      for (const estimates of estimatesByOrigin.values()) {
-        estimates.forEach((x, i) => (estimates[i] = x * coarseEstimateMultiplier));
+      if (originEstimates.length) {
+        estimatesByOrigin.set(origin, originEstimates);
       }
     }
 

package/core/lib/page-functions.d.ts

@@ -11,7 +11,8 @@ export namespace pageFunctions {
     export { wrapRequestIdleCallback };
     export { getBoundingClientRect };
     export { truncate };
-    export { esbuildFunctionNameStubString };
+    export { esbuildFunctionWrapperString };
+    export { getRuntimeFunctionName };
 }
 /**
  * `typed-query-selector`'s CSS selector parser.
@@ -50,11 +51,11 @@ declare function wrapRuntimeEvalErrorInBrowser(err?: string | Error | undefined)
 };
 /**
  * @template {string} T
- * @param {T} selector Optional simple CSS selector to filter nodes on.
+ * @param {T=} selector Optional simple CSS selector to filter nodes on.
  *     Combinators are not supported.
  * @return {Array<ParseSelector<T>>}
  */
-declare function getElementsInDocument<T extends string>(selector: T): import("typed-query-selector/parser").ParseSelector<T, Element>[];
+declare function getElementsInDocument<T extends string>(selector?: T | undefined): import("typed-query-selector/parser").ParseSelector<T, Element>[];
 /**
  * Gets the opening tag text of the given node.
  * @param {Element|ShadowRoot} element
@@ -158,6 +159,11 @@ declare function truncate(string: string, characterLimit: number): string;
 declare namespace truncate {
     function toString(): string;
 }
-declare const esbuildFunctionNameStubString: "var __name=(fn)=>fn;";
+declare const esbuildFunctionWrapperString: string;
+/**
+ * @param {Function} fn
+ * @return {string}
+ */
+declare function getRuntimeFunctionName(fn: Function): string;
 export {};
 //# sourceMappingURL=page-functions.d.ts.map

package/core/lib/page-functions.js

@@ -4,6 +4,8 @@
  * 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 {createRequire} from 'module';
+
 import {Util} from '../../shared/util.js';
 
 /**
@@ -50,7 +52,7 @@ function wrapRuntimeEvalErrorInBrowser(err) {
 
 /**
  * @template {string} T
- * @param {T} selector Optional simple CSS selector to filter nodes on.
+ * @param {T=} selector Optional simple CSS selector to filter nodes on.
  *     Combinators are not supported.
  * @return {Array<ParseSelector<T>>}
  */
@@ -513,24 +515,89 @@ function truncate(string, characterLimit) {
   return Util.truncate(string, characterLimit);
 }
 
+function isBundledEnvironment() {
+  // If we're in DevTools or LightRider, we are definitely bundled.
+  // TODO: refactor and delete `global.isDevtools`.
+  if (global.isDevtools || global.isLightrider) return true;
+
+  const require = createRequire(import.meta.url);
+
+  try {
+    // Not foolproof, but `lighthouse-logger` is a dependency of lighthouse that should always be resolvable.
+    // `require.resolve` will only throw in atypical/bundled environments.
+    require.resolve('lighthouse-logger');
+    return false;
+  } catch (err) {
+    return true;
+  }
+}
+
 // This is to support bundled lighthouse.
 // esbuild calls every function with a builtin `__name` (since we set keepNames: true),
 // whose purpose is to store the real name of the function so that esbuild can rename it to avoid
 // collisions. Anywhere we inject dynamically generated code at runtime for the browser to process,
 // we must manually include this function (because esbuild only does so once at the top scope of
 // the bundle, which is irrelevant for code executed in the browser).
-const esbuildFunctionNameStubString = 'var __name=(fn)=>fn;';
+// When minified, esbuild will mangle the name of this wrapper function, so we need to determine what it
+// is at runtime in order to recreate it within the page.
+const esbuildFunctionWrapperString = createEsbuildFunctionWrapper();
 
-/** @type {string} */
-const truncateRawString = truncate.toString();
-truncate.toString = () => `function truncate(string, characterLimit) {
+function createEsbuildFunctionWrapper() {
+  if (!isBundledEnvironment()) {
+    return '';
+  }
+
+  const functionAsString = (()=>{
+    // eslint-disable-next-line no-unused-vars
+    const a = ()=>{};
+  }).toString()
+    // When not minified, esbuild annotates the call to this function wrapper with PURE.
+    // We know further that the name of the wrapper function should be `__name`, but let's not
+    // hardcode that. Remove the PURE annotation to simplify the regex.
+    .replace('/* @__PURE__ */', '');
+  const functionStringMatch = functionAsString.match(/=\s*([\w_]+)\(/);
+  if (!functionStringMatch) {
+    throw new Error('Could not determine esbuild function wrapper name');
+  }
+
+  /**
+   * @param {Function} fn
+   * @param {string} value
+   */
+  const esbuildFunctionWrapper = (fn, value) =>
+    Object.defineProperty(fn, 'name', {value, configurable: true});
+  const wrapperFnName = functionStringMatch[1];
+  return `let ${wrapperFnName}=${esbuildFunctionWrapper}`;
+}
+
+/**
+ * @param {Function} fn
+ * @return {string}
+ */
+function getRuntimeFunctionName(fn) {
+  const match = fn.toString().match(/function ([\w$]+)/);
+  if (!match) throw new Error(`could not find function name for: ${fn}`);
+  return match[1];
+}
+
+// We setup a number of our page functions to automatically include their dependencies.
+// Because of esbuild bundling, we must refer to the actual (mangled) runtime function name.
+/** @type {Record<string, string>} */
+const names = {
+  truncate: getRuntimeFunctionName(truncate),
+  getNodeLabel: getRuntimeFunctionName(getNodeLabel),
+  getOuterHTMLSnippet: getRuntimeFunctionName(getOuterHTMLSnippet),
+  getNodeDetails: getRuntimeFunctionName(getNodeDetails),
+};
+
+truncate.toString = () => `function ${names.truncate}(string, characterLimit) {
   const Util = { ${Util.truncate} };
-  return (${truncateRawString})(string, characterLimit);
+  return Util.truncate(string, characterLimit);
 }`;
 
 /** @type {string} */
 const getNodeLabelRawString = getNodeLabel.toString();
-getNodeLabel.toString = () => `function getNodeLabel(element) {
+getNodeLabel.toString = () => `function ${names.getNodeLabel}(element) {
   ${truncate};
   return (${getNodeLabelRawString})(element);
 }`;
@@ -538,14 +605,14 @@ getNodeLabel.toString = () => `function getNodeLabel(element) {
 /** @type {string} */
 const getOuterHTMLSnippetRawString = getOuterHTMLSnippet.toString();
 // eslint-disable-next-line max-len
-getOuterHTMLSnippet.toString = () => `function getOuterHTMLSnippet(element, ignoreAttrs = [], snippetCharacterLimit = 500) {
+getOuterHTMLSnippet.toString = () => `function ${names.getOuterHTMLSnippet}(element, ignoreAttrs = [], snippetCharacterLimit = 500) {
   ${truncate};
   return (${getOuterHTMLSnippetRawString})(element, ignoreAttrs, snippetCharacterLimit);
 }`;
 
 /** @type {string} */
 const getNodeDetailsRawString = getNodeDetails.toString();
-getNodeDetails.toString = () => `function getNodeDetails(element) {
+getNodeDetails.toString = () => `function ${names.getNodeDetails}(element) {
   ${truncate};
   ${getNodePath};
   ${getNodeSelector};
@@ -568,5 +635,6 @@ export const pageFunctions = {
   wrapRequestIdleCallback,
   getBoundingClientRect,
   truncate,
-  esbuildFunctionNameStubString,
+  esbuildFunctionWrapperString,
+  getRuntimeFunctionName,
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lighthouse",
   "type": "module",
-  "version": "10.4.0-dev.20230718",
+  "version": "10.4.0-dev.20230720",
   "description": "Automated auditing, performance metrics, and best practices for the web.",
   "main": "./core/index.js",
   "bin": {
@@ -181,7 +181,7 @@
   "dependencies": {
     "@sentry/node": "^6.17.4",
     "axe-core": "4.7.2",
-    "chrome-launcher": "^0.15.2",
+    "chrome-launcher": "^1.0.0",
     "configstore": "^5.0.1",
     "csp_evaluator": "1.1.1",
     "devtools-protocol": "0.0.1155343",
@@ -190,7 +190,7 @@
     "intl-messageformat": "^4.4.0",
     "jpeg-js": "^0.4.4",
     "js-library-detector": "^6.6.0",
-    "lighthouse-logger": "^1.4.1",
+    "lighthouse-logger": "^2.0.1",
     "lighthouse-stack-packs": "1.11.0",
     "lodash": "^4.17.21",
     "lookup-closest-locale": "6.2.0",

package/readme.md

@@ -337,6 +337,8 @@ This section details services that have integrated Lighthouse data. If you're wo
 
 * **[Treo](https://treo.sh)** - Treo is Lighthouse as a Service. It provides regression testing, geographical regions, custom networks, and integrations with GitHub & Slack. Treo is a paid product with plans for solo-developers and teams.
 
+* **[PageVitals](https://pagevitals.com)** - PageVitals combines Lighthouse, CrUX and real-user monitoring data to monitor the performance of websites. See how your website performs over time and get alerted if it gets too slow. Drill down and find the real cause of any performance issue. PageVitals is a paid product with a free 14-day trial.
+
 * **[Alertdesk](https://www.alertdesk.com/)** - Alertdesk is based on Lighthouse and helps you to keep track of your site’s quality & performance. Run daily quality & performance tests from both Mobile and Desktop and dive into the powerful & intuitive reports. You can also monitor your uptime (every minute - 24/7) & domain health. Alertdesk is a paid product with a free 14-day trial.
 
 * **[Screpy](https://screpy.com)** - Screpy is a web analysis tool that can analyze all pages of your websites in one dashboard and monitor them with your team. It's powered by Lighthouse and it also includes some different analysis tools (SERP, W3C, Uptime, etc). Screpy has free and paid plans.

package/types/internal/lighthouse-logger.d.ts

@@ -1,34 +0,0 @@
-/**
- * @license Copyright 2017 The Lighthouse Authors. All Rights Reserved.
- * 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 http://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.
- */
-
-declare module 'lighthouse-logger' {
-  interface Status {
-    msg: string;
-    id: string;
-    args?: any[];
-  }
-  export function setLevel(level: string): void;
-  export function isVerbose(): boolean;
-  export function formatProtocol(prefix: string, data: Object, level?: string): void;
-  export function log(title: string, ...args: any[]): void;
-  export function warn(title: string, ...args: any[]): void;
-  export function error(title: string, ...args: any[]): void;
-  export function verbose(title: string, ...args: any[]): void;
-  export function time(status: Status, level?: string): void;
-  export function timeEnd(status: Status, level?: string): void;
-  export function reset(): string;
-  export const cross: string;
-  export const dim: string;
-  export const tick: string;
-  export const bold: string;
-  export const purple: string;
-  export function redify(message: any): string;
-  export function greenify(message: any): string;
-  /** Retrieves and clears all stored time entries */
-  export function takeTimeEntries(): PerformanceEntry[];
-  export function getTimeEntries(): PerformanceEntry[];
-  export const events: import('events').EventEmitter;
-}