Nicolas Chevobbe [:nchevobbe] Assignee
	Description • 7 years ago

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.

	Brian Grinstead [:bgrins]
	Comment 1 • 7 years ago

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

	Nicolas Chevobbe [:nchevobbe] Assignee
	Comment 2 • 7 years ago

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.

	Jason Laster [:jlast]
	Comment 3 • 7 years ago

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...

	Nicolas Chevobbe [:nchevobbe] Assignee
	Comment 4 • 6 years ago

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

	Nicolas Chevobbe [:nchevobbe] Assignee
	Comment 5 • 6 years ago

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

	Nicolas Chevobbe [:nchevobbe] Assignee
	Comment 6 • 6 years ago

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

	Nicolas Chevobbe [:nchevobbe] Assignee
	Comment 7 • 6 years ago

Depends on D11603

	Pulsebot
	Comment 8 • 6 years ago

Pushed by nchevobbe@mozilla.com:
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.

	Cosmin Sabou [:CosminS]
	Comment 9 • 6 years ago
bugherder

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