core(tsc): fix OptimizedImages type; type check dep audits

lighthouse-core/audits/byte-efficiency/uses-optimized-images.js

@@ -7,7 +7,6 @@
  * @fileoverview This audit determines if the images used are sufficiently larger
  * than JPEG compressed images without metadata at quality 85.
  */
-// @ts-nocheck - TODO(bckenny)
 'use strict';
 
 const ByteEfficiencyAudit = require('./byte-efficiency-audit');
@@ -47,15 +46,16 @@ class UsesOptimizedImages extends ByteEfficiencyAudit {
   static audit_(artifacts) {
     const images = artifacts.OptimizedImages;
 
-    const failedImages = [];
+    /** @type {Array<{url: string, fromProtocol: boolean, isCrossOrigin: boolean, totalBytes: number, wastedBytes: number}>} */
     const results = [];
-    images.forEach(image => {
+    const failedImages = [];
+    for (const image of images) {
       if (image.failed) {
         failedImages.push(image);
-        return;
+        continue;
       } else if (/(jpeg|bmp)/.test(image.mimeType) === false ||
                  image.originalSize < image.jpegSize + IGNORE_THRESHOLD_IN_BYTES) {
-        return;
+        continue;
       }
 
       const url = URL.elideDataURI(image.url);
@@ -68,7 +68,7 @@ class UsesOptimizedImages extends ByteEfficiencyAudit {
         totalBytes: image.originalSize,
         wastedBytes: jpegSavings.bytes,
       });
-    });
+    }
 
     let debugString;
     if (failedImages.length) {

lighthouse-core/audits/byte-efficiency/uses-webp-images.js

@@ -6,7 +6,6 @@
 /*
  * @fileoverview This audit determines if the images could be smaller when compressed with WebP.
  */
-// @ts-nocheck - TODO(bckenny)
 'use strict';
 
 const ByteEfficiencyAudit = require('./byte-efficiency-audit');
@@ -47,14 +46,15 @@ class UsesWebPImages extends ByteEfficiencyAudit {
   static audit_(artifacts) {
     const images = artifacts.OptimizedImages;
 
-    const failedImages = [];
+    /** @type {Array<{url: string, fromProtocol: boolean, isCrossOrigin: boolean, totalBytes: number, wastedBytes: number}>} */
     const results = [];
-    images.forEach(image => {
+    const failedImages = [];
+    for (const image of images) {
       if (image.failed) {
         failedImages.push(image);
-        return;
+        continue;
       } else if (image.originalSize < image.webpSize + IGNORE_THRESHOLD_IN_BYTES) {
-        return;
+        continue;
       }
 
       const url = URL.elideDataURI(image.url);
@@ -67,7 +67,7 @@ class UsesWebPImages extends ByteEfficiencyAudit {
         totalBytes: image.originalSize,
         wastedBytes: webpSavings.bytes,
       });
-    });
+    }
 
     let debugString;
     if (failedImages.length) {

lighthouse-core/gather/gatherers/dobetterweb/optimized-images.js

@@ -20,12 +20,14 @@ const WEBP_QUALITY = 0.85;
 
 const MINIMUM_IMAGE_SIZE = 4096; // savings of <4 KB will be ignored in the audit anyway
 
+/** @typedef {{isSameOrigin: boolean, isBase64DataUri: boolean, requestId: string, url: string, mimeType: string, resourceSize: number}} SimplifiedNetworkRecord */
+
 /* global document, Image, atob */
 
 /**
  * Runs in the context of the browser
  * @param {string} url
- * @return {Promise<{jpeg: Object, webp: Object}>}
+ * @return {Promise<{jpeg: {base64: number, binary: number}, webp: {base64: number, binary: number}}>}
  */
 /* istanbul ignore next */
 function getOptimizedNumBytes(url) {
@@ -40,6 +42,7 @@ function getOptimizedNumBytes(url) {
     /**
      * @param {'image/jpeg'|'image/webp'} type
      * @param {number} quality
+     * @return {{base64: number, binary: number}}
      */
     function getTypeStats(type, quality) {
       const dataURI = canvas.toDataURL(type, quality);
@@ -74,6 +77,7 @@ class OptimizedImages extends Gatherer {
    * @return {Array<SimplifiedNetworkRecord>}
    */
   static filterImageRequests(pageUrl, networkRecords) {
+    /** @type {Set<string>} */
     const seenUrls = new Set();
     return networkRecords.reduce((prev, record) => {
       if (seenUrls.has(record._url) || !record.finished) {
@@ -169,36 +173,40 @@ class OptimizedImages extends Gatherer {
    * @param {Array<SimplifiedNetworkRecord>} imageRecords
    * @return {Promise<LH.Artifacts['OptimizedImages']>}
    */
-  computeOptimizedImages(driver, imageRecords) {
+  async computeOptimizedImages(driver, imageRecords) {
     /** @type {LH.Artifacts['OptimizedImages']} */
-    const result = [];
-
-    return imageRecords.reduce((promise, record) => {
-      return promise.then(results => {
-        return this.calculateImageStats(driver, record)
-          .catch(err => {
-            // Track this with Sentry since these errors aren't surfaced anywhere else, but we don't
-            // want to tank the entire run due to a single image.
-            // @ts-ignore TODO(bckenny): Sentry type checking
-            Sentry.captureException(err, {
-              tags: {gatherer: 'OptimizedImages'},
-              extra: {imageUrl: URL.elideDataURI(record.url)},
-              level: 'warning',
-            });
-            return {failed: true, err};
-          })
-          .then(stats => {
-            if (!stats) {
-              return results;
-            }
-
-            return results.concat(Object.assign(stats, record));
-          });
-      });
-    }, Promise.resolve(result));
-  }
+    const results = [];
 
-  /** @typedef {{isSameOrigin: boolean, isBase64DataUri: boolean, requestId: string, url: string, mimeType: string, resourceSize: number}} SimplifiedNetworkRecord */
+    for (const record of imageRecords) {
+      try {
+        const stats = await this.calculateImageStats(driver, record);
+        if (stats === null) {
+          continue;
+        }
+
+        /** @type {LH.Artifacts.OptimizedImage} */
+        // @ts-ignore TODO(bckenny): fix browserify/Object.spread. See https://github.com/GoogleChrome/lighthouse/issues/5152
+        const image = Object.assign({failed: false}, stats, record);
+        results.push(image);
+      } catch (err) {
+        // Track this with Sentry since these errors aren't surfaced anywhere else, but we don't
+        // want to tank the entire run due to a single image.
+        // @ts-ignore TODO(bckenny): Sentry type checking
+        Sentry.captureException(err, {
+          tags: {gatherer: 'OptimizedImages'},
+          extra: {imageUrl: URL.elideDataURI(record.url)},
+          level: 'warning',
+        });
+
+        /** @type {LH.Artifacts.OptimizedImageError} */
+        // @ts-ignore TODO(bckenny): see above browserify/Object.spread TODO.
+        const imageError = Object.assign({failed: true, errMsg: err.message}, record);
+        results.push(imageError);
+      }
+    }
+
+    return results;
+  }
 
   /**
    * @param {LH.Gatherer.PassContext} passContext

lighthouse-core/test/gather/gatherers/dobetterweb/optimized-images-test.js

@@ -157,7 +157,7 @@ describe('Optimized images', () => {
 
       assert.equal(artifact.length, 4);
       assert.ok(failed, 'passed along failure');
-      assert.ok(/whoops/.test(failed.err.message), 'passed along error message');
+      assert.ok(/whoops/.test(failed.errMsg), 'passed along error message');
     });
   });
 

typings/artifacts.d.ts

@@ -71,7 +71,7 @@ declare global {
       /** The status code of the attempted load of the page while network access is disabled. */
       Offline: number;
       /** Size and compression opportunity information for all the images in the page. */
-      OptimizedImages: Artifacts.OptimizedImage[];
+      OptimizedImages: Array<Artifacts.OptimizedImage | Artifacts.OptimizedImageError>;
       /** HTML snippets from any password inputs that prevent pasting. */
       PasswordInputsWithPreventedPaste: {snippet: string}[];
       /** Size info of all network records sent without compression and their size after gzipping. */
@@ -234,18 +234,30 @@ declare global {
       }
 
       export interface OptimizedImage {
+        failed: false;
+        fromProtocol: boolean;
+        originalSize: number;
+        jpegSize: number;
+        webpSize: number;
+
+        isSameOrigin: boolean;
+        isBase64DataUri: boolean;
+        requestId: string;
+        url: string;
+        mimeType: string;
+        resourceSize: number;
+      }
+
+      export interface OptimizedImageError {
+        failed: true;
+        errMsg: string;
+
         isSameOrigin: boolean;
         isBase64DataUri: boolean;
         requestId: string;
         url: string;
         mimeType: string;
         resourceSize: number;
-        fromProtocol?: boolean;
-        originalSize?: number;
-        jpegSize?: number;
-        webpSize?: number;
-        failed?: boolean;
-        err?: Error;
       }
 
       export interface TagBlockingFirstPaint {