Display anonymous frames as ignored if they call ignored code

Anonymous frames for JS builtins are displayed in error stack
traces in the console tab. Because they don't link to any code
we were not treated them as ignored, as they had no ignore listed
link to base this judgement on. Now we treat them as ignored if
they call ignored code.

Bug: 382422292
Change-Id: Ide669e69e22060cb0779d06a71dff8dce9962f67
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6129131
Reviewed-by: Benedikt Meurer <[email protected]>
Commit-Queue: Eric Leese <[email protected]>

Author: Eric Leese

front_end/panels/console/ConsoleViewMessage.test.ts

@@ -204,17 +204,23 @@ describeWithMockConnection('ConsoleViewMessage', () => {
       assert.isTrue(showLess.checkVisibility());
     }
 
-    function errorMessageForStack(stack: Protocol.Runtime.StackTrace) {
-      return [
+    function errorMessageForStack(stack: Protocol.Runtime.StackTrace, withBuiltinFrames?: boolean) {
+      const lines = [
         'Error:',
-        ...(stack.callFrames.map(
-            frame => `    at ${frame.functionName} (${frame.url}:${frame.lineNumber}:${frame.columnNumber})`)),
-      ].join('\n');
+        ...(stack.callFrames.flatMap(frame => {
+          const line = `    at ${frame.functionName} (${frame.url}:${frame.lineNumber}:${frame.columnNumber})`;
+          if (withBuiltinFrames) {
+            return [line, '    at JSON.parse (<anonymous>)'];
+          }
+          return [line];
+        })),
+      ];
+      return lines.join('\n');
     }
 
     function getCallFrames(element: HTMLElement): string[] {
       const results = [];
-      for (const line of element.querySelectorAll('.formatted-stack-frame')) {
+      for (const line of element.querySelectorAll('.formatted-stack-frame,.formatted-builtin-stack-frame')) {
         if (line.checkVisibility()) {
           results.push(line.textContent ?? 'Error: line was null or undefined');
         }
@@ -246,15 +252,16 @@ describeWithMockConnection('ConsoleViewMessage', () => {
       (showLess.querySelector('.link') as HTMLElement).click();
     }
 
-    async function createConsoleMessageWithIgnoreListing(ignoreListFn: (url: string) => Boolean): Promise<HTMLElement> {
+    async function createConsoleMessageWithIgnoreListing(
+        ignoreListFn: (url: string) => Boolean, withBuiltinFrames?: boolean): Promise<HTMLElement> {
       const target = createTarget();
       const runtimeModel = target.model(SDK.RuntimeModel.RuntimeModel);
       const stackTrace = createStackTrace([
         'USER_ID::userNestedFunction::http://example.com/script.js::40::15',
         'USER_ID::userFunction::http://example.com/script.js::10::2',
         'APP_ID::entry::http://example.com/app.js::25::10',
       ]);
-      const stackTraceMessage = errorMessageForStack(stackTrace);
+      const stackTraceMessage = errorMessageForStack(stackTrace, withBuiltinFrames);
       const messageDetails = {
         type: Protocol.Runtime.ConsoleAPICalledEventType.Error,
         stackTrace,
@@ -305,6 +312,20 @@ describeWithMockConnection('ConsoleViewMessage', () => {
       '    at userNestedFunction (/script.js:40:15)\n',
       '    at userFunction (/script.js:10:2)\n',
     ];
+    const EXPANDED_UNSTRUCTURED_WITH_BUILTIN = [
+      '    at userNestedFunction (/script.js:40:15)\n',
+      '    at JSON.parse (<anonymous>)\n',
+      '    at userFunction (/script.js:10:2)\n',
+      '    at JSON.parse (<anonymous>)\n',
+      '    at entry (/app.js:25:10)\n',
+      '    at JSON.parse (<anonymous>)',
+    ];
+    const COLLAPSED_UNSTRUCTURED_WITH_BUILTIN = [
+      '    at userNestedFunction (/script.js:40:15)\n',
+      '    at JSON.parse (<anonymous>)\n',
+      '    at userFunction (/script.js:10:2)\n',
+      '    at JSON.parse (<anonymous>)\n',
+    ];
     const EXPANDED_STRUCTURED = [
       '\nuserNestedFunction @ example.com/script.js:41',
       '\nuserFunction @ example.com/script.js:11',
@@ -360,5 +381,51 @@ describeWithMockConnection('ConsoleViewMessage', () => {
       assert.deepEqual(getStructuredCallFrames(element), COLLAPSED_STRUCTURED);
       assert.deepEqual(getCallFrames(element), COLLAPSED_UNSTRUCTURED);
     });
+
+    it('shows everything with no links when nothing is ignore listed, including builtin frames', async () => {
+      const element = await createConsoleMessageWithIgnoreListing(_ => false, true);
+      assertNoLinks(element);
+      assert.deepEqual(getCallFrames(element), EXPANDED_UNSTRUCTURED_WITH_BUILTIN);
+      assert.deepEqual(getStructuredCallFrames(element), []);
+      expandStructuredTrace(element);
+      assertNoLinks(element);
+      assert.deepEqual(getStructuredCallFrames(element), EXPANDED_STRUCTURED);
+    });
+
+    it('shows everything with no links when everything is ignore listed, including builtin frames', async () => {
+      const element = await createConsoleMessageWithIgnoreListing(_ => true, true);
+      assertNoLinks(element);
+      assert.deepEqual(getCallFrames(element), EXPANDED_UNSTRUCTURED_WITH_BUILTIN);
+      assert.deepEqual(getStructuredCallFrames(element), []);
+      expandStructuredTrace(element);
+      assertNoLinks(element);
+      assert.deepEqual(getStructuredCallFrames(element), EXPANDED_STRUCTURED);
+    });
+
+    it('shows expandable list when something is ignore listed, collapsing builtin frames', async () => {
+      const element = await createConsoleMessageWithIgnoreListing(url => url.includes('/app.js'), true);
+      assertShowAllLink(element);
+      assert.deepEqual(getStructuredCallFrames(element), []);
+      assert.deepEqual(getCallFrames(element), COLLAPSED_UNSTRUCTURED_WITH_BUILTIN);
+      expandIgnored(element);
+      assertShowLessLink(element);
+      assert.deepEqual(getCallFrames(element), EXPANDED_UNSTRUCTURED_WITH_BUILTIN);
+      collapseIgnored(element);
+      assertShowAllLink(element);
+
+      expandStructuredTrace(element);
+
+      assertShowAllLink(element);
+      assert.deepEqual(getStructuredCallFrames(element), COLLAPSED_STRUCTURED);
+      assert.deepEqual(getCallFrames(element), COLLAPSED_UNSTRUCTURED_WITH_BUILTIN);
+      expandIgnored(element);
+      assertShowLessLink(element);
+      assert.deepEqual(getCallFrames(element), EXPANDED_UNSTRUCTURED_WITH_BUILTIN);
+      assert.deepEqual(getStructuredCallFrames(element), EXPANDED_STRUCTURED);
+      collapseIgnored(element);
+      assertShowAllLink(element);
+      assert.deepEqual(getStructuredCallFrames(element), COLLAPSED_STRUCTURED);
+      assert.deepEqual(getCallFrames(element), COLLAPSED_UNSTRUCTURED_WITH_BUILTIN);
+    });
   });
 });

front_end/panels/console/ConsoleViewMessage.ts

@@ -1739,7 +1739,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
 
     for (let i = 0; i < linkInfos.length; ++i) {
       const newline = i < linkInfos.length - 1 ? '\n' : '';
-      const {line, link} = linkInfos[i];
+      const {line, link, isCallFrame} = linkInfos[i];
       // Syntax errors don't have a stack frame that points to the source position
       // where the error occurred. We use the source location from the
       // exceptionDetails and append it to the end of the message instead.
@@ -1754,11 +1754,17 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
         formattedResult.append(newline);
         continue;
       }
-      if (!link) {
+      if (!isCallFrame) {
         formattedResult.appendChild(this.linkifyStringAsFragment(`${line}${newline}`));
         continue;
       }
       const formattedLine = document.createElement('span');
+      if (!link) {
+        formattedLine.appendChild(this.linkifyStringAsFragment(`${line}${newline}`));
+        formattedLine.classList.add('formatted-builtin-stack-frame');
+        formattedResult.appendChild(formattedLine);
+        continue;
+      }
       const suffix = `${link.suffix}${newline}`;
       formattedLine.appendChild(this.linkifyStringAsFragment(link.prefix));
       const scriptLocationLink = this.linkifier.linkifyScriptLocation(

front_end/panels/console/ErrorStackParser.test.ts

@@ -320,5 +320,25 @@ describe('ErrorStackParser', () => {
       assert.isUndefined(parsedFrames[2].link);
       assert.strictEqual(parsedFrames[3].link?.scriptId, sid('30'));
     });
+
+    it('combines builtin frames', () => {
+      const parsedFrames = parseErrorStack(`Error: some error
+        at foo (http://example.com/a.js:6:3)
+        at Array.forEach (<anonymous>)
+        at JSON.parse (<anonymous>)
+        at bar (http://example.com/b.js:43:14)`);
+      assert.exists(parsedFrames);
+
+      assert.isUndefined(parsedFrames[0].link);
+      assert.isUndefined(parsedFrames[0].isCallFrame);
+      assert.strictEqual(parsedFrames[1].link?.url, 'http://example.com/a.js' as Platform.DevToolsPath.UrlString);
+      assert.isTrue(parsedFrames[1].isCallFrame);
+      assert.isUndefined(parsedFrames[2].link);
+      assert.isTrue(parsedFrames[2].isCallFrame);
+      assert.strictEqual(
+          parsedFrames[2].line, '        at Array.forEach (<anonymous>)\n        at JSON.parse (<anonymous>)');
+      assert.strictEqual(parsedFrames[3].link?.url, 'http://example.com/b.js' as Platform.DevToolsPath.UrlString);
+      assert.isTrue(parsedFrames[3].isCallFrame);
+    });
   });
 });

front_end/panels/console/ErrorStackParser.ts

@@ -9,6 +9,7 @@ import type * as Protocol from '../../generated/protocol.js';
 
 export interface ParsedErrorFrame {
   line: string;
+  isCallFrame?: boolean;
   link?: {
     url: Platform.DevToolsPath.UrlString,
     prefix: string,
@@ -41,13 +42,14 @@ export function parseSourcePositionsFromErrorStack(
   for (const line of lines) {
     const match = /^\s*at\s(async\s)?/.exec(line);
     if (!match) {
-      if (linkInfos.length && linkInfos[linkInfos.length - 1].link) {
+      if (linkInfos.length && linkInfos[linkInfos.length - 1].isCallFrame) {
         return null;
       }
       linkInfos.push({line});
       continue;
     }
 
+    const isCallFrame = true;
     let left = match[0].length;
     let right = line.length;
     let enclosedInBraces = false;
@@ -74,7 +76,12 @@ export function parseSourcePositionsFromErrorStack(
     const linkCandidate = line.substring(left, right);
     const splitResult = Common.ParsedURL.ParsedURL.splitLineAndColumn(linkCandidate);
     if (splitResult.url === '<anonymous>') {
-      linkInfos.push({line});
+      if (linkInfos.length && linkInfos[linkInfos.length - 1].isCallFrame && !linkInfos[linkInfos.length - 1].link) {
+        // Combine builtin frames.
+        linkInfos[linkInfos.length - 1].line += `\n${line}`;
+      } else {
+        linkInfos.push({line, isCallFrame});
+      }
       continue;
     }
     let url = parseOrScriptMatch(debuggerModel, splitResult.url);
@@ -87,6 +94,7 @@ export function parseSourcePositionsFromErrorStack(
 
     linkInfos.push({
       line,
+      isCallFrame,
       link: {
         url,
         prefix: line.substring(0, left),

front_end/panels/console/consoleView.css

@@ -389,6 +389,12 @@
   .formatted-stack-frame:has(.ignore-list-link) {
     display: var(--display-ignored-formatted-stack-frame);
     opacity: 60%;
+
+    /* Subsequent builtin stack frames are also treated as ignored */
+    & + .formatted-builtin-stack-frame {
+      display: var(--display-ignored-formatted-stack-frame);
+      opacity: 60%;
+    }
   }
 }