Source maps not used in error output

[morrissinger]

I have a test that looks like:

describe('foo', () => {
    it('bars', (done) => {
        throw new Error('foo');
        done();
    });
});

It is intentionally designed to fail on line 4 (where the error is thrown). My Karma configuration is set to use the 6to5 preprocessor with sourcemaps:

/*...*/
preprocessors: {
  'path/to/**/*.js': ['6to5']
},

'6to5Preprocessor': {
  options: {
    sourceMap: 'inline'
  },
  filename: function(file) {
    return file.originalPath.replace(/\.js$/, '.es5.js');
  },
  sourceFileName: function(file) {
    return file.originalPath;
  }
},
/*...*/

Yet, the output from karma is displaying the line number of the error in the post-processed output, rather than using the sourcemap:

Error: foo at Context.<anonymous> (/path/to/file-spec.es5.js:5:9)

The documentation on this repo is not extensive, so it is possible that I have unknowingly misconfigured something; however, I assume that using the example from the documentation should offer me something workable.

Note: I have tried this with PhantomJS and with Chrome.

Can you confirm that this is a bug, or that I have made a mistake? I am happy to work on a fork to resolve this if need be.

[sebmck]

Are sourcemaps being correctly saved?

[morrissinger]

@sebmck, I'm not certain I have a way of knowing, as all of the es5.js files appear to be removed before karma finishes. I have used the 6to5 cli with the same options and confirm that there is an inline sourcemap. Anything else you could recommend I try so that I can better answer your question?

[morrissinger]

By the way, thanks for the extremely prompt response!

[sebmck]

@morrissinger No problem! If the sourcemaps are being correctly saved then you need to tell node to use them. Node doesn't have built-in support for sourcemaps so you'll have to use a package like source-map-support.

[morrissinger]

@sebmck, I have now used the "debug" feature in the Karma runner in Chrome and verified that the source maps are being generated correctly. However, in the karma output in the console (via Node), the stack trace references the transpiled target (meaning the map is ignored).

So, it would seem that you are correct. However, I cannot get the source-map-support module to fix this issue. Unfortunately, the readme there is not specific about how to get this working with the Karma runner and your preprocessor. The instructions for source-map-support indicate that I should put the following two lines at the top of my compiled code:

//# sourceMappingURL=path/to/source.map
require('source-map-support').install();

This presents two challenges:

