由于Vue的错误拦截机制
window.addEventListener('error', function (e) {})
并不能监听到vue内部级别错误信息,退而求其次,利用vue本身错误监听函数进行vue内部级别错误信息的收集,并发送到自定义事件,利用自定义事件处理收集到的错误信息。
// 利用vue内部错误监听机制,监听错误,并发送给自定义事件cuowu
Vue.config.errorHandler = function (err) {
var e = new Event('cuowu');
e.arguments = err;
window.dispatchEvent(e);
}
// 用来接收vue产生的错误
window.addEventListener('cuowu', function () {
var arr = Array.prototype.slice.apply(arguments)[0].arguments;
// 错误信息上报参数
var obj = {
message: arr.message,
info: arr.stack
};
// 错误信息上报
errorUpload(obj);
})
再利用
// 外部错误信息收集设计cdn跨域请在script标签中加入跨域属性
window.addEventListener('error', function (e) {
// 错误信息上报参数
var obj = {
message: e.message,
info: e.stack
};
// 错误信息上报
errorUpload(obj);
})
进行外部级别error进行错误监听,一个简单的vue错误上报系统完成。