web前端错误监控

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

一、错误分类

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

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

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

二、错误捕获

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

   1.代码错误捕获：

try...catch...

   

                    try{

                               // 运行可能出错的代码

                    }catch{

                               // 捕获错误

                    }

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属性，然后服务器端要设置

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