js 错误对象 err.stack 用“console 控制台输出”与“实际字符串”不一致问题

Question

背景：最近在做一个前端错误监控系统，要求收集 js 错误信息堆栈等。使用 vue+webpack 技术。

js 错误对象 Error 下的错误堆栈 stack 。

const error = new TypeErrpr(); 
console.log(error.stack); // console 控制台输出 
JSON.stringify(error.stack); // 实际字符串

使用 console.log 控制台输出如下（显示行号、堆栈信息正确）：

TypeError: this.b is not a function at Object.aa (common.js?cf45:119) at VueComponent.errorInJSHandler (Home.vue?76f2:104) at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854) at VueComponent.invoker (vue.runtime.esm.js?2b0e:2179) at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854) at VueComponent.Vue.$emit (vue.runtime.esm.js?2b0e:3888) at VueComponent.handleClick (element-ui.common.js?5c96:9417) at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854) at HTMLButtonElement.invoker (vue.runtime.esm.js?2b0e:2179) at HTMLButtonElement.original.\_wrapper (vue.runtime.esm.js?2b0e:6917)

但如果直接在页面显示或者保存为字符串，变成如下（显示行号、堆栈信息错误）：

TypeError: this.b is not a function at Object.aa (webpack-internal:///./src/utils/common.js:173:10) at VueComponent.errorInJSHandler (webpack-internal:///./node\_modules/cache-loader/dist/cjs.js?!./node\_modules/babel-loader/lib/index.js!./node\_modules/cache-loader/dist/cjs.js?!./node\_modules/vue-loader/lib/index.js?!./src/views/Home.vue?vue&type=script&lang=js&:108:61) at invokeWithErrorHandling (webpack-internal:///./node\_modules/vue/dist/vue.runtime.esm.js:1853:26) at VueComponent.invoker (webpack-internal:///./node\_modules/vue/dist/vue.runtime.esm.js:2178:14) at invokeWithErrorHandling (webpack-internal:///./node\_modules/vue/dist/vue.runtime.esm.js:1853:26) at VueComponent.Vue.$emit (webpack-internal:///./node\_modules/vue/dist/vue.runtime.esm.js:3882:9) at VueComponent.handleClick (webpack-internal:///./node\_modules/element-ui/lib/element-ui.common.js:9417:12) at invokeWithErrorHandling (webpack-internal:///./node\_modules/vue/dist/vue.runtime.esm.js:1853:26) at HTMLButtonElement.invoker (webpack-internal:///./node\_modules/vue/dist/vue.runtime.esm.js:2178:14) at HTMLButtonElement.original.\_wrapper (webpack-internal:///./node\_modules/vue/dist/vue.runtime.esm.js:6907:25)

怀疑是经过 webpack 打包的坑，想问各位，我如何才能获取到正确的堆栈信息（ console.log 控制台输出）？

Answer 1

已找到解决方法，使用mozilla的sourcemap库（https://github.com/mozilla/so...）即可通过打包后的错误堆栈及sourceMap文件中找到正确行列位置、文件名字等信息