Karma JSPM Horrible Trace Log - angularjs

Question

I have been setting up karma and jasmine on my angularjs 1.5 and jspm setup. Firstly all errors from karma the trace log is just coming from systemjs which makes it harder to debug. I am also getting a lot of Potentially unhandled rejection messages even though all of my promises are handling rejections.
ERROR LOG: 'Potentially unhandled rejection [5]
tryCatchReject#http://localhost:9020/base/jspm_packages/system-polyfills.src.js?3aa57969dce4ecea4c51aab540f372d15cc886b6:1252:34
runContinuation1#http://localhost:9020/base/jspm_packages/system-polyfills.src.js?3aa57969dce4ecea4c51aab540f372d15cc886b6:1211:18
when#http://localhost:9020/base/jspm_packages/system-polyfills.src.js?3aa57969dce4ecea4c51aab540f372d15cc886b6:999:20
run#http://localhost:9020/base/jspm_packages/system-polyfills.src.js?3aa57969dce4ecea4c51aab540f372d15cc886b6:1109:28
_drain#http://localhost:9020/base/jspm_packages/system-polyfills.src.js?3aa57969dce4ecea4c51aab540f372d15cc886b6:166:22
drain#http://localhost:9020/base/jspm_packages/system-polyfills.src.js?3aa57969dce4ecea4c51aab540f372d15cc886b6:131:15'
ERROR LOG: 'Potentially unhandled rejection [6]
tryCatchReject#http://localhost:9020/base/jspm_packages/system-polyfills.src.js?3aa57969dce4ecea4c51aab540f372d15cc886b6:1252:34
runContinuation1#http://localhost:9020/base/jspm_packages/system-polyfills.src.js?3aa57969dce4ecea4c51aab540f372d15cc886b6:1211:18
when#http://localhost:9020/base/jspm_packages/system-polyfills.src.js?3aa57969dce4ecea4c51aab540f372d15cc886b6:999:20
run#http://localhost:9020/base/jspm_packages/system-polyfills.src.js?3aa57969dce4ecea4c51aab540f372d15cc886b6:1109:28
_drain#http://localhost:9020/base/jspm_packages/system-polyfills.src.js?3aa57969dce4ecea4c51aab540f372d15cc886b6:166:22
drain#http://localhost:9020/base/jspm_packages/system-polyfills.src.js?3aa57969dce4ecea4c51aab540f372d15cc886b6:131:15'
MyService
✗ should do the thing
Expected 3 to equal 2.
tryCatchReject#/var/www/html/loyaltyone/src/jspm_packages/system-polyfills.src.js:1252:34
runContinuation1#/var/www/html/loyaltyone/src/jspm_packages/system-polyfills.src.js:1211:18
when#/var/www/html/loyaltyone/src/jspm_packages/system-polyfills.src.js:999:20
run#/var/www/html/loyaltyone/src/jspm_packages/system-polyfills.src.js:890:17
PhantomJS 2.1.1 (Linux 0.0.0): Executed 46 of 46 (1 FAILED) (0.205 secs / 0.028 secs)
I there a way to have better trace logs with the errors?

Answer 1

I was seeing the same Potentially unhandled rejection... errors too. They're just awful and completely unhelpful. What I did to debug my issue was to put phantomjs into debug mode, and place a debugger; statement just before the line of code referenced in the error and then I was able to step through and find the exact issue I was having.
In your case, the error is being thrown on line 1252 of jspm_packages/system-polyfills.src.js, at which is a method tryCatchReject. I would place a debugger; statement like so and then view the value of e.message while debugging:
/**
* Return f.call(thisArg, x), or if it throws return a rejected promise for
* the thrown exception
*/
function tryCatchReject(f, x, thisArg, next) {
try {
next.become(getHandler(f.call(thisArg, x)));
} catch(e) {
debugger;
next.become(new Rejected(e));
}
}
The karma-phantomjs-launcher readme gives a good example of how to configure Karma to pass the right flags to phantomjs for debugging as well as some good instructions:
// karma.conf.js
module.exports = function(config) {
config.set({
browsers: ['PhantomJS', 'PhantomJS_custom'],
// you can define custom flags
customLaunchers: {
'PhantomJS_custom': {
base: 'PhantomJS',
options: {
windowName: 'my-window',
settings: {
webSecurityEnabled: false
},
},
flags: ['--load-images=true'],
debug: true
}
},
phantomjsLauncher: {
// Have phantomjs exit if a ResourceError is encountered (useful if karma exits without killing phantom)
exitOnResourceError: true
}
})
}
If you set the debug option to true, you will be instructed to launch
a web browser to bring up the debugger. Note that you will want to put
debugger; statements in your JavaScript to hit breakpoints. You should
be able to put breakpoints in both your test code and your client
code. Note that the debug option automatically adds the
--remote-debugger-port=9000 and --remote-debugger-autorun=yes switches to PhantomJS.
When you start running your tests you should see a prompt to navigate to http://localhost:9000/webkit/inspector/inspector.html?page=2. There you can enabled debugging and step through the code.