前端错误监控解决方案

在当今的互联网时代，web开发越来越受到重视，网页能实现的功能也越来多，之前只能在客户端上运行的程序，也逐渐转到网页上，面对成千上万的用户，出现错误的概率也是越来大。项目上线前期的粒度较大的错误我们都会在自测和QA测试中发现，然而上线之后的错误就不是那么好发现。同时移动端的开发也面临着一个问题就是不好调试，所以web开发的错误监控是一个非常有用的措施。前端的错误监控有哪些方法呢。

一、错误分类

常见的web错误主要分为两类：

1. 运行时错误：这个错误往往是我们在代码书写时造成的，比如语法错误、逻辑错误，这样的错误通常在测试阶段就会被发现，但是也可能存在“漏网之鱼”。

2.资源加载错误：这个错误通常是找不到文件或者是文件加载超时造成的。

二、错误捕获

基于上面两种的错误类型，也有不同的错误捕获方式：

1.代码错误捕获：

// try...catch...
try {

  // 运行可能出错的代码
} catch(e){

  // 捕获错误
}

// windown.onerror
window.onerror = function () {

  // 捕获错误

}

2. 资源加载错误

// Object.onerror
var img = document.getElementById('#img');
img.onerror = function () {

  // 捕获错误

}

利用window的Error事件代理,但是需要注意的是error事件是不冒泡的，我们可以使用事件捕获进行代理。

window.addEventListener("error",function(){
  // 捕获错误
},true);

三、错误上报

常见错误上报有两种： ajax、image对象（推荐）。

ajax上报就是在上文注释错误捕获的地方发起ajax请求，来向服务器发送错误信息。

利用image对象

(new Image()).src ="http://post.error.com?";

四、跨域js文件错误获取

跨域js文件获取是有限制的，如果想获取其他域下的js错误需要在script标签里添加crossorigin属性，

<script crossorigin  src="http://www.lmj.com/demo/crossoriginAttribute/error.js"></script>

然后服务器端要设置

header('Access-Control-Allow-Origin: *');