1. Because the karma-6to5-preprocessor generates inline maps, I don't have a .map file to assign to sourceMappingURL.
2. Because the Karma runner is the only part of my application that is running in Node and not the browser, I assume that I have to put these lines somewhere where they will be run along with Karma being executed. I cannot think of where that would be. (I tried the top of my karma.conf.js file, but that didn't work.)

Any thoughts?

[sebmck]

@morrissinger You should be able to just put:

require('source-map-support').install();

at the top of your file/s (ideally it should be in some init script). node-source-map-support should then use the inline comment.

[morrissinger]

@sebmck, these files run in the browser and I'm not using browserify or anything, so a require() call will not work.

[sebmck]

@morrissinger Oh right, sorry, I'm not very familiar with karma 😜 So the tests aren't actually executed by the node process itself?

[morrissinger]

Exactly. While Karma runs in Node, it essentially just builds an HTML file that includes your scripts (actual application scripts as well as tests) and the test framework of your choice (in my case, Mocha). I'm probably guilty of oversimplifying, but you can get the idea.

I can use Karma to launch a Chrome instance, and examine the stack trace there, and I see that the sourcemap is being used, even though that is not the case in the output from Karma in the console. That is, the stack trace in the Chrome developer tools and the stack trace in Karma say different things!

[sebmck]

@morrissinger Oh right. Yeah, it'd be because the source maps are actually being mapped by the Chrome devtools and V8 has no idea about source maps so it's just giving karma the original stack.

It looks like karma should support source maps so I'm not quite sure what's going on (karma-runner/karma#594), might be worthwhile to report it upstream as it does appear to be a bug.

[morrissinger]

Ok, that was extremely helpful, and I have actually resolved it! To actually use source-maps with the karma-6to5-preprocessor, one needs to also use https://www.npmjs.com/package/karma-source-map-support. It should also be noted that this will NOT work with PhantomJS; use the Chrome launcher.

[morrissinger]

Thanks for all of your help!

[sebmck]

@morrissinger Oh, awesome! No problem, more than happy to help. If you run into anymore issues feel free to open a new one or check out our gitter room.

[niant]

@morrissinger How did you actually get it working? I've the same problem and I included 'browser-source-map-support.js' in karma.conf.js and initialized: sourceMapSupport.install(); before tests.. It's working like charm in the browser but in cli/console it's still giving me wrong stack trace (line numbers).

[morrissinger]

@niant, I have to start by saying that this was not easy; in fact, it was so challenging that once I got it working, I put the whole thing into a Slush generator. That may or may not be an appropriate solution for your needs.

At the top of my karma.conf.js file, I have:

require('source-map-support').install();

I also have the 6to5 preprocessor set up in my karma.conf.js file:

preprocessors: {
    'build/test/modules/**/*.js': ['6to5']
},

'6to5Preprocessor': {
    options: {
        sourceMap: 'inline'
    },
    filename: function(file) {
        return file.originalPath.replace(/\.js$/, '.es5.js');
    },
    sourceFileName: function(file) {
        return file.originalPath;
    }
},

plugins : [
    'karma-source-map-support',
    'karma-6to5-preprocessor'
]

To give you more specific information, I'd need to know more about your setup (e.g., your karma.conf.js file, your choice of transpiler, etc.)

[niant]

@morrissinger Thanks for the quick response! I tried to implement it the same as you have but I still have the same issue. Any other ideas? I tried with and without plugins array, but it shouldn't require that according to documentation..(?) I have the following configuration:

// karma.conf.js
require('source-map-support').install();

// configs source-map-support + 6to5
'frameworks': ['mocha', 'source-map-support']
'preprocessors': {
  'app/scripts/**/*.js': ['6to5']
},
'6to5Preprocessor': {
  options: {
    sourceMap: 'inline'
  }
},

[morrissinger]

@niant, I get the impression that you will need to add the plugin to your plugins array. You should see some indication of a problem with that respect in your test output if you don't do that, and you won't get any sourcemap support.

[niant]

@morrissinger When I add the plugins array it don't make a difference for some reason.. I feel like this is almost there, but some small piece is still missing :) Browser devtools is saying the correct line numbers (& source maps)

'plugins': [
  'karma-mocha', 
  'karma-chrome-launcher', 
  'karma-source-map-support', 
  'karma-6to5-preprocessor'
]

[morrissinger]

If your browser has the correct sourcemaps, you can be certain that the sourcemaps are, in fact, being generated correctly. That's the first step. Then, you need to deal with the fact that node is not going to support sourcemaps out-of-the-box. Ensure the following five things:

• You have the karma-source-map-support package included in your project.
• You have the source-map-support package included in your project.
• You have require('source-map-support').install(); at the top of your karma.conf.js file.
• You have the source-map-support framework in your karma.conf.js file.
• You are using Chrome and NOT PhantomJS.

Have you met all of those conditions?

[niant]

Yes, I have all of those.

Edit: I noticed that code inside angular modules is with proper source map support and line numbers, but code outside it is not (in browser it's always correct, but in cli it's giving me wrong line numbers when code is outside angular). It smells a bit like user error or bug somewhere..

[morrissinger]

Interesting. I can empathize with the frustration (these issues increased the amount of time it took me to set this up by about 100%). I couldn't say more without looking at your project. Without looking at your entire project, the best help I can say is that you can find a reference implementation by generating a new ES6/Angular app with the slush-asponte generator for Slush and then using that as a kind of reference implementation for your project. It will generate an Angular app that works with Karma and Instanbul by transpiling ES6 to JavaScript via 6to5.

[MartyIX]

Maybe you can use this as a workaround: http://stackoverflow.com/a/33386174/99256

[es6Test]

How do you get karma-babel to use inline source maps? I've having a horrible time in chrome trying to hit breakpoints.