【知识梳理】4.4错误监控

1.前端错误的分类

• 1.即时运行错误（代码错误）；
• 2.资源加载错误（图片、js、css）。

2.错误的捕获方式

即时运行错误的捕获方式：

• 1）try...catch；
• 2）window.onerror（DOM0）/addEventListener()（DOM2）。

资源加载错误的捕获方式：

• 1）object.onerror；图片、scrip标签都有onerror事件；资源加载错误 不会冒泡 但是会捕获，所以window.onerror不会捕获资源加载错误；
• 2）performance.getEntries();高级浏览器有performance对象，此方法可获取成功加载的资源数组；
• 3）Error事件捕获。

      window.addEventListener('error', function (e) {
          console.log('捕获', e);
      }, true);
      //true是捕获，可获取资源加载错误；false是冒泡，不可获取

延伸：跨域的js运行错误可以捕获吗？错误提示什么，应该怎么处理？

所有跨域错误报错信息都如下图：

捕获方法：

• 1.客户端在script标签上增加crossorigin属性；
• 2.服务端设置js资源响应头Access-Control-Origin:*（或者是域名）。

3.上报错误的基本原理

• 1.采用Ajax通信的方式上报（可以但是不使用此方式）；
• 2.利用Image对象上报。

     //发送一个请求，上报错误，在network中看
     (new Image()).src = 'http://baidu.com/tesjk?r=tksjk';//上报路径

4.一道面试题

题目：如何检测js错误？如何保证产品质量？
错误监控，提交代码时通过代码质量体系控制、通过线上环境的错误收集（错误监控）。