Menu
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?
410
To use Source Map Explorer, you will need to install via NPM. Once installed, we can add it as an NPM stript to the package. json in our Angular application. When we run our script npm run bundle:report , we will get the output in the browser.
In a sense, source maps are the decoder ring to your secret (minified) code. Using Webpack, specifying devtool: "source-map" in your Webpack config will enable source maps, and Webpack will output a sourceMappingURL directive in your final, minified file.
A source map is a file that maps from the transformed source to the original source, enabling the browser to reconstruct the original source and present the reconstructed original in the debugger. To enable the debugger to work with a source map, you must: generate the source map.
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.
161
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
