前端实现错误信息实时监控

在一些大型项目中，都会对前端的文件进行一下错误信息的实时监控，当出现有报错的时候会及时进行捕获错误信息，再将收集到的信息发回到服务端。

前端的监控中主要是用到window.onerror事件来捕获错误信息。

1. 需要的信息

在捕获错误信息的时候我们一般需要用户的ua（userAgent），具体错误信息，错误发生所在的行号，错误发生所在的列号，错误发生所在的文件，错误的调用栈，用户的userId等主要信息

2. 捕获js代码中的错误信息

我们可以动态来加载所需的js，然后给该script绑定监听事件，来捕获错误：

function loadJs(src){
	document.write("<script crossorigin type='text/javascript' src='" + src + "' onerror='" + errorFn +"'></script>")；
	//一定要加上“crossorigin”属性
	rerun document.querySelector('script[src='"+ src +"']') || document;
}

function errorFn(){
	//当文件加载失败的时候是不会触发window.onerror事件的，所以要在dom元素上绑定onerror来监听
	// 如果触发onerror事件，则说明该js/css加载失败（路径不对、文件不存在等）
	return{
		ua : ua,
		row: row,
		col: col,
		url: url,
		msg: msg,
		userId: userId,
		stack: stack,
	}
}

loadJs('../index.js').addEventListener("DOMContentLoaded", function(){

	window.addEventListener("onerror", function(e)
		return {
			msg: e.message,
            url: e.filename,
            row: e.lineno,
            col: e.colno,
            stack: e.error && e.error.stack || '',
		}

	}, false);

}, false);

说明：

1. 在window上绑定onerror事件的时候不要使用DOM0级的事件绑定方法，因为在一个项目中有可能会引入很多其他的库或者插件，它们一般都会定义了window.onerror, 所以如果在使用DOM0级的事件绑定方法就会出现事件被覆盖的可能。

2. 使用onerror来监听错误的时候一定要对script标签加上“crossorigin”属性,标示允许跨域加载资源，如果不加该字段在发生错误的时候只能捕获到一个“script error”这样的信息，在没有其他任何的信息，这是因为浏览器实现script资源加载的地方，是进行了同源策略判断的，如果是非同源资源，errorMessage就被写死为“Script error”了。

3. 捕获css代码中的错误信息

function loadCss(href){
	document.write("<link rel='stylesheet' type='text/css' href='" + href + "' onerror='" + errorFn +"'>")；
	rerun document.querySelector('script[href='"+ href +"']') || document;
}

loadCss('../index.css').addEventListener("DOMContentLoaded", function(){

	window.addEventListener("onerror", function(e)
		return {
			msg: e.message,
            url: e.filename,
            row: e.lineno,
            col: e.colno,
            stack: e.error && e.error.stack || '',
		}

	}, false);

}, false);

4. 捕获js/css加载失败报404的错误信息

这时候window.onerror是监听不了的，我们要在对应的< script>和< link>标签中加onerror属性的方法来实现监听：

document.write("<script crossorigin type='text/javascript' src='" + src + "' onerror='" + errorFn +"'></s cript>")；
document.write("<li nk rel='stylesheet' type='text/css' href='" + href + "' onerror='" + errorFn +"'>")；