前端错误监控总结

Posted 2021-01-01 hyzm

【要点】

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中就可以看到发送了请求