question: what would it take to add stack traces to watch callbacks?

[bcherny]

when debugging reactive apps, a common issue is figuring out why a callback for an observable was erroneously fired.

with object.observe, devtools gives us async call stacks. with angular, there's no good tooling to help us figure out why something changed.

currently, my best solution is to put console.logs everywhere in my code where my model could have been modified. this only goes so far, since i can't instrument the view (html code) with logs, unless i add ng-change handlers everywhere as well. it's also a pita, and a lot of debugging overhead compared to working with non-reactive code.

my ideal solution would be a stack trace passed with every $watch fire, combined with something like rxjs' support for long stack traces:

scope.$watch('foo', (cur, prev, stack) => console.log(stack))
/*
=> Update
  at angular.module.directive.link.myFn (http://localhost:3001/foo.js:32:10)
  at angular.module.directive.link.initialize (http://localhost:3001/foo.js:51:1)
  at angular.module.directive.link(http://localhost:3001/foo.js:2:1)
*/

afaik angular checks for changes at certain points in the app lifecycle, but doesn't know what caused those changes. in contrast with react or backbone's getter/setter architecture, with dirty checking this information is lost.

is there a cheap way to get this information back?

[bcherny]

pinging @IgorMinar @petebacondarwin @matsko @lgalfaso

[petebacondarwin]

I do not know of an easy way to add this feature. Is there anyone out there with any ideas?