Closed Bug 1390012 Opened 7 years ago Closed 6 years ago

console error stack is too long

Categories

(DevTools :: Console, defect, P3)

57 Branch
defect

Tracking

(firefox57 wontfix)

RESOLVED FIXED
Tracking Status
firefox57 --- wontfix

People

(Reporter: heidi.kasemir, Unassigned)

References

Details

(Keywords: papercut)

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.

Attachments

(1 file)

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`
Component: Untriaged → Developer Tools: Console
attaching the gif failed - link to example here: http://imgur.com/fMmsCJt
User Story: (updated)
Attached file example (3 errors, chrome vs firefox) (deleted) —
Hello,
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)
Status: UNCONFIRMED → NEW
Depends on: 1390768
Ever confirmed: true
Priority: -- → P3
Product: Firefox → DevTools
Could you try latest Nightly and check if it's better (it should be a lot, but I want to confirm that).
Flags: needinfo?(heidi.kasemir)
Hey! I've noticed a marked improvement in how easy it is to navigate console errors on nightly!

Since they are collapsed, it's easier to keep them visually separate and have a high level overview of what might have gone wrong, while being able to drill down into the particulars if needed.

Thanks for following up!
Flags: needinfo?(heidi.kasemir)
Thank you for confirming, Heidi! Closing as fixed. Let us know what else we can improve to simplify framework development.
Status: NEW → RESOLVED
Closed: 6 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: