1390768 - Use debugger stacktrace component in the Console

Status: RESOLVED FIXED

(DevTools :: Console, enhancement, P1)

Description

[Nicolas Chevobbe [:nchevobbe]]

The debugger implemented really nice ideas to have better, more understandable stacktraces (see https://hacks.mozilla.org/2017/05/debugger-html-call-stack-improvements/).
One of them is to collapse multiple subsequent frames that belong to the same library (React, Vue, Angular, …) and display the logo of the library when possible.
It would be really nice to have the same thing in the console so console.trace calls, logged errors or exception are less verbose and more helpful for the user.


---

This would be very nice to ship that as the same time as the new debugger so we have a consistent way of dealing with stacktrace.

Comment 1

[Brian Grinstead [:bgrins]]

Is there a shared component / utility we can use to collapse and render the logo for stack traces?

Comment 2

[Nicolas Chevobbe [:nchevobbe]]

The logic for collapsing is only in the debugger (https://github.com/devtools-html/debugger.html/blob/ef9a689766a6a48334cee9a26cde774d491f92aa/src/utils/frame.js#L246-L284).

We could move some of this, along with library logos to devtools-core and share some code and assets.
I am planning to import the Stacktrace and Frame component into devtools-core, from m-c, so we can use it in Error object to have a proper stacktrace. Then we could share even more code.

Comment 3

[Jason Laster [:jlast]]

I'd be happy to share the logic. Perhaps the icons are moved to a separate devtools-frameworks package? We can move the logic for collapsing frames into a reps util that we pull in for the call stack.

There might be other nice things we want to share as well, for instance the context menu. jump to the frame in the editor...

Comment 4

[Nicolas Chevobbe [:nchevobbe]]

There are some Github issue that this bug depend on: 
- https://github.com/devtools-html/debugger.html/issues/7131
- https://github.com/devtools-html/debugger.html/issues/7132
- https://github.com/devtools-html/debugger.html/issues/7133

and also 2 pull requests: 
- https://github.com/devtools-html/debugger.html/pull/7128
- https://github.com/devtools-html/debugger.html/pull/7129

Comment 5

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1390768 - Insert tab and new line chars in Frame component; r?Honza.

This will allow the "copy message" context menu
entry to work as expected for console messages
with a stacktrace (exception, error message, console.trace, …)

Comment 6

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1390768 - Create a new React component to render stacktraces; r?Honza.

The component is wrapping the `Frames` component from the debugger
in order to have access to frames grouping.
It also handles sourcemaps, since the debugger component
does not by itself.
Tests are added to ensure the component behaves as expected.

Depends on D11602

Comment 7

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1390768 - Use new SmartTrace component in webconsole; r?Honza.

Depends on D11603

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/677553f9d910
Insert tab and new line chars in Frame component; r=Honza.
https://hg.mozilla.org/integration/autoland/rev/c22c5074ba48
Create a new React component to render stacktraces; r=Honza.
https://hg.mozilla.org/integration/autoland/rev/22834ab21180
Use new SmartTrace component in webconsole; r=Honza.

Comment 9

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/677553f9d910
https://hg.mozilla.org/mozilla-central/rev/c22c5074ba48
https://hg.mozilla.org/mozilla-central/rev/22834ab21180