Use source maps for stacktraces

[pluma]

Currently the stacktraces returned by karma are pretty much useless if any source code transformation or bundling is taking place. This impacts workflows using bundlers (e.g. browserify, component) and transpilers (e.g. CoffeeScript, LiveScript, TypeScript, Dart) alike.

As karma seems to be able to print stacktraces from the browser to the console, it should be possible to run a function on them in between.

Mozilla provides a library at mozilla/source-map for parsing sourcemaps and translating generated source positions to original source positions and filenames.

From what I can see this would require the following steps:

1. When a source file is loaded, try to find source map comments.
2. Parse any inlined source maps (needs to support base64-encoded data URLs)
3. When a browser returns a stacktrace, try to find any file/line/col references.
4. Translate per-file line/col references via mozilla/source-map.

This should probably be optional because of the overhead involved in finding, parsing and applying the source maps.

[jamesshore]

+1

[vojtajina]

Sounds like a good feature.

[realyze]

definitely a +1

[lo1tuma]

+1

[0xPIT]

+1

[jvilk]

+8

[jazmit]

+999

[manoharank]

This is badly needed +1000

[c089]

+1

[vojtajina]

Example output...

# example with karma-coffee-preprocessor
Chrome 31.0.1650 (Mac OS X 10.9.0) plus should work FAILED
    Error: WUCK
        at Error (<anonymous>)
        at plus (/Users/vojta/Code/karma/test/e2e/coffee/plus.js:4:9 <- plus.coffee:3:8)
        at null.<anonymous> (/Users/vojta/Code/karma/test/e2e/coffee/test.js:6:19 <- test.coffee:7:4)
Chrome 31.0.1650 (Mac OS X 10.9.0): Executed 2 of 2 (1 FAILED) (0.014 secs / 0.01 secs)

# example with karma-traceur-preprocessor
Chrome 31.0.1650 (Mac OS X 10.9.0) ERROR
    Uncaught WTF
    at /Users/vojta/Code/angular-2/test/foo.spec.js:5:0 <- /Users/vojta/Code/angular-2/test/foo.spec.es6.js:3:0

[pluma]

Awesome! 👍

[kwizzn]

Awesome work! How would one implement source maps for plain JS?

[pluma]

@zeussolo What do you mean by implement? If you just want sourcemaps for minified JS code, use uglify.

[lo1tuma]

@pluma we have a generated browserify bundle with integrated source maps (same file). Ideally you can set a source map path in the karma file config.
Example:

{pattern: 'browserifiedBundle.js', watched: false, served: true, sourceMap: 'browserifiedBundle.js'}

[pluma]

@lo1tuma Support for inline source maps (like browserify generates) seems to be sketchy across the board. I've used convert-source-map to extract browserify's sourcemaps for uglify. I'm not sure whether karma now supports inlined source maps, so you may have to add an extraction step to your build.

[lo1tuma]

The extraction wouldn’t be the problem. At the moment karma doesn’t allow to set a path to any source map in the config. It requires you to write a preprocessor.

[jamesshore]

@lo1tuma Check out the karma-commonjs bridge for a better way of using testing CommonJS modules with Karma. It's faster and doesn't need source maps.

[lo1tuma]

karma-commonjs won’t work for our project because it doesn’t support alias mappings.

[pkozlowski-opensource]

@lo1tuma if you would be willing to open an issue in karma-commonjs with your exact use-case description I might be able to have a look at it.

[vojtajina]

Agree with @jamesshore and @pkozlowski-opensource - let's add the missing features and you can run the tests without compiling. Compiling into a single kills caching. Also, even with source maps, the debugging is still much harder.

That said, I think it's cool to have another smaller test suite with compiled app and I think we should make it possible, here is an issue for it #893

[samu]

Karma currently can't use source maps in combination with PhantomJS: ariya/phantomjs#12289

[tschaub]

For others looking to have improved stack traces with inline source maps, see if the karma-source-map-support plugin helps (also referenced here #893 (comment)).