If you think a bug might affect users in the 57 release, please set the correct tracking and status flags for Release Management.

console error stack is too long




Developer Tools: Console
a month ago
a month ago


(Reporter: heidi.kasemir, Unassigned)



57 Branch

Firefox Tracking Flags

(Not tracked)


User Story

The user is a React web developer trying to switch from Chrome to Firefox as the main development platform.

I've been observing her work flow and asking her to file bugs when she encounters them. She reported that while working with React/Redux the stack trace for each error in Firefox is much longer which makes it harder to identify the important line.

According to her words both stack traces are pretty unproductive and the signal/noise ratio feels unnecessary, but in Firefox is worse than in Chrome.

Since it's about a stack of each error, if there are multiple, the noise to signal ratio grows with each additional error.

In the perfect world, she said she'd like the one line "that matters" to be clearly visible in the log, and all others be folded by default, but if that's impossible due to the nature of React/Redux stack, at least making the stack trace smaller would help her identify the right error line that has information she is looking for to locate the problem and fix it.


(1 attachment)



a month ago
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:57.0) Gecko/20100101 Firefox/57.0
Build ID: 20170811100330

Steps to reproduce:

developing an application with errors, view the console.

Actual results:

If it has multiple errors, the stack traces are so long that one runs into the next and it becomes difficult to find the issue due to overload of information.

React stack trace has many non-useful trace calls for things like `performInitialMount` (without the information about which component is mounting anyway, so it's even less useful) 

Expected results:

Show only the lines that are most likely to be useful - collapse the rest of the stack trace to be opened and inspected on an as-needed basis.

The stack trace in chrome is shorter, which makes it easier to find. In the example given in the attached file, the line that matters is `fetchProjects@http://localhost:5000/app.js:14121:16`


a month ago
Component: Untriaged → Developer Tools: Console

Comment 1

a month ago
attaching the gif failed - link to example here: http://imgur.com/fMmsCJt
User Story: (updated)
Created attachment 8896852 [details]
example (3 errors, chrome vs firefox)
Thanks a lot for the detailed report !

I think https://github.com/devtools-html/devtools-core/issues/452 is going to solve one part of the problem.
One thing the new debugger is doing is collapsing framework frames, so instead of having 50+ react frames, you only see one, with the react logo (that you can expand if you want).
I think we could try to do the same in the console as well.
Attachment #8896852 - Attachment description: example video recoded → example (3 errors, chrome vs firefox)
Keywords: papercut
You need to log in before you can comment on or make changes to this bug.