Capture all Error console.log events (#17710)

* Capture all Error console.log events

* throw early

* Update metamask-ui.spec.js

* Update init-load-stats.js

test/e2e/helpers.js

@@ -52,7 +52,6 @@ async function withFixtures(options, testSuite) {
 
   let webDriver;
   let driver;
-  const errors = [];
   let failed = false;
   try {
     await ganacheServer.start(ganacheOptions);
@@ -117,7 +116,8 @@ async function withFixtures(options, testSuite) {
     webDriver = driver.driver;
 
     if (process.env.SELENIUM_BROWSER === 'chrome') {
-      await driver.checkBrowserForExceptions();
+      await driver.checkBrowserForExceptions(failOnConsoleError);
+      await driver.checkBrowserForConsoleErrors(failOnConsoleError);
     }
 
     let driverProxy;
@@ -145,21 +145,6 @@ async function withFixtures(options, testSuite) {
       mockServer,
       contractRegistry,
     });
-
-    if (process.env.SELENIUM_BROWSER === 'chrome') {
-      errors.concat(await driver.checkBrowserForConsoleErrors(driver));
-      if (errors.length) {
-        const errorReports = errors.map((err) => err.message);
-        const errorMessage = `Errors found in browser console:\n${errorReports.join(
-          '\n',
-        )}`;
-        if (failOnConsoleError) {
-          throw new Error(errorMessage);
-        } else {
-          console.error(new Error(errorMessage));
-        }
-      }
-    }
   } catch (error) {
     failed = true;
     if (webDriver) {
@@ -168,21 +153,13 @@ async function withFixtures(options, testSuite) {
       } catch (verboseReportError) {
         console.error(verboseReportError);
       }
-      if (
-        errors.length === 0 &&
-        driver.exceptions.length > 0 &&
-        failOnConsoleError
-      ) {
+      if (driver.errors.length > 0 || driver.exceptions.length > 0) {
         /**
          * Navigate to the background
          * forcing background exceptions to be captured
          * proving more helpful context
          */
         await driver.navigate(PAGES.BACKGROUND);
-        const errorMessage = `Errors found in browser console including the background:\n${driver.exceptions.join(
-          '\n',
-        )}`;
-        throw Error(errorMessage);
       }
     }
     throw error;

test/e2e/metamask-ui.spec.js

@@ -58,14 +58,7 @@ describe('MetaMask', function () {
 
   afterEach(async function () {
     if (process.env.SELENIUM_BROWSER === 'chrome') {
-      const errors = await driver.checkBrowserForConsoleErrors(driver);
-      if (errors.length) {
-        const errorReports = errors.map((err) => err.message);
-        const errorMessage = `Errors found in browser console:\n${errorReports.join(
-          '\n',
-        )}`;
-        console.error(new Error(errorMessage));
-      }
+      await driver.checkBrowserForConsoleErrors(false);
     }
     if (this.currentTest.state === 'failed') {
       failed = true;

test/e2e/mv3-perf-stats/init-load-stats.js

@@ -22,7 +22,7 @@ async function profilePageLoad() {
   const parsedLogs = {};
   try {
     await withFixtures(
-      { fixtures: new FixtureBuilder().build() },
+      { fixtures: new FixtureBuilder().build(), failOnConsoleError: false },
       async ({ driver }) => {
         await driver.delay(tinyDelayMs);
         await driver.navigate();

test/e2e/webdriver/driver.js

@@ -64,6 +64,7 @@ class Driver {
     this.extensionUrl = extensionUrl;
     this.timeout = timeout;
     this.exceptions = [];
+    this.errors = [];
     // The following values are found in
     // https://github.com/SeleniumHQ/selenium/blob/trunk/javascript/node/selenium-webdriver/lib/input.js#L50-L110
     // These should be replaced with string constants 'Enter' etc for playwright.
@@ -462,17 +463,17 @@ class Driver {
     return browserLogs;
   }
 
-  async checkBrowserForExceptions() {
+  async checkBrowserForExceptions(failOnConsoleError) {
     const { exceptions } = this;
     const cdpConnection = await this.driver.createCDPConnection('page');
-    await this.driver.onLogException(cdpConnection, function (exception) {
+    await this.driver.onLogException(cdpConnection, (exception) => {
       const { description } = exception.exceptionDetails.exception;
       exceptions.push(description);
+      logBrowserError(failOnConsoleError, description);
     });
   }
 
-  async checkBrowserForConsoleErrors() {
-    const ignoredLogTypes = ['WARNING'];
+  async checkBrowserForConsoleErrors(failOnConsoleError) {
     const ignoredErrorMessages = [
       // Third-party Favicon 404s show up as errors
       'favicon.ico - Failed to load resource: the server responded with a status of 404',
@@ -481,17 +482,31 @@ class Driver {
       // 4Byte
       'Failed to load resource: the server responded with a status of 502 (Bad Gateway)',
     ];
-    const browserLogs = await this.driver.manage().logs().get('browser');
-    const errorEntries = browserLogs.filter(
-      (entry) => !ignoredLogTypes.includes(entry.level.toString()),
-    );
-    const errorObjects = errorEntries.map((entry) => entry.toJSON());
-    return errorObjects.filter(
-      (entry) =>
-        !ignoredErrorMessages.some((message) =>
-          entry.message.includes(message),
-        ),
-    );
+    const { errors } = this;
+    const cdpConnection = await this.driver.createCDPConnection('page');
+    await this.driver.onLogEvent(cdpConnection, (event) => {
+      if (event.type === 'error') {
+        const eventDescription = event.args.filter(
+          (err) => err.description !== undefined,
+        );
+        const [{ description }] = eventDescription;
+        const ignore = ignoredErrorMessages.some((message) =>
+          description.includes(message),
+        );
+        if (!ignore) {
+          errors.push(description);
+          logBrowserError(failOnConsoleError, description);
+        }
+      }
+    });
+  }
+}
+
+function logBrowserError(failOnConsoleError, errorMessage) {
+  if (failOnConsoleError) {
+    throw new Error(errorMessage);
+  } else {
+    console.error(new Error(errorMessage));
   }
 }