1413050 - Improve UX for expanding stacks when logging Error objects with console.error

Status: NEW

(DevTools :: Console, enhancement, P2)

Description

[:Harald Kirschner :digitarald]

Attachment: ScreenFlow.gif

See attached video for confusing behaviour of error objects logged with console.error

Top level stack trace that can be expanded and an error object with stack trace shown by default that can be expanded as object.

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

See https://github.com/devtools-html/devtools-core/issues/452 and https://github.com/devtools-html/devtools-core/issues/448

Comment 2

[:Harald Kirschner :digitarald]

Definitely a bunch of issues here that are related to the reps:

1) Formatting of Error objects when logged
2) Clash of console.error and Error stack traces
3) Sourcemaps in errors

Comment 3

[Nicolas Chevobbe [:nchevobbe]]

(In reply to :Harald Kirschner :digitarald from comment #2)

Definitely a bunch of issues here that are related to the reps:

1. Formatting of Error objects when logged
2. Clash of console.error and Error stack traces
3. Sourcemaps in errors

1. and 3. are now fixed.

Comment 4

[Nicolas Chevobbe [:nchevobbe]]

We talked with Florens about stacktraces feeling a bit disconnected from the error message when the message is very long.
The thing is that we use a very generic arrow icon (▶︎) to indicate the stacktrace can be expanded. But it's the same as group and objects, which at least are close to the object they are impacting.

One idea would be to move the "global" stacktrace (i.e. the one from the exception/console.error itself, not the one from the Error message), to the right, below the location element.

Error: BOOM                                     react-dom.js
  a   ComponentA.js                        endWork  react.js     
  b   ComponentB.js
  c   ComponentC.js