Better stack-traces from production builds?


#1

Hi,

I’ve been wondering how we could get better stack traces from our production builds.
We’re using Google Analytics to collect crash reports and it works fairly well, but the stack traces points to the files vendor.js and bundle.js, which can be difficult to decode.

I know how to enable source-maps with typescript* and webpack**, but how do I use them to get the original stacktrace?

When I trigger an error the stack still looks like this:

JS: Error
JS:     at ItemDetailComponent.module.exports../item/item-detail.component.ts.ItemDetailComponent.crash (file:///data/data/org.nativescript.tns41test/files/app/bundle.js:456:21) [angular]
JS:     at Object.handleEvent (file:///data/data/org.nativescript.tns41test/files/app/bundle.js:424:25) [angular]
JS:     at handleEvent (file:///data/data/org.nativescript.tns41test/files/app/vendor.js:17339:41) [angular]
JS:     at callWithDebugContext (file:///data/data/org.nativescript.tns41test/files/app/vendor.js:18436:25) [angular]
JS:     at Object.debugHandleEvent [as handleEvent] (file:///data/data/org.nativescript.tns41test/files/app/vendor.js:18139:12) [angular]
JS:     at dispatchEvent (file:///data/data/org.nativescript.tns41test/files/app/vendor.js:14793:25) [angular]
JS:     at file:///data/data/org.nativescript.tns41test/files/app/vendor.js:15237:38 [angular]
JS:     at file:///data/data/org.nativescript.tns41test/files/app/vendor.js:34387:26 [angular]
JS:     at Object.onInvoke (file:///data/data/org.nativescript.tns41test/files/app/ven...

I can see the original stack in the Chrome inspector, so the source-map should be available.

*) Set sourceMap: true in tsconfig.esm.json
**) change devtool: “none” to devtool: “source-map” in webpack.config.js