朝圣言
扫描关注朝圣言

手机扫描二维码

vue-cli3与鹅厂的badjs-report整合

朝圣言2019-02-26前端仕锦 1699 0A+A-

经常会遇到有用户反应分享功能分享没得到返利,xxx登录失败,这种莫名其妙的错误。明明上线之前内部做了多种测试。这种软错误是最难修改的。所以就引入了鹅厂的badjs。

具体服务端安装过程就不过多讨论了。

根据文档,引入后初始化即可使用。因为badjs重写了window.onerror的方法。

BJ_REPORT.init({id: 1})

但是在vue-cli下。在vue内的错误或者警告都是以try的形式抛出,也就是并不会从onerror这个方法经过。

由于开发过多的是使用组件,第一反应就是看下badjs-report的git是否有人抛出这个问题,并被官方回答。结果没有!!!!

在我束手无策的时候,突然想起很早刚接触vue的时候,似乎看过vue存在自己的全局抛出异常。这里大家都懂了吧,查看文档!!!!!!

vue-cli3与鹅厂的badjs-report整合  前端 web mvvm vue 第1张

就是它了,满怀兴奋的写上去,然后运行,构建。没有反应!!


Vue.config.errorHandler = (error, vm, i) => {
    BJ_REPORT.report(error);
    console.error(msg);
};

官方文档错了吗?

在仔细看下,就是这个。

vue-cli3与鹅厂的badjs-report整合  前端 web mvvm vue 第2张


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);
};


文章关键词
前端
web
mvvm
vue
发表评论