Capture and log page errors

__tests__/plugins/browser-console.test.ts

@@ -55,4 +55,49 @@ describe('BrowserConsole', () => {
     expect(testMessage.timestamp).toBeDefined();
     expect(testMessage.step).toEqual({ name: 'step-name', index: 0 });
   });
+
+  it('should capture browser page errors', async () => {
+    const driver = await Gatherer.setupDriver({ wsEndpoint });
+    const browserConsole = new BrowserConsole(driver);
+    const { page } = driver;
+    browserConsole.start();
+    await page.goto(server.TEST_PAGE);
+    browserConsole._currentStep = { name: 'step-name', index: 0 };
+    const bodyHandle = await page.$('body');
+    try {
+      await page.evaluate(
+        ([body]) => {
+          body.innerHTML = `<img
+        src="imagefound.gif"
+        onError="that.onerror=null;this.src='imagenotfound.gif';"
+      />`;
+        },
+        [bodyHandle]
+      );
+    } catch (e) {}
+
+    await page.waitForTimeout(1000);
+
+    const messages = browserConsole.stop();
+    await Gatherer.stop();
+    const notFoundMessage = messages.find(
+      m => m.text.indexOf('Failed to load resource:') >= 0
+    );
+    expect(notFoundMessage.text).toEqual(
+      `Failed to load resource: the server responded with a status of 404 (Not Found)`
+    );
+    expect(notFoundMessage.type).toEqual('error');
+    expect(notFoundMessage.timestamp).toBeDefined();
+    expect(notFoundMessage.step).toEqual({ name: 'step-name', index: 0 });
+
+    const referenceError = messages.find(
+      m => m.text.indexOf('that is not defined') >= 0
+    );
+    expect(referenceError.error.stack).toContain(
+      `ReferenceError: that is not defined\n    at HTMLImageElement.onerror`
+    );
+    expect(referenceError.type).toEqual('error');
+    expect(referenceError.timestamp).toBeDefined();
+    expect(referenceError.step).toEqual({ name: 'step-name', index: 0 });
+  });
 });

src/common_types.ts

@@ -119,6 +119,7 @@ export type NetworkInfo = {
 export type BrowserMessage = {
   text: string;
   type: string;
+  error?: Error;
 } & DefaultPluginOutput;
 
 export type PluginOutput = {

src/plugins/browser-console.ts

@@ -26,6 +26,7 @@
 import { BrowserMessage, Driver } from '../common_types';
 import { Step } from '../dsl';
 import { getTimestamp } from '../helpers';
+import { log } from '../core/logger';
 
 const defaultMessageLimit = 1000;
 
@@ -48,18 +49,41 @@ export class BrowserConsole {
         type,
         step: { name, index },
       });
-      if (this.messages.length > defaultMessageLimit) {
-        this.messages.splice(0, 1);
-      }
+
+      this.enforceMessagesLimit();
+    }
+  };
+
+  private pageErrorEventListener = (error: Error) => {
+    if (!this._currentStep) {
+      return;
     }
+    const { name, index } = this._currentStep;
+    this.messages.push({
+      timestamp: getTimestamp(),
+      text: error.message,
+      type: 'error',
+      step: { name, index },
+      error: error,
+    });
+
+    this.enforceMessagesLimit();
   };
 
+  private enforceMessagesLimit() {
+    if (this.messages.length > defaultMessageLimit) {
+      this.messages.splice(0, 1);
+    }
+  }
+
   start() {
     this.driver.page.on('console', this.consoleEventListener);
+    this.driver.page.on('pageerror', this.pageErrorEventListener);
   }
 
   stop() {
     this.driver.page.off('console', this.consoleEventListener);
+    this.driver.page.off('pageerror', this.pageErrorEventListener);
     return this.messages;
   }
 }

src/reporters/json.ts

@@ -483,13 +483,17 @@ export default class JSONReporter extends BaseReporter {
           });
         }
         if (browserconsole) {
-          browserconsole.forEach(({ timestamp, text, type, step }) => {
+          browserconsole.forEach(({ timestamp, text, type, step, error }) => {
             this.writeJSON({
               type: 'journey/browserconsole',
               journey,
               timestamp,
               step,
-              payload: { text, type } as Payload,
+              payload: {
+                text,
+                type,
+                stacktrace: error?.stack.toString(),
+              } as Payload,
             });
           });
         }
@@ -554,7 +558,7 @@ export default class JSONReporter extends BaseReporter {
     });
   }
 
-  // Writes a structered synthetics event
+  // Writes a structured synthetics event
   // Note that blob is ultimately stored in ES as a base64 encoded string. You must base 64 encode
   // it before passing it into this function!
   // The payload field is an un-indexed field with no ES mapping, so users can put arbitary structured