$logProvider formatError suppresses sourcemapping of native console.error

[richardcrichardc]

I'm developing an angular app with CoffeeScript, which is compiled to Javascript. Compilation changes line numbers which potentially makes debugging difficult, however modern browsers support sourcemapping which allow the Javascript debugger to map line numbers back to the original lines.

Angular has a custom error handler with a custom function to pretty print stack traces. This custom function does not know about source maps and suppresses the native stack trace which gets the line numbers correct.

E.g. an error on line 59 will be reported on line 70.

The work around is to install a custom exception handler that re throws the error.

.factory '$exceptionHandler', () ->
  return (exception, cause) ->
      console.error exception, exception.message
      throw exception

Maybe there is a way to print both the native and custom stack traces. Perhaps the problem and workaround should be documented.

Correct native stack trace (Chrome):

Uncaught ReferenceError: blah is not defined main.coffee:59
(anonymous function) main.coffee:59
invoke angular.js:3647
instantiate angular.js:3659
(anonymous function) angular.js:6680
(anonymous function) angular.js:6093
forEach angular.js:308
nodeLinkFn angular.js:6080
compositeLinkFn angular.js:5546
compositeLinkFn angular.js:5549
compositeLinkFn angular.js:5549
publicLinkFn angular.js:5454
(anonymous function) angular.js:1300
Scope.$eval angular.js:11669
Scope.$apply angular.js:11769
(anonymous function) angular.js:1298
invoke angular.js:3639
doBootstrap angular.js:1296
bootstrap angular.js:1310
(anonymous function) boot.coffee:2
(anonymous function) app.js:85
xhr.onreadystatechange app.js:55

Incorrect Angular stack trace:

ReferenceError: blah is not defined
    at new eval (main.coffee:70:12)
    at invoke (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.js:3647:28)
    at Object.instantiate (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.js:3659:23)
    at eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.js:6680:28)
    at eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.js:6093:34)
    at forEach (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.js:308:20)
    at nodeLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.js:6080:11)
    at compositeLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.js:5546:15)
    at compositeLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.js:5549:13)
    at compositeLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.js:5549:13)
    at publicLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.js:5454:30)
    at eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.js:1300:27)
    at Scope.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.js:11669:28)
    at Scope.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.js:11769:23)
    at eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.js:1298:15)
    at Object.invoke (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.js:3639:25)
    at doBootstrap (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.js:1296:14)
    at Object.bootstrap (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.js:1310:12)
    at eval (boot.coffee:4:9)
    at http://embankment.richardc.net:4000/s/app.js:85:17
    at XMLHttpRequest.xhr.onreadystatechange (http://embankment.richardc.net:4000/s/app.js:55:9) angular.js:9194
(anonymous function) angular.js:9194
(anonymous function) angular.js:6747
Scope.$apply angular.js:11771
(anonymous function) angular.js:1298
invoke angular.js:3639
doBootstrap angular.js:1296
bootstrap angular.js:1310
(anonymous function) boot.coffee:2
(anonymous function) app.js:85
xhr.onreadystatechange app.js:55

[IgorMinar]

good catch! you are right we should fix this, but since it will likely require a breaking change we should do it in 1.3

[jiverson]

+1 yeah this is really needed

[samcday]

👍! No stack traces in Angular lifecycle methods makes me a sad panda :(

[CWSpear]

Is this still on the books for 1.3?

[abirmingham]

+1 would love to see stack traces.

[rodyhaddad]

Anybody wants to have a go at this?

[IgorMinar]

I looked into this one. The problem is that there is no way that I find to get the source-mapped stack. The translation is done automagically by the console and devtools without an imperative api.

The best option here is to write a custom handler that rethrows the error from a set timeout callback (exceptionHandler should not throw synchronously).

[abirmingham]

Igor - Should the custom handler be added to angular.js (possibly via config option)? Or should angular.js consumers override the builtin angular handler if they want this functionality? Thanks!

[petebacondarwin]

@IgorMinar - Did you see this library: https://github.com/mozilla/source-map? The source-map library is too big to include in core angular.js but I think we could create a separate angular module (ngSourceMapper?) that extended our exception handler so that it was able to consume source maps and output a better stack trace in our error logging.

What do you think?