How to use source map on the JS stacktrace?

Question

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?

Steerage

Possible duplicate of How can I take a minified javascript stack trace and run it against a source map to get the proper error? – Urn

@Urn this is not 100% the same thing. In this question, a person want to rerun the trace but I want to show the output directly in the console. – Steerage

If you use console.error, Chrome should automatically rewrite the stack trace (in the console) once the sourcemap has loaded. – Cottonade

@Cottonade is there a way to force this behavior for any stack trace ? – Steerage

I don't believe so. But when you click on the path in the console, Chrome should take you to the original sourcemapped file. Otherwise you should use a library to parse it yourself, as @Urn suggested. – Cottonade

@Steerage can you provide the details of minification process you are using – Gobbler

Answer 1

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.

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.

Barsac

From your answer it appears (at least to me) that you are guiding the op about creating and using source maps. I think the op has got the source maps working, and wants the stack-traces on the reported errors to use the source maps instead of being minified. – Leahy

I actually do both assumptions, thus the explanation of the chrome setting and the linking from the source to the sourcemap. Not sure if it was setuped correctly I added some info about how to generate them. – Barsac

Updated the answer to make the difference clearer. Thanks for the feedback – Barsac

It seems to work. I had a bug but only because the map file was very long to load. There is a bug with line number of my "vendor.js" file. The line and the method names shown seems to be completely wrong. It works for my own file. All files are correct in the source tab. – Steerage

For information, It's an ember app so I use ember-cli. – Steerage