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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 1683 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

1 条回复 • 2020-05-31 09:28:11 +08:00

ChanKc

2020-05-31 09:28:11 +08:00 via Android

console.log 不在 ecmascript 规范里，所以不同的平台不同的 JS 引擎实现是可以不一样的