[console] Append optional issue summary to error messages.

Note that this will also be sent as part of the prompt for Console
Insights and should make it more likely that Console Insights gives a
useful response for a failed fetch (due to CORS policy violations).

Currently the `issueSummary` information is only sent by Chrome when the
`DevToolsImprovedNetworkError` feature is enabled.

Fixed: 371523542
Screenshot: https://i.imgur.com/iUdAPNI.png
Change-Id: I7495a7727547167f40df66bce72a6131524c51ae
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6021664
Auto-Submit: Benedikt Meurer <[email protected]>
Commit-Queue: Danil Somsikov <[email protected]>
Reviewed-by: Danil Somsikov <[email protected]>

Author: bmeurer

front_end/panels/console/ConsoleViewMessage.test.ts

@@ -16,10 +16,35 @@ import {describeWithMockConnection} from '../../testing/MockConnection.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
+import * as Console from './console.js';
 // The css files aren't exported by the bundle, so we need to import it directly.
 // eslint-disable-next-line rulesdir/es_modules_import
 import consoleViewStyles from './consoleView.css.js';
 
+describe('ConsoleViewMessage', () => {
+  describe('concatErrorDescriptionAndIssueSummary', () => {
+    const {concatErrorDescriptionAndIssueSummary} = Console.ConsoleViewMessage;
+
+    it('correctly appends the issue summary in case of single line error descriptions', () => {
+      assert.strictEqual(
+          concatErrorDescriptionAndIssueSummary(
+              'TypeError: Failed to fetch',
+              'Access blocked by CORS policy: Cross origin requests are not allowed by request mode.'),
+          'TypeError: Failed to fetch. Access blocked by CORS policy: Cross origin requests are not allowed by request mode.',
+      );
+    });
+
+    it('correctly inserts the issue summary in case of multi-line error descriptions', () => {
+      assert.strictEqual(
+          concatErrorDescriptionAndIssueSummary(
+              'TypeError: Failed to fetch\n  at (index):25:5',
+              'Access blocked by CORS policy: Cross origin requests are not allowed by request mode.'),
+          'TypeError: Failed to fetch. Access blocked by CORS policy: Cross origin requests are not allowed by request mode.\n  at (index):25:5',
+      );
+    });
+  });
+});
+
 describeWithMockConnection('ConsoleViewMessage', () => {
   describe('anchor rendering', () => {
     it('links to the top frame for normal console message', () => {

front_end/panels/console/ConsoleViewMessage.ts

@@ -221,6 +221,24 @@ export const getMessageForElement = (element: Element): ConsoleViewMessage|undef
   return elementToMessage.get(element);
 };
 
+/**
+ * Combines the error description (essentially the `Error#stack` property value)
+ * with the `issueSummary`.
+ *
+ * @param description the `description` property of the `Error` remote object.
+ * @param issueSummary the optional `issueSummary` of the `exceptionMetaData`.
+ * @returns the enriched description.
+ * @see https://goo.gle/devtools-reduce-network-noise-design
+ */
+export const concatErrorDescriptionAndIssueSummary = (description: string, issueSummary: string): string => {
+  // Insert the issue summary right after the error message.
+  const pos = description.indexOf('\n');
+  const prefix = pos === -1 ? description : description.substring(0, pos);
+  const suffix = pos === -1 ? '' : description.substring(pos);
+  description = `${prefix}. ${issueSummary}${suffix}`;
+  return description;
+};
+
 // This value reflects the 18px min-height of .console-message, plus the
 // 1px border of .console-message-wrapper. Keep in sync with consoleView.css.
 const defaultConsoleRowHeight = 19;
@@ -1704,6 +1722,11 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
       return null;
     }
 
+    const issueSummary = exceptionDetails?.exceptionMetaData?.issueSummary;
+    if (typeof issueSummary === 'string') {
+      string = concatErrorDescriptionAndIssueSummary(string, issueSummary);
+    }
+
     const linkInfos = parseSourcePositionsFromErrorStack(runtimeModel, string);
     if (!linkInfos?.length) {
       return null;