• 0
  • 0

Vue全局异常捕获

2019-10-21 296 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);
}

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


更加详情的记录

// Vue全局异常捕获
const errorHandler = (error,vm, info)=>{
console.error('抛出全局异常');
console.error("vm: ", vm);
console.error('info: ', info);
console.error('error: ', error);
api.send_js_error(error, vm, info);
};
Vue.config.errorHandler = errorHandler; Vue.prototype.$throw = (error)=> errorHandler(error,this);
send_js_error(error, vm, info) {
 if (common.settings.ap_debug == true) {
  fun.confirm('程序异常, 是否将异常放置到剪辑板?', (confirm) => {
   if (confirm.confirm == true) {
    uni.setClipboardData({
     data: vm.__route__ + "\n" + error.message + "\n\n" + error.stack
    })
   }
  });
 }
 
 var msg = "错误类型:" + error.name + "\n";
 if (vm._isVue) {
  msg += "文件路径:" + vm.__route__ + "\n";
  
  if (vm.$options && vm.$options.__file) {
   msg += "具体路径:" + vm.$options.__file + "\n";
  }
 }
 msg += "错误提示:" + error.message + "\n";
 msg += "大概位置:" + info + "\n";
 msg += "\n" + error.stack;
 var params = {
  'uid': common.userinfo.uid,
  'errortime': this.timestamp(true),
  'msg': msg,
  '_log': 'slow'
 }
 uni.report('error', JSON.stringify(params));
 this.post('log', 'errors', params);
},


返回顶部