乌哩码嗏 2020-05-21 10:42 采纳率: 0%
浏览 370

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文件中找到正确行列位置、文件名字等信息

  • 写回答

1条回答

报告相同问题?

悬赏问题

  • ¥15 安卓adb backup备份应用数据失败
  • ¥15 eclipse运行项目时遇到的问题
  • ¥15 关于#c##的问题:最近需要用CAT工具Trados进行一些开发
  • ¥15 南大pa1 小游戏没有界面,并且报了如下错误,尝试过换显卡驱动,但是好像不行
  • ¥15 没有证书,nginx怎么反向代理到只能接受https的公网网站
  • ¥50 成都蓉城足球俱乐部小程序抢票
  • ¥15 yolov7训练自己的数据集
  • ¥15 esp8266与51单片机连接问题(标签-单片机|关键词-串口)(相关搜索:51单片机|单片机|测试代码)
  • ¥15 电力市场出清matlab yalmip kkt 双层优化问题
  • ¥30 ros小车路径规划实现不了,如何解决?(操作系统-ubuntu)