js报错信息收集，vue报错信息收集，console.error报错信息收集，白屏监控，和js的错误类型

本文链接：https://blog.csdn.net/qq_25463727/article/details/119210303

项目大了之后，不能保证每个人的代码都是完美运行的。就需要收集报错信息，分析报错信息。

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’)