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

背景:最近在做一个前端错误监控系统,要求收集 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 控制台输出)?

补充:已找到解决方法,使用mozilla的sourcemap库(https://github.com/mozilla/source-map#sourcemapconsumerwith)即可通过打包后的错误堆栈及sourceMap文件中找到正确行列位置、文件名字等信息

zqaq_520
乌哩码嗏 已找到解决方法,使用mozilla的sourcemap库(https://github.com/mozilla/source-map#sourcemapconsumerwith即可通过打包后的错误堆栈及sourceMap文件中找到正确行列位置、文件名字等信息
5 个月之前 回复

1个回答

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问