项目大了之后,不能保证每个人的代码都是完美运行的。就需要收集报错信息,分析报错信息。
1、收集js报错信息
优点:全局方法,可以劫持大部分js报错信息。
缺点:但是对于框架内部的报错,监控并不好
/**
* 异常监控-外部监控
* 使用方法:window.onerror = *
**/
export function onerror(msg, url, line) {
ErrorInfo({ //该方法为上报错误信息
'errorDec':msg,
'url':url,
'line':line
})
return true
}
2、收集vue报错信息
优点:可以收集vue框架内部的报错信息
备注:vue还有一种可以监控组件报错的方法。自行查阅
/**
* 异常监控-vue内部监控
* 使用方法:vue.config.errorHandler = *
**/
export function errorHandler(msg,component,life){
const params = {}
if(msg){
params.errorDec = msg.toString()
}
if(component){
const dom = component.$vnode.tag.split('-');
const arr = dom.slice(3,dom.length)
if(arr.length>1)
params.module = arr.join('-')
else
params.module = arr[0]
}
if(life){
const lifes = life.split(' ')
params.hook = lifes[0]
}
ErrorInfo(params)
}
3、收集consele.error报错信息
优点:很多框架会使用console.error报错,这里重定义console.error,使该类型的报错可以监控到。
/**
* 异常监控-console
* 使用方法:console.error = *
**/
export function consoleError(tempErrorMsg) {
var errorMsg = (arguments[0] && arguments[0].message) || tempErrorMsg;
var url = arguments[0] && arguments[0].config&&arguments[0].config.url||'console.error';
onerror(errorMsg, url, 0);
};
4、白屏监控
优点:可以收集一下监控消息
缺点:该方法是单页面监控,使用时候放在router的守卫之后。
备注:大意为:进入网页后两秒,检查#app下面有没有div。
/**
* 异常监控-单页面应用判断白屏
**/
let timeOut = null
export function whiteScreen(){
if(production()){
let monitorWhiteScreenNode = document.querySelector('#app');
if (monitorWhiteScreenNode) {
clearTimeout(timeOut)
timeOut = setTimeout(() => {
try {
if (monitorWhiteScreenNode.innerHTML.indexOf('div') === -1) {
ErrorInfo({
'errorDec':'白屏',
'url':window.location.href
})
}
} catch (err) {
consoleError(err)
}
}, 2000);
}
}
}
5、收集接口问题
优点:对于promise的返回处理。如果没有,则收集
缺点:拦截器拦截的报错信息,是没有处理的,会触发。如果上报错误的接口本身被拦截了。则会造成循环
/**
* 异常监控-无Promise的reject
* 使用方法:window.onunhandledrejection = *
* 备注:如果遇到上报接口错误被拦截的情况,会造成循环,慎用
**/
export function onunhandledrejection(e) {
var errorMsg = "";
var errorStack = "";
if (typeof e.reason === "object") {
errorMsg = e.reason.message;
errorStack = e.reason.stack;
} else {
errorMsg = e.reason;
errorStack = "";
}
//处理上报
onerror(errorMsg, 'onunhandledrejection', 0);
}
附录:
JS错误类型:
一、SyntaxError (语法错误)
这种错误是最低级的错误但是最常见的错误,这是在开发中多个标点少个括号,常见于新手
二、ReferenceError (引用错误)
调用的变量或者方法未被定义便会报此错误
三、TypeError (类型错误)
数据类型错误,最常见的是Vue中父传子时props接收参数时容易报该错误,子元素接收的是Number类型,父元素传的确实字符串便会报错
四、RangeError (范围越界错误)
范围越界,例:new Array(-1)
五、URIError (URI不正确)
在解析URL时,如果该URL地址不是一个合法地址则会报错,例:decodeURI(’%dfd’)
结语:大家收集信息的时候别忘记判断是开发环境还是生产环境。如果在开发环境劫持了报错信息,可能会给开发造成一定的难度