Search code examples
javascriptsource-maps

How to use source map on the JS stacktrace?

When I have an error on a JS code, I have this kind of stacktrace : 

Error while processing route: admin.subscriptions/edit The adapter operation was aborted Error
    at n.i (http://test.com/assets/vendor-160ad2febac0712c4d0db4e856197579.js:62:1375)
    at n (http://test.com/assets/vendor-160ad2febac0712c4d0db4e856197579.js:62:1600)
    at u (http://test.com/assets/vendor-160ad2febac0712c4d0db4e856197579.js:62:4777)
    at i.c.error (http://test.com/assets/vendor-160ad2febac0712c4d0db4e856197579.js:62:8222)
    at u (http://test.com/assets/vendor-160ad2febac0712c4d0db4e856197579.js:5:17397)
    at Object.fireWith [as rejectWith] (http://test.com/assets/vendor-160ad2febac0712c4d0db4e856197579.js:5:18168)
    at r (http://test.com/assets/vendor-160ad2febac0712c4d0db4e856197579.js:6:22154)
    at XMLHttpRequest.<anonymous> (http://test.com/assets/vendor-160ad2febac0712c4d0db4e856197579.js:6:26964)
    at XMLHttpRequest.r (http://test.com/assets/vendor-160ad2febac0712c4d0db4e856197579.js:50:30564)

As you can see, it you the minified file and it doesn't seems to use the source map file. The source map file is working well. It do this on Chrome and Firefox.

How can I have a better stacktrace?

Solution

  • When you open your dev tools and press F1 or click on the top-right three dots, under Sources you can Enable JavaScript source maps. Make sure this option is checked.

    devtools

    Keep in mind that the browser needs to have access to your source map if you want the error stacktrace to be mapped. In production, you probably want to keep it hidden from users since they might not about it and inspect your non-obfuscated code. Services likes Sentry provide the ability to upload sourcemaps to them this way the errors will be prettified only for the developer.

    Some people also had the issue that the sourcemaps were not reloading. To fix it, you can reload the DevTools while in it by pressing Alt + R.

    Given you didn't really told us what build system you were using and your minification process, maybe the problem is relying in how you generate them.

    For gulp, here is how you do generate sourcemaps with the sourcemaps plugin:

    import sourcemaps from 'gulp-sourcemaps'

gulp.task('js', () => {
  gulp.src('src/**/*.js')
    .pipe(sourcemaps.init())
     // other pipes..
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('dist'))
})

    Under webpack, you just need to change the devtool setting to something like inline-source-maps or source-maps. There is a few other settings and they detail precisely what's suitable for production and compare the speed/mapping on there.

    The source-map-support can also be useful in node, but you still have to generate the source map and link it with the sourceMappingURL comment.