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