lighthouse 9.3.1-dev.20220213 → 9.4.0

package/flow-report/src/topbar.tsx

@@ -16,7 +16,7 @@ import {saveFile} from '../../report/renderer/api';
 
 function saveHtml(flowResult: LH.FlowResult, htmlStr: string) {
   const blob = new Blob([htmlStr], {type: 'text/html'});
-  const filename = getFlowResultFilenamePrefix(flowResult);
+  const filename = getFlowResultFilenamePrefix(flowResult) + '.html';
   saveFile(blob, filename);
 }
 

package/flow-report/src/wrappers/report.tsx

@@ -33,7 +33,8 @@ export const Report: FunctionComponent<{hashState: LH.FlowResult.HashState}> =
 ({hashState}) => {
   const ref = useExternalRenderer<HTMLDivElement>(() => {
     return renderReport(hashState.currentLhr, {
-      disableAutoDarkModeAndFireworks: true,
+      disableFireworks: true,
+      disableDarkMode: true,
       omitTopbar: true,
       omitGlobalStyles: true,
       onPageAnchorRendered: link => convertAnchor(link, hashState.index),

package/flow-report/test/topbar-test.tsx

@@ -56,7 +56,7 @@ it('save button opens save dialog for HTML file', async () => {
 
   expect(mockSaveFile).toHaveBeenCalledWith(
     expect.any(Blob),
-    'User-flow_2021-09-14_22-24-22'
+    'User-flow_2021-09-14_22-24-22.html'
   );
 });
 

package/lighthouse-cli/bin.js

@@ -137,12 +137,9 @@ async function begin() {
       url: urlUnderTest,
       flags: cliFlags,
       environmentData: {
-        name: 'redacted', // prevent sentry from using hostname
+        serverName: 'redacted', // prevent sentry from using hostname
         environment: isDev() ? 'development' : 'production',
         release: pkg.version,
-        tags: {
-          channel: 'cli',
-        },
       },
     });
   }

package/lighthouse-cli/test/smokehouse/core-tests.js

@@ -14,7 +14,7 @@ import dbw from './test-definitions/dobetterweb.js';
 import errorsExpiredSsl from './test-definitions/errors-expired-ssl.js';
 import errorsIframeExpiredSsl from './test-definitions/errors-iframe-expired-ssl.js';
 import errorsInfiniteLoop from './test-definitions/errors-infinite-loop.js';
-// import formsAutoComplete from './test-definitions/forms-autocomplete.js';
+import formsAutoComplete from './test-definitions/forms-autocomplete.js';
 import issuesMixedContent from './test-definitions/issues-mixed-content.js';
 import lanternFetch from './test-definitions/lantern-fetch.js';
 import lanternIdleCallbackLong from './test-definitions/lantern-idle-callback-long.js';
@@ -72,8 +72,7 @@ const smokeTests = [
   errorsExpiredSsl,
   errorsIframeExpiredSsl,
   errorsInfiniteLoop,
-  // TODO: restore when --enable-features=AutofillShowTypePredictions is not needed.
-  // formsAutoComplete,
+  formsAutoComplete,
   issuesMixedContent,
   lanternOnline,
   lanternSetTimeout,

package/lighthouse-core/audits/autocomplete.js

@@ -195,12 +195,12 @@ class AutocompleteAudit extends Audit {
       title: str_(UIStrings.title),
       failureTitle: str_(UIStrings.failureTitle),
       description: str_(UIStrings.description),
-      requiredArtifacts: ['FormElements'],
+      requiredArtifacts: ['Inputs'],
     };
   }
 
   /**
-   * @param {LH.Artifacts.FormInput} input
+   * @param {LH.Artifacts.InputElement} input
    * @return {{hasValidTokens: boolean, isValidOrder?: boolean}}
    */
   static checkAttributeValidity(input) {
@@ -224,47 +224,44 @@ class AutocompleteAudit extends Audit {
    * @return {LH.Audit.Product}
    */
   static audit(artifacts) {
-    const forms = artifacts.FormElements;
     const failingFormsData = [];
     const warnings = [];
     let foundPrediction = false;
-    for (const form of forms) {
-      for (const input of form.inputs) {
-        const validity = this.checkAttributeValidity(input);
-        if (validity.hasValidTokens && validity.isValidOrder) continue;
-        if (!input.autocomplete.prediction) continue;
-        if (noPrediction.includes(input.autocomplete.prediction) &&
-          !input.autocomplete.attribute) continue;
+    for (const input of artifacts.Inputs.inputs) {
+      const validity = this.checkAttributeValidity(input);
+      if (validity.hasValidTokens && validity.isValidOrder) continue;
+      if (!input.autocomplete.prediction) continue;
+      if (noPrediction.includes(input.autocomplete.prediction) &&
+        !input.autocomplete.attribute) continue;
 
-        foundPrediction = true;
+      foundPrediction = true;
 
-        // @ts-ignore
-        let suggestion = predictionTypesToTokens[input.autocomplete.prediction];
-        // This is here to satisfy typescript because the possible null value of autocomplete.attribute is not compatible with Audit details.
-        if (!input.autocomplete.attribute) input.autocomplete.attribute = '';
-        // Warning is created because while there is an autocomplete attribute, the autocomplete property does not exsist, thus the attribute's value is invalid.
-        if (input.autocomplete.attribute) {
-          warnings.push(str_(UIStrings.warningInvalid, {token: input.autocomplete.attribute,
-            snippet: input.node.snippet}));
-        }
-        if (validity.isValidOrder === false) {
-          warnings.push(str_(UIStrings.warningOrder, {tokens: input.autocomplete.attribute,
-            snippet: input.node.snippet}));
-          suggestion = UIStrings.reviewOrder;
-        }
-        // If the autofill prediction is not in our autofill suggestion mapping, then we warn
-        if (!(input.autocomplete.prediction in predictionTypesToTokens) &&
-            validity.isValidOrder) {
-          log.warn(`Autocomplete prediction (${input.autocomplete.prediction})
-             not found in our mapping`);
-          continue;
-        }
-        failingFormsData.push({
-          node: Audit.makeNodeItem(input.node),
-          suggestion: suggestion,
-          current: input.autocomplete.attribute,
-        });
+      // @ts-ignore
+      let suggestion = predictionTypesToTokens[input.autocomplete.prediction];
+      // This is here to satisfy typescript because the possible null value of autocomplete.attribute is not compatible with Audit details.
+      if (!input.autocomplete.attribute) input.autocomplete.attribute = '';
+      // Warning is created because while there is an autocomplete attribute, the autocomplete property does not exsist, thus the attribute's value is invalid.
+      if (input.autocomplete.attribute) {
+        warnings.push(str_(UIStrings.warningInvalid, {token: input.autocomplete.attribute,
+          snippet: input.node.snippet}));
       }
+      if (validity.isValidOrder === false) {
+        warnings.push(str_(UIStrings.warningOrder, {tokens: input.autocomplete.attribute,
+          snippet: input.node.snippet}));
+        suggestion = UIStrings.reviewOrder;
+      }
+      // If the autofill prediction is not in our autofill suggestion mapping, then we warn
+      if (!(input.autocomplete.prediction in predictionTypesToTokens) &&
+          validity.isValidOrder) {
+        log.warn(`Autocomplete prediction (${input.autocomplete.prediction})
+            not found in our mapping`);
+        continue;
+      }
+      failingFormsData.push({
+        node: Audit.makeNodeItem(input.node),
+        suggestion: suggestion,
+        current: input.autocomplete.attribute,
+      });
     }
 
     /** @type {LH.Audit.Details.Table['headings']} */

package/lighthouse-core/audits/byte-efficiency/uses-long-cache-ttl.js

@@ -181,6 +181,7 @@ class CacheHeaders extends Audit {
         cacheControl['must-revalidate'] ||
         cacheControl['no-cache'] ||
         cacheControl['no-store'] ||
+        cacheControl['stale-while-revalidate'] ||
         cacheControl['private'])) {
       return true;
     }

package/lighthouse-core/config/default-config.js

@@ -39,7 +39,7 @@ const UIStrings = {
   /** Title of the Accessibility category of audits. This section contains audits focused on making web content accessible to all users. Also used as a label of a score gauge; try to limit to 20 characters. */
   a11yCategoryTitle: 'Accessibility',
   /** Description of the Accessibility category. This is displayed at the top of a list of audits focused on making web content accessible to all users. No character length limits. 'improve the accessibility of your web app' becomes link text to additional documentation. */
-  a11yCategoryDescription: 'These checks highlight opportunities to [improve the accessibility of your web app](https://developers.google.com/web/fundamentals/accessibility). Only a subset of accessibility issues can be automatically detected so manual testing is also encouraged.',
+  a11yCategoryDescription: 'These checks highlight opportunities to [improve the accessibility of your web app](https://web.dev/lighthouse-accessibility/). Only a subset of accessibility issues can be automatically detected so manual testing is also encouraged.',
   /** Description of the Accessibility manual checks category. This description is displayed above a list of accessibility audits that currently have no automated test and so must be verified manually by the user. No character length limits. 'conducting an accessibility review' becomes link text to additional documentation. */
   a11yCategoryManualDescription: 'These items address areas which an automated testing tool cannot cover. Learn more in our guide on [conducting an accessibility review](https://developers.google.com/web/fundamentals/accessibility/how-to-review).',
   /** Title of the best practices section of the Accessibility category. Within this section are audits with descriptive titles that highlight common accessibility best practices. */
@@ -144,7 +144,7 @@ const defaultConfig = {
       'meta-elements',
       'script-elements',
       'iframe-elements',
-      'form-elements',
+      'inputs',
       'main-document-content',
       'global-listeners',
       'dobetterweb/doctype',

package/lighthouse-core/fraggle-rock/config/default-config.js

@@ -46,7 +46,7 @@ const artifacts = {
   DOMStats: '',
   EmbeddedContent: '',
   FontSize: '',
-  FormElements: '',
+  Inputs: '',
   FullPageScreenshot: '',
   GlobalListeners: '',
   IFrameElements: '',
@@ -96,7 +96,7 @@ const defaultConfig = {
     {id: artifacts.DOMStats, gatherer: 'dobetterweb/domstats'},
     {id: artifacts.EmbeddedContent, gatherer: 'seo/embedded-content'},
     {id: artifacts.FontSize, gatherer: 'seo/font-size'},
-    {id: artifacts.FormElements, gatherer: 'form-elements'},
+    {id: artifacts.Inputs, gatherer: 'inputs'},
     {id: artifacts.FullPageScreenshot, gatherer: 'full-page-screenshot'},
     {id: artifacts.GlobalListeners, gatherer: 'global-listeners'},
     {id: artifacts.IFrameElements, gatherer: 'iframe-elements'},
@@ -148,7 +148,7 @@ const defaultConfig = {
         artifacts.DOMStats,
         artifacts.EmbeddedContent,
         artifacts.FontSize,
-        artifacts.FormElements,
+        artifacts.Inputs,
         artifacts.GlobalListeners,
         artifacts.IFrameElements,
         artifacts.ImageElements,

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

@@ -114,7 +114,7 @@ function waitForFcp(session, pauseAfterFcpMs, maxWaitForFcpMs) {
  * `networkQuietThresholdMs` ms and a method to cancel internal network listeners/timeout.
  * @param {LH.Gatherer.FRProtocolSession} session
  * @param {NetworkMonitor} networkMonitor
- * @param {{networkQuietThresholdMs: number, busyEvent: NetworkMonitorEvent, idleEvent: NetworkMonitorEvent, isIdle(recorder: NetworkMonitor): boolean}} networkQuietOptions
+ * @param {{networkQuietThresholdMs: number, busyEvent: NetworkMonitorEvent, idleEvent: NetworkMonitorEvent, isIdle(recorder: NetworkMonitor): boolean, pretendDCLAlreadyFired?: boolean}} networkQuietOptions
  * @return {CancellableWait}
  */
 function waitForNetworkIdle(session, networkMonitor, networkQuietOptions) {
@@ -175,13 +175,20 @@ function waitForNetworkIdle(session, networkMonitor, networkQuietOptions) {
     networkMonitor.on('requestloaded', logStatus);
     networkMonitor.on(busyEvent, logStatus);
 
-    session.once('Page.domContentEventFired', domContentLoadedListener);
+    if (!networkQuietOptions.pretendDCLAlreadyFired) {
+      session.once('Page.domContentEventFired', domContentLoadedListener);
+    } else {
+      domContentLoadedListener();
+    }
+
     let canceled = false;
     cancel = () => {
       if (canceled) return;
       canceled = true;
-      idleTimeout && clearTimeout(idleTimeout);
-      session.off('Page.domContentEventFired', domContentLoadedListener);
+      if (idleTimeout) clearTimeout(idleTimeout);
+      if (!networkQuietOptions.pretendDCLAlreadyFired) {
+        session.off('Page.domContentEventFired', domContentLoadedListener);
+      }
       networkMonitor.removeListener(busyEvent, onBusy);
       networkMonitor.removeListener(idleEvent, onIdle);
       networkMonitor.removeListener('requeststarted', logStatus);

package/lighthouse-core/gather/gatherers/full-page-screenshot.js

@@ -5,11 +5,13 @@
  */
 'use strict';
 
-/* globals window document getBoundingClientRect */
+/* globals window document getBoundingClientRect requestAnimationFrame */
 
 const FRGatherer = require('../../fraggle-rock/gather/base-gatherer.js');
 const emulation = require('../../lib/emulation.js');
 const pageFunctions = require('../../lib/page-functions.js');
+const NetworkMonitor = require('../driver/network-monitor.js');
+const {waitForNetworkIdle} = require('../driver/wait-for-condition.js');
 
 // JPEG quality setting
 // Exploration and examples of reports using different quality settings: https://docs.google.com/document/d/1ZSffucIca9XDW2eEwfoevrk-OTl7WQFeMf0CgeJAA8M/edit#
@@ -25,7 +27,6 @@ function kebabCaseToCamelCase(str) {
 
 /* c8 ignore start */
 
-// eslint-disable-next-line no-inner-declarations
 function getObservedDeviceMetrics() {
   // Convert the Web API's kebab case (landscape-primary) to camel case (landscapePrimary).
   const screenOrientationType = kebabCaseToCamelCase(window.screen.orientation.type);
@@ -40,6 +41,12 @@ function getObservedDeviceMetrics() {
   };
 }
 
+function waitForDoubleRaf() {
+  return new Promise((resolve) => {
+    requestAnimationFrame(() => requestAnimationFrame(resolve));
+  });
+}
+
 /* c8 ignore stop */
 
 class FullPageScreenshot extends FRGatherer {
@@ -53,7 +60,7 @@ class FullPageScreenshot extends FRGatherer {
    * @return {Promise<number>}
    * @see https://bugs.chromium.org/p/chromium/issues/detail?id=770769
    */
-  async getMaxScreenshotHeight(context) {
+  async getMaxTextureSize(context) {
     return await context.driver.executionContext.evaluate(pageFunctions.getMaxTextureSize, {
       args: [],
       useIsolation: true,
@@ -67,7 +74,7 @@ class FullPageScreenshot extends FRGatherer {
    */
   async _takeScreenshot(context) {
     const session = context.driver.defaultSession;
-    const maxScreenshotHeight = await this.getMaxScreenshotHeight(context);
+    const maxTextureSize = await this.getMaxTextureSize(context);
     const metrics = await session.sendCommand('Page.getLayoutMetrics');
 
     // Width should match emulated width, without considering content overhang.
@@ -76,8 +83,19 @@ class FullPageScreenshot extends FRGatherer {
     // Note: If the page is zoomed, many assumptions fail.
     //
     // Height should be as tall as the content. So we use contentSize.height
-    const width = Math.min(metrics.layoutViewport.clientWidth, maxScreenshotHeight);
-    const height = Math.min(metrics.contentSize.height, maxScreenshotHeight);
+    const width = Math.min(metrics.layoutViewport.clientWidth, maxTextureSize);
+    const height = Math.min(metrics.contentSize.height, maxTextureSize);
+
+    // Setup network monitor before we change the viewport.
+    const networkMonitor = new NetworkMonitor(session);
+    const waitForNetworkIdleResult = waitForNetworkIdle(session, networkMonitor, {
+      pretendDCLAlreadyFired: true,
+      networkQuietThresholdMs: 1000,
+      busyEvent: 'network-critical-busy',
+      idleEvent: 'network-critical-idle',
+      isIdle: recorder => recorder.isCriticalIdle(),
+    });
+    await networkMonitor.enable();
 
     await session.sendCommand('Emulation.setDeviceMetricsOverride', {
       // If we're gathering with mobile screenEmulation on (overlay scrollbars, etc), continue to use that for this screenshot.
@@ -89,9 +107,17 @@ class FullPageScreenshot extends FRGatherer {
       screenOrientation: {angle: 0, type: 'portraitPrimary'},
     });
 
-    // TODO: elements collected earlier in gathering are likely to have been shifted by now.
-    // The lower in the page, the more likely (footer elements especially).
-    // https://github.com/GoogleChrome/lighthouse/issues/11118
+    // Now that the viewport is taller, give the page some time to fetch new resources that
+    // are now in view.
+    await Promise.race([
+      new Promise(resolve => setTimeout(resolve, 1000 * 5)),
+      waitForNetworkIdleResult.promise,
+    ]);
+    waitForNetworkIdleResult.cancel();
+    await networkMonitor.disable();
+
+    // Now that new resources are (probably) fetched, wait long enough for a layout.
+    await context.driver.executionContext.evaluate(waitForDoubleRaf, {args: []});
 
     const result = await session.sendCommand('Page.captureScreenshot', {
       format: 'jpeg',

package/lighthouse-core/gather/gatherers/inputs.js

@@ -0,0 +1,113 @@
+/**
+ * @license Copyright 2020 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.
+ */
+'use strict';
+
+/* global getNodeDetails */
+
+const FRGatherer = require('../../fraggle-rock/gather/base-gatherer.js');
+const pageFunctions = require('../../lib/page-functions.js');
+
+/* eslint-env browser, node */
+
+/**
+ * @return {LH.Artifacts['Inputs']}
+ */
+/* c8 ignore start */
+function collectElements() {
+  /** @type {LH.Artifacts.InputElement[]} */
+  const inputArtifacts = [];
+  /** @type {Map<HTMLFormElement, LH.Artifacts.FormElement>} */
+  const formElToArtifact = new Map();
+  /** @type {Map<HTMLLabelElement, LH.Artifacts.LabelElement>} */
+  const labelElToArtifact = new Map();
+
+  /** @type {HTMLFormElement[]} */
+  // @ts-expect-error - put into scope via stringification
+  const formEls = getElementsInDocument('form'); // eslint-disable-line no-undef
+  for (const formEl of formEls) {
+    formElToArtifact.set(formEl, {
+      id: formEl.id,
+      name: formEl.name,
+      autocomplete: formEl.autocomplete,
+      // @ts-expect-error - getNodeDetails put into scope via stringification
+      node: getNodeDetails(formEl),
+    });
+  }
+
+  /** @type {HTMLLabelElement[]} */
+  // @ts-expect-error - put into scope via stringification
+  const labelEls = getElementsInDocument('label'); // eslint-disable-line no-undef
+  for (const labelEl of labelEls) {
+    labelElToArtifact.set(labelEl, {
+      for: labelEl.htmlFor,
+      // @ts-expect-error - getNodeDetails put into scope via stringification
+      node: getNodeDetails(labelEl),
+    });
+  }
+
+  /** @type {HTMLInputElement[]} */
+  // @ts-expect-error - put into scope via stringification
+  const inputEls = getElementsInDocument('textarea, input, select'); // eslint-disable-line no-undef
+  for (const inputEl of inputEls) {
+    // If the input element is in a form (either because an ancestor element is <form> or the
+    // form= attribute is associated with a <form> element's id), this will be set.
+    const parentFormEl = inputEl.form;
+    const parentFormIndex = parentFormEl ?
+      [...formElToArtifact.keys()].indexOf(parentFormEl) :
+      undefined;
+    const labelIndices = [...inputEl.labels || []].map((labelEl) => {
+      return [...labelElToArtifact.keys()].indexOf(labelEl);
+    });
+
+    inputArtifacts.push({
+      parentFormIndex,
+      labelIndices,
+      id: inputEl.id,
+      name: inputEl.name,
+      type: inputEl.type,
+      placeholder: inputEl instanceof HTMLSelectElement ? undefined : inputEl.placeholder,
+      autocomplete: {
+        property: inputEl.autocomplete,
+        attribute: inputEl.getAttribute('autocomplete'),
+        // Requires `--enable-features=AutofillShowTypePredictions`.
+        prediction: inputEl.getAttribute('autofill-prediction'),
+      },
+      // @ts-expect-error - getNodeDetails put into scope via stringification
+      node: getNodeDetails(inputEl),
+    });
+  }
+
+  return {
+    inputs: inputArtifacts,
+    forms: [...formElToArtifact.values()],
+    labels: [...labelElToArtifact.values()],
+  };
+}
+/* c8 ignore stop */
+
+class Inputs extends FRGatherer {
+  /** @type {LH.Gatherer.GathererMeta} */
+  meta = {
+    supportedModes: ['snapshot', 'navigation'],
+  };
+
+  /**
+   * @param {LH.Gatherer.FRTransitionalContext} passContext
+   * @return {Promise<LH.Artifacts['Inputs']>}
+   */
+  async getArtifact(passContext) {
+    return passContext.driver.executionContext.evaluate(collectElements, {
+      args: [],
+      useIsolation: true,
+      deps: [
+        pageFunctions.getElementsInDocumentString,
+        pageFunctions.getNodeDetailsString,
+      ],
+    });
+  }
+}
+
+module.exports = Inputs;

package/lighthouse-core/lib/sentry.js

@@ -7,8 +7,10 @@
 
 const log = require('lighthouse-logger');
 
-/** @typedef {import('raven').CaptureOptions} CaptureOptions */
-/** @typedef {import('raven').ConstructorOptions} ConstructorOptions */
+/** @typedef {import('@sentry/node').Breadcrumb} Breadcrumb */
+/** @typedef {import('@sentry/node').NodeClient} NodeClient */
+/** @typedef {import('@sentry/node').NodeOptions} NodeOptions */
+/** @typedef {import('@sentry/node').Severity} Severity */
 
 const SENTRY_URL = 'https://a6bb0da87ee048cc9ae2a345fc09ab2e:63a7029f46f74265981b7e005e0f69f8@sentry.io/174697';
 
@@ -21,7 +23,7 @@ const SAMPLED_ERRORS = [
   // e.g.: {pattern: /No.*node with given id/, rate: 0.01},
 ];
 
-const noop = () => {};
+const noop = () => { };
 
 /**
  * A delegate for sentry so that environments without error reporting enabled will use
@@ -29,14 +31,14 @@ const noop = () => {};
  */
 const sentryDelegate = {
   init,
-  /** @type {(message: string, options?: CaptureOptions) => void} */
+  /** @type {(message: string, level?: Severity) => void} */
   captureMessage: noop,
-  /** @type {(breadcrumb: any) => void} */
+  /** @type {(breadcrumb: Breadcrumb) => void} */
   captureBreadcrumb: noop,
   /** @type {() => any} */
   getContext: noop,
-  /** @type {(error: Error, options?: CaptureOptions) => Promise<void>} */
-  captureException: async () => {},
+  /** @type {(error: Error, options: {level?: string, tags?: {[key: string]: any}, extra?: {[key: string]: any}}) => Promise<void>} */
+  captureException: async () => { },
   _shouldSample() {
     return SAMPLE_RATE >= Math.random();
   },
@@ -44,7 +46,7 @@ const sentryDelegate = {
 
 /**
  * When called, replaces noops with actual Sentry implementation.
- * @param {{url: string, flags: LH.CliFlags, environmentData: ConstructorOptions}} opts
+ * @param {{url: string, flags: LH.CliFlags, environmentData: NodeOptions}} opts
  */
 function init(opts) {
   // If error reporting is disabled, leave the functions as a noop
@@ -58,15 +60,25 @@ function init(opts) {
   }
 
   try {
-    const Sentry = require('raven');
-    const sentryConfig = Object.assign({}, opts.environmentData,
-      {captureUnhandledRejections: true});
-    Sentry.config(SENTRY_URL, sentryConfig).install();
+    const Sentry = require('@sentry/node');
+    Sentry.init({
+      ...opts.environmentData,
+      dsn: SENTRY_URL,
+    });
+
+    const extras = {
+      ...opts.flags.throttling,
+      channel: opts.flags.channel || 'cli',
+      url: opts.url,
+      formFactor: opts.flags.formFactor,
+      throttlingMethod: opts.flags.throttlingMethod,
+    };
+    Sentry.setExtras(extras);
 
     // Have each delegate function call the corresponding sentry function by default
     sentryDelegate.captureMessage = (...args) => Sentry.captureMessage(...args);
-    sentryDelegate.captureBreadcrumb = (...args) => Sentry.captureBreadcrumb(...args);
-    sentryDelegate.getContext = () => Sentry.getContext();
+    sentryDelegate.captureBreadcrumb = (...args) => Sentry.addBreadcrumb(...args);
+    sentryDelegate.getContext = () => extras;
 
     // Keep a record of exceptions per audit/gatherer so we can just report once
     const sentryExceptionCache = new Map();
@@ -107,21 +119,24 @@ function init(opts) {
         opts.tags.protocolMethod = err.protocolMethod;
       }
 
-      return new Promise(resolve => {
-        Sentry.captureException(err, opts, () => resolve());
+      Sentry.withScope(scope => {
+        if (opts.level) {
+          // @ts-expect-error - allow any string.
+          scope.setLevel(opts.level);
+        }
+        if (opts.tags) {
+          scope.setTags(opts.tags);
+        }
+        if (opts.extra) {
+          scope.setExtras(opts.extra);
+        }
+        Sentry.captureException(err);
       });
     };
-
-    const context = Object.assign({
-      url: opts.url,
-      formFactor: opts.flags.formFactor,
-      throttlingMethod: opts.flags.throttlingMethod,
-    }, opts.flags.throttling);
-    Sentry.mergeContext({extra: Object.assign({}, opts.environmentData.extra, context)});
   } catch (e) {
     log.warn(
       'sentry',
-      'Could not load raven library, errors will not be reported.'
+      'Could not load Sentry, errors will not be reported.'
     );
   }
 }

package/lighthouse-core/runner.js

@@ -149,7 +149,7 @@ class Runner {
       Sentry.captureBreadcrumb({
         message: 'Run started',
         category: 'lifecycle',
-        data: sentryContext?.extra,
+        data: sentryContext,
       });
 
       /** @type {LH.Artifacts} */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lighthouse",
-  "version": "9.3.1-dev.20220213",
+  "version": "9.4.0",
   "description": "Automated auditing, performance metrics, and best practices for the web.",
   "main": "./lighthouse-core/index.js",
   "bin": {
@@ -121,7 +121,6 @@
     "@types/lodash.set": "^4.3.6",
     "@types/node": "*",
     "@types/pako": "^1.0.1",
-    "@types/raven": "^2.5.1",
     "@types/resize-observer-browser": "^0.1.1",
     "@types/semver": "^5.5.0",
     "@types/tabulator-tables": "^4.9.1",
@@ -183,6 +182,7 @@
     "webtreemap-cdt": "^3.2.1"
   },
   "dependencies": {
+    "@sentry/node": "^6.17.4",
     "axe-core": "4.3.5",
     "chrome-launcher": "^0.15.0",
     "configstore": "^5.0.1",
@@ -204,7 +204,6 @@
     "open": "^8.4.0",
     "parse-cache-control": "1.0.1",
     "ps-list": "^8.0.0",
-    "raven": "^2.2.1",
     "robots-parser": "^3.0.0",
     "semver": "^5.3.0",
     "speedline-core": "^1.4.3",

package/report/renderer/dom.js

@@ -293,10 +293,8 @@ export class DOM {
    * @param {string} filename
    */
   saveFile(blob, filename) {
-    const ext = blob.type.match('json') ? '.json' : '.html';
-
     const a = this.createElement('a');
-    a.download = `${filename}${ext}`;
+    a.download = filename;
     this.safelySetBlobHref(a, blob);
     this._document.body.appendChild(a); // Firefox requires anchor to be in the DOM.
     a.click();