◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。
vue-cli3与鹅厂的badjs-report整合
- 前端仕锦
- 时间:2019-02-26 11:04:37
- 7451人已阅读
经常会遇到有用户反应分享功能分享没得到返利,xxx登录失败,这种莫名其妙的错误。明明上线之前内部做了多种测试。这种软错误是最难修改的。所以就引入了鹅厂的badjs。
具体服务端安装过程就不过多讨论了。
根据文档,引入后初始化即可使用。因为badjs重写了window.onerror的方法。
BJ_REPORT.init({id: 1})但是在vue-cli下。在vue内的错误或者警告都是以try的形式抛出,也就是并不会从onerror这个方法经过。
由于开发过多的是使用组件,第一反应就是看下badjs-report的git是否有人抛出这个问题,并被官方回答。结果没有!!!!
在我束手无策的时候,突然想起很早刚接触vue的时候,似乎看过vue存在自己的全局抛出异常。这里大家都懂了吧,查看文档!!!!!!
就是它了,满怀兴奋的写上去,然后运行,构建。没有反应!!
Vue.config.errorHandler = (error, vm, i) => {
BJ_REPORT.report(error);
console.error(msg);
};官方文档错了吗?
在仔细看下,就是这个。
Vue.config.warnHandler = function (msg, vm, trace) {
BJ_REPORT.report({
msg: `warm:${msg}`,
target: Object.keys(vm.$refs).join(','),
});
console.warn(msg);
};查看后台!!!没错服务器收到错误了。
但是值得注意的是这个警告在正式环境下是没用的,所以真正的错误会出现在errorHandler
经过优化和调整,最终代码如下
import BJ_REPORT from 'badjs-report';
import Vue from 'vue';
BJ_REPORT.init({
id: 1,
url: "http://xxxx5:8060/badjs",
repeat: 1,
random: .7,
});
Vue.config.errorHandler = (error, vm, i) => {
BJ_REPORT.report(error);
console.error(error);
};
Vue.config.warnHandler = (msg, vm, trace) => {
BJ_REPORT.report({
msg: `warm:${msg}`,
target: Object.keys(vm.$refs) + '',
});
console.warn(msg);
};
