• 0
  • 0

Vue全局异常捕获

2019-10-21 15 0 admin 所属分类:Hbuilder

用uniapp开发成App的时候可以跨端编译,降低开发成本。但是有些事是否程序逻辑异常报错没法及时联调。需要将其记录在案,比如说上传到服务器数据库记录。

一开始自己这样写

catch_error(callBack){
   try{
      callBack();
   }catch(e){
     //报错处理逻辑
   }
}

然后在一些核心复杂的代码处包括一层捕获,但是没法全部检测到而且需要添加很多代码量,不够灵活。

后来同事跟我说Vue自带全局捕获异常,我搜了相关资料整理如下。

在main.js中写入错误处理函数定义

const errorHandler = (error,vm)=>{
	console.error('抛出全局异常');
	console.error(vm);
	console.error(error);
	api.send_js_error(error);
};

将函数对象赋予VUE异常属性

Vue.config.errorHandler = errorHandler;
Vue.prototype.$throw = (error)=> errorHandler(error,this);

最后核心处理如下

send_js_error(e) {
    if (common.debug == 1) {
        uni.showModal({
            content: '已将错误内容复制到粘贴板',
            showCancel: false,
        });
        uni.setClipboardData({
            data: '错误信息:' + e.stack
        })
    }
    var params = {
        'uid': common.userinfo.uid,
        'errortime': this.timestamp(true),
        'msg': e.stack
    }
    uni.report('error', JSON.stringify(params));
    this.post('mini', 'jsErrors', params);
}

根据调试级别显示相应的处理,简洁灵活太方便了

返回顶部