1046256 - Parse Error.stack to render a proper stacktrace

Status: NEW

(DevTools :: Console, enhancement, P2)

Description

[Jerel Unruh]

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:33.0) Gecko/20100101 Firefox/33.0 (Beta/Release)
Build ID: 20140730004005

Steps to reproduce:

To reproduce display any stack trace in the Dev Tools console via console.error().

Something like:

function stackTrace() { 
  try {
    bar++;
  } catch (e) {
    console.error(e.stack);
  }
}
stackTrace();


Actual results:

FireFox dev tools shows a difficult-to-read stack with dead links like this:

__exports__.default<.setupController@http://127.0.0.1:4200/assets/app.js line 45 > eval:12:9
superWrapper@http://127.0.0.1:4200/assets/vendor.js:14443:11
Ember.Route<.setup@http://127.0.0.1:4200/assets/vendor.js:49502:9
handlerEnteredOrUpdated@http://127.0.0.1:4200/assets/vendor.js:46740:28
@http://127.0.0.1:4200/assets/vendor.js:46709:18

(side note: if I regex the stack to add some spacing myself the links do become clickable. However they open in a new tab with a 404 instead of in dev tools)


Chrome displays a formatted stack like this with the links being clickable (it opens the file in Sources and highlights the specified line):

Error while loading route: ReferenceError: foo is not defined ReferenceError: foo is not defined
    at __exports__.default.Ember.Route.extend.setupController (app/routes/index.js:12:13)
    at superWrapper [as setupController] (http://127.0.0.1:4200/assets/vendor.js:14443:16)
    at Ember.Route.Ember.Object.extend.setup (http://127.0.0.1:4200/assets/vendor.js:49502:14)
    at handlerEnteredOrUpdated (http://127.0.0.1:4200/assets/vendor.js:46740:36)
    at http://127.0.0.1:4200/assets/vendor.js:46709:18


Expected results:

1. Links should be clickable and should navigate to the correct line.
2. If the @ moves to the front of the line it then gives nice formatting even if the function name is missing:
3. Indenting by a couple spaces would be nice for when the stack is displayed the error message.

at __exports__.default<.setupController http://127.0.0.1:4200/assets/app.js line 45 > eval:12:9
at superWrapper http://127.0.0.1:4200/assets/vendor.js:14443:11
at Ember.Route<.setup http://127.0.0.1:4200/assets/vendor.js:49502:9
at handlerEnteredOrUpdated http://127.0.0.1:4200/assets/vendor.js:46740:28
at http://127.0.0.1:4200/assets/vendor.js:46709:18

Note that Chrome currently displays the error message as part of e.stack. This is why the Chrome stack above has the actual error prepended while Firefox does not.

Comment 1

[Brian Grinstead [:bgrins]]

A test case showing with console.error(e) and console.error(e.stack): http://fiddle.jshell.net/bgrins/hmfu9/show/

Comment 2

[Brian Grinstead [:bgrins]]

Attachment: console-error.png

Screenshot of the test case.

Notice that in the top message where an exception object is being passed into the console.error the whole message + stack trace is clickable and opens the object in the variables view.  It would be great if each individual URL in the stack trace was linkified and navigated to the debugger.  Maybe the error message alone could be clickable to open the variables view.

Comment 3

[guirec.corbel]

One year later, I still have the same problem. Is there any update?