feat(console): expose stack trace for console messages (#6445)

docs/api.md

@@ -214,6 +214,7 @@
 - [class: ConsoleMessage](#class-consolemessage)
   * [consoleMessage.args()](#consolemessageargs)
   * [consoleMessage.location()](#consolemessagelocation)
+  * [consoleMessage.stackTrace()](#consolemessagestacktrace)
   * [consoleMessage.text()](#consolemessagetext)
   * [consoleMessage.type()](#consolemessagetype)
 - [class: Frame](#class-frame)
@@ -2752,6 +2753,12 @@ const puppeteer = require('puppeteer');
   - `lineNumber` <[number]> 0-based line number in the resource if known or `undefined` otherwise.
   - `columnNumber` <[number]> 0-based column number in the resource if known or `undefined` otherwise.
 
+#### consoleMessage.stackTrace()
+- returns: <[Array]<[Object]>>
+  - `url` <[string]> URL of the resource if known or `undefined` otherwise.
+  - `lineNumber` <[number]> 0-based line number in the resource if known or `undefined` otherwise.
+  - `columnNumber` <[number]> 0-based column number in the resource if known or `undefined` otherwise.
+
 #### consoleMessage.text()
 - returns: <[string]>
 

new-docs/puppeteer.consolemessage._constructor_.md

@@ -9,7 +9,7 @@ Constructs a new instance of the `ConsoleMessage` class
 <b>Signature:</b>
 
 ```typescript
-constructor(type: ConsoleMessageType, text: string, args: JSHandle[], location?: ConsoleMessageLocation);
+constructor(type: ConsoleMessageType, text: string, args: JSHandle[], stackTraceLocations: ConsoleMessageLocation[]);
 ```
 
 ## Parameters
@@ -19,5 +19,5 @@ constructor(type: ConsoleMessageType, text: string, args: JSHandle[], location?:
 |  type | [ConsoleMessageType](./puppeteer.consolemessagetype.md) |  |
 |  text | string |  |
 |  args | [JSHandle](./puppeteer.jshandle.md)<!-- -->\[\] |  |
-|  location | [ConsoleMessageLocation](./puppeteer.consolemessagelocation.md) |  |
+|  stackTraceLocations | [ConsoleMessageLocation](./puppeteer.consolemessagelocation.md)<!-- -->\[\] |  |
 

new-docs/puppeteer.consolemessage.md

@@ -16,7 +16,7 @@ export declare class ConsoleMessage
 
 |  Constructor | Modifiers | Description |
 |  --- | --- | --- |
-|  [(constructor)(type, text, args, location)](./puppeteer.consolemessage._constructor_.md) |  | Constructs a new instance of the <code>ConsoleMessage</code> class |
+|  [(constructor)(type, text, args, stackTraceLocations)](./puppeteer.consolemessage._constructor_.md) |  | Constructs a new instance of the <code>ConsoleMessage</code> class |
 
 ## Methods
 
@@ -24,6 +24,7 @@ export declare class ConsoleMessage
 |  --- | --- | --- |
 |  [args()](./puppeteer.consolemessage.args.md) |  |  |
 |  [location()](./puppeteer.consolemessage.location.md) |  |  |
+|  [stackTrace()](./puppeteer.consolemessage.stacktrace.md) |  |  |
 |  [text()](./puppeteer.consolemessage.text.md) |  |  |
 |  [type()](./puppeteer.consolemessage.type.md) |  |  |
 

new-docs/puppeteer.consolemessage.stacktrace.md

@@ -0,0 +1,17 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [puppeteer](./puppeteer.md) &gt; [ConsoleMessage](./puppeteer.consolemessage.md) &gt; [stackTrace](./puppeteer.consolemessage.stacktrace.md)
+
+## ConsoleMessage.stackTrace() method
+
+<b>Signature:</b>
+
+```typescript
+stackTrace(): ConsoleMessageLocation[];
+```
+<b>Returns:</b>
+
+[ConsoleMessageLocation](./puppeteer.consolemessagelocation.md)<!-- -->\[\]
+
+The array of locations on the stack of the console message.
+

src/common/ConsoleMessage.ts

@@ -68,7 +68,7 @@ export class ConsoleMessage {
   private _type: ConsoleMessageType;
   private _text: string;
   private _args: JSHandle[];
-  private _location: ConsoleMessageLocation;
+  private _stackTraceLocations: ConsoleMessageLocation[];
 
   /**
    * @public
@@ -77,12 +77,12 @@ export class ConsoleMessage {
     type: ConsoleMessageType,
     text: string,
     args: JSHandle[],
-    location: ConsoleMessageLocation = {}
+    stackTraceLocations: ConsoleMessageLocation[]
   ) {
     this._type = type;
     this._text = text;
     this._args = args;
-    this._location = location;
+    this._stackTraceLocations = stackTraceLocations;
   }
 
   /**
@@ -110,6 +110,13 @@ export class ConsoleMessage {
    * @returns The location of the console message.
    */
   location(): ConsoleMessageLocation {
-    return this._location;
+    return this._stackTraceLocations.length ? this._stackTraceLocations[0] : {};
+  }
+
+  /**
+   * @returns The array of locations on the stack of the console message.
+   */
+  stackTrace(): ConsoleMessageLocation[] {
+    return this._stackTraceLocations;
   }
 }

src/common/Page.ts

@@ -605,7 +605,7 @@ export class Page extends EventEmitter {
     if (source !== 'worker')
       this.emit(
         PageEmittedEvents.Console,
-        new ConsoleMessage(level, text, [], { url, lineNumber })
+        new ConsoleMessage(level, text, [], [{ url, lineNumber }])
       );
   }
 
@@ -1230,19 +1230,21 @@ export class Page extends EventEmitter {
       if (remoteObject.objectId) textTokens.push(arg.toString());
       else textTokens.push(helper.valueFromRemoteObject(remoteObject));
     }
-    const location =
+    const stackTraceLocations = [];
-      stackTrace && stackTrace.callFrames.length
+    if (stackTrace) {
-        ? {
+      for (const callFrame of stackTrace.callFrames) {
-            url: stackTrace.callFrames[0].url,
+        stackTraceLocations.push({
-            lineNumber: stackTrace.callFrames[0].lineNumber,
+          url: callFrame.url,
-            columnNumber: stackTrace.callFrames[0].columnNumber,
+          lineNumber: callFrame.lineNumber,
-          }
+          columnNumber: callFrame.columnNumber,
-        : {};
+        });
+      }
+    }
     const message = new ConsoleMessage(
       type,
       textTokens.join(' '),
       args,
-      location
+      stackTraceLocations
     );
     this.emit(PageEmittedEvents.Console, message);
   }

test/assets/consolelog.html

@@ -5,7 +5,13 @@
   </head>
   <body>
     <script>
-      console.log('yellow')
+      function foo() {
+        console.log('yellow')
+      }
+      function bar() {
+        foo();
+      }
+      bar();
     </script>
   </body>
 </html>

test/page.spec.ts

@@ -548,7 +548,7 @@ describe('Page', function () {
         lineNumber: undefined,
       });
     });
-    it('should have location for console API calls', async () => {
+    it('should have location and stack trace for console API calls', async () => {
       const { page, server, isChrome } = getTestState();
 
       await page.goto(server.EMPTY_PAGE);
@@ -560,9 +560,26 @@ describe('Page', function () {
       expect(message.type()).toBe('log');
       expect(message.location()).toEqual({
         url: server.PREFIX + '/consolelog.html',
-        lineNumber: 7,
+        lineNumber: 8,
-        columnNumber: isChrome ? 14 : 6, // console.|log vs |console.log
+        columnNumber: isChrome ? 16 : 8, // console.|log vs |console.log
       });
+      expect(message.stackTrace()).toEqual([
+        {
+          url: server.PREFIX + '/consolelog.html',
+          lineNumber: 8,
+          columnNumber: isChrome ? 16 : 8, // console.|log vs |console.log
+        },
+        {
+          url: server.PREFIX + '/consolelog.html',
+          lineNumber: 11,
+          columnNumber: 8,
+        },
+        {
+          url: server.PREFIX + '/consolelog.html',
+          lineNumber: 13,
+          columnNumber: 6,
+        },
+      ]);
     });
     // @see https://github.com/puppeteer/puppeteer/issues/3865
     it('should not throw when there are console messages in detached iframes', async () => {