前端错误监控与上报

前端错误的分类：

一:及时代码运行错误：也称为代码错误。这个错误每每是程序员在代码书写时形成的，好比语法错误、逻辑错误，这样的错误一般在测试阶段就会被发现，可是也可能存在“漏网之鱼”。

二：资源加载错误：这个错误一般是找不到文件（404）或者是文件加载超时形成的。

捕获错误的方法：

及时代码运行错误的捕获方法通常有两种，

try{      // 运行可能出错的代码  }catch{      // 捕获错误  }复制代码

另一种是 window.onerror

资源加载错误的捕获通常有三种方法，

Object.onerror，

var img =document.getElementById('#img');

     img.onerror = function() {

        // 捕获错误

     }
复制代码

window.performance.getEntries()，

浏览器获取网页时，会对网页中每个对象（脚本文件、样式表、图片文件等等）发出一个HTTP请求。而经过window.performance.getEntries方法，则能够以数组形式，返回这些请求的时间统计信息，每一个数组成员均是一个PerformanceResourceTiming对象！

(function () {
    // 浏览器不支持，就算了！
    if (!window.performance && !window.performance.getEntries) {
        return false;
    }
 
    var result = [];
    // 获取当前页面全部请求对应的PerformanceResourceTiming对象进行分析
    window.performance.getEntries().forEach((item) => {
        result.push({
            'url': item.name,
            'entryType': item.entryType,
            'type': item.initiatorType,
            'duration(ms)': item.duration
        });
    });
 
    // 控制台输出统计结果
    console.table(result);
})();
复制代码

详细资料：developer.mozilla.org/en-US/docs/…

这就是已经加载的资源，而后把整个资源的数量减去已经加载好的资源，剩下的就是没有加载出来的资源的数量。

捕获Error事件

window.addEventListener("error",function(ev){    console.log('捕获',ev)// 捕获错误 },true);复制代码

addEventListener的第三个参数 必定要是true,表示在捕获阶段触发，若是改为false就是冒泡阶段，那是获取不到错误事件的。

<!-- 一个不存在的资源 -->
<script src="//baidu.com/test.js"></script>复制代码

错误上报的方法：

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

二：利用Image对象发送信息

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

跨域js文件错误是否能够捕获：

答案是能够，错误提示是   script error

解决办法，跨域js文件获取是有限制的，若是想获取其余域下的js错误须要在script标签里添加crossorigin属性，而后服务器端要设置header('Access-Control-Allow-Origin: *'),或者 指定域名。