前端错误监控总结

【要点】

1. 前端错误的分类

2. 错误的捕获方式

3. 上报错误的基本原理

 

【总结】

1. 错误分类

---

• 运行时错误，代码错误
• 资源加载错误

 

2.捕获方式

---

• 代码错误捕获

  • 　　try ... catch:

    try {
        console.log("欢迎光临！");
    }
    catch(err) {
        document.getElementById("xxx").innerHTML = err.message;
    }

  • 　　window.onerror

    1 window.onerror = function(){
    2 
    3     console.log(error msg);
    4 
    5 }

• 资源加载错误  （不会冒泡到window, 这也是window.onerror捕获不到的缘由）
  • object.onerror：img标签、script标签均可以添加onerror事件，用来捕获资源加载错误；
  • performance.getEntries()：能够获取全部已加载资源的加载时间，经过这种方式，能够间接的拿到没有加载的资源错误。
  • Error事件捕获：资源加载错误，虽然会阻止冒泡，可是不会阻止捕获。true:捕获，false:冒泡

　　

 

　　【延申】

         跨域js运行错误也是能够捕获到的，可是拿不到具体的信息，好比：出错行号、出错列号，错误详情等，这种问题应该怎么处理呢？

　　 分两步：

• 1.在script标签上增长crossorigin属性；
• 2.设置js资源响应头Access-Control-Allow-Origin:*；（也能够设置特定的域名) 这样就能够拿到具体的错误信息了

 

3.上报错误的基本原理

---

1. 利用Ajax通讯的方式上报

2.利用Image对象上报 (推荐的方式) 是大部分浏览器的监控体系选择的方法

 而后在network中就能够看到发送了请求