乌哩码嗏 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条回答 默认 最新

报告相同问题?

悬赏问题

  • ¥20 ML307A在使用AT命令连接EMQX平台的MQTT时被拒绝
  • ¥20 腾讯企业邮箱邮件可以恢复么
  • ¥15 有人知道怎么将自己的迁移策略布到edgecloudsim上使用吗?
  • ¥15 错误 LNK2001 无法解析的外部符号
  • ¥50 安装pyaudiokits失败
  • ¥15 计组这些题应该咋做呀
  • ¥60 更换迈创SOL6M4AE卡的时候,驱动要重新装才能使用,怎么解决?
  • ¥15 让node服务器有自动加载文件的功能
  • ¥15 jmeter脚本回放有的是对的有的是错的
  • ¥15 r语言蛋白组学相关问题