[console] Wrap Error.stack in a span/div when standard formatting fails

This CL wraps the linkified Error.stack DocumentFragment in a span or
div element when the "tryFormatAsError" method fails to extract and
render an Error object.

With this CL, we properly separate the different Errors in a
Error.cause chain where we fail to parse and format some of the
Errors.

[email protected]

Fixed: 395489589
Change-Id: Id0e4d610281e4e1f5cf7fef9d75a595ec545a6c5
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6276558
Reviewed-by: Philip Pfaffe <[email protected]>
Commit-Queue: Simon Zünd <[email protected]>

Author: szuend

front_end/panels/console/ConsoleViewMessage.ts

@@ -984,8 +984,11 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
       const error = SDK.RemoteObject.RemoteError.objectAsError(errorObj);
       const [details, cause] = await Promise.all([error.exceptionDetails(), error.cause()]);
       const errorElementType = includeCausedByPrefix ? 'div' : 'span';
-      const errorElement = this.tryFormatAsError(error.errorStack, details, errorElementType) ??
-          this.linkifyStringAsFragment(error.errorStack);
+      let errorElement = this.tryFormatAsError(error.errorStack, details, errorElementType);
+      if (!errorElement) {
+        errorElement = document.createElement(errorElementType);
+        errorElement.append(this.linkifyStringAsFragment(error.errorStack));
+      }
       if (includeCausedByPrefix) {
         errorElement.prepend('Caused by: ');
       }