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 (.js:62:1375)
    at n (.js:62:1600)
    at u (.js:62:4777)
    at i.c.error (.js:62:8222)
    at u (.js:5:17397)
    at Object.fireWith [as rejectWith] (.js:5:18168)
    at r (.js:6:22154)
    at XMLHttpRequest.<anonymous> (.js:6:26964)
    at XMLHttpRequest.r (.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?

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./assets/vendor-160ad2febac0712c4d0db4e856197579.js:62:1375)
    at n (http://test./assets/vendor-160ad2febac0712c4d0db4e856197579.js:62:1600)
    at u (http://test./assets/vendor-160ad2febac0712c4d0db4e856197579.js:62:4777)
    at i.c.error (http://test./assets/vendor-160ad2febac0712c4d0db4e856197579.js:62:8222)
    at u (http://test./assets/vendor-160ad2febac0712c4d0db4e856197579.js:5:17397)
    at Object.fireWith [as rejectWith] (http://test./assets/vendor-160ad2febac0712c4d0db4e856197579.js:5:18168)
    at r (http://test./assets/vendor-160ad2febac0712c4d0db4e856197579.js:6:22154)
    at XMLHttpRequest.<anonymous> (http://test./assets/vendor-160ad2febac0712c4d0db4e856197579.js:6:26964)
    at XMLHttpRequest.r (http://test./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?

• javascript
• source-maps

Share Follow edited May 6, 2017 at 23:46 Preview 35.8k1010 gold badges9595 silver badges113113 bronze badges asked Apr 23, 2017 at 15:56 DouguiDougui 7,24088 gold badges5454 silver badges8888 bronze badges 6

• Possible duplicate of How can I take a minified javascript stack trace and run it against a source map to get the proper error? – phihag Commented Apr 25, 2017 at 17:47
• @phihag 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. – Dougui Commented Apr 26, 2017 at 23:14
• 1 If you use console.error, Chrome should automatically rewrite the stack trace (in the console) once the sourcemap has loaded. – Wazner Commented Apr 29, 2017 at 20:26
• @Wazner is there a way to force this behavior for any stack trace ? – Dougui Commented Apr 29, 2017 at 20:31
• 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 @phihag suggested. – Wazner Commented Apr 29, 2017 at 20:34

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 5 +200

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 pare 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 ment.