AngularJS - Logging Client Side Stack Trace
Nothing beats mythical errors that happens on the client side, but not on your development machine.
This post follows yesterday's post on configuring AngularJS to catch and log exceptions back to the server via an AJAX request.
Logging the Exception
Quick recap of the logging error handler.
Yay it's logging. But actually, it's pretty hard to figure out where the error is coming from. "What we need", says the developer to the tester, "is the stack trace. If we have the stack trace we'd be able to repo this and fix it."
stacktraceJS
Grab: https://github.com/stacktracejs/stacktrace.js/blob/stable/stacktrace.js
The following JSON gets logged.
Tweaks
"Those #function and #object, they look pretty stupid." commented the developer, who now has the stacktrace, but still thinks it doesn't help all that much.
A few hacks to stacktrace.js
This gives more readable stacktrace:
Future of stacktraceJS
The latest version of StacktraceJS (as of August 2015) is marching towards a full promise/A pattern where you request the stacktrace, and it returns you a promise. Then promise resolves to an array of stack frames, which you can then pretty-print to your own liking.
Expect the syntax to change, soon.
I'm also assuming for modern browsers, it'll even look into requesting SourceMap files for minified versions of JavaScript/TypeScript and resolve those lines in the stacktrace produced. Currently though, it doesn't do all those things. What it does manage so far, cross browser, is already fairly impressive and a great starting point.