【性能类】—错误监控类

一、前端错误的分类

1. 即时运行错误：代码错误
2. 资源加载错误：js、图片、css加载失败

二、错误的捕获方式

1. 即时运行错误的捕获方式

1. try…catch 需要部署到代码中
2. window.onerror

2. 资源加载错误

1. object.onerror 触发节点的错误事件

<img id="img" src="http:baidu.com/img/1.png"/>
  <script>
    var dom = document.getElementById("img");
    dom.onerror = function (e) {
      console.log('onerror错误捕获', e)
    }
</script>

3. performance.getEntreies() 获取已加载资源的加载时长，可以间接拿到没有加载资源的错误

// 获取已加载资源的数组，遍历每个资源名称
performance.getEntries().forEach(item => {console.log(item.name)})

// 获取所有img标签

document.getElementsByTagName('img')

img标签数量 - 已加载资源 过滤 所有图片资源数量 = 未成功加载图片的数量

3. Error事件捕获
   资源加载错误不会向上冒泡

<img id="img" src="http:baidu.com/img/1.png"/>
  <script>
    var dom = document.getElementById("img");
    dom.onerror = function (e) {
      console.log('img.onerror错误捕获', e)
    }
    dom.addEventListener("error", function (e) {
      console.log('img节点捕获', e)
    }, true)
    window.addEventListener("error", function (e) {
      console.log("window节点捕获", e)
    },true)
    dom.addEventListener("error", function (e) {
      console.log('img节点冒泡', e)
    }, false)
    // window接收不到冒泡的错误
    window.addEventListener("error", function (e) {
      console.log("window节点冒泡", e)
    },false)
  </script>

error和onerror 事件运行顺序： window.error 捕获阶段 → img.error 捕获阶段 → img.onerror 事件 → img.error 冒泡阶段 → window.error 冒泡阶段 （资源加载错误不会向上冒泡）

4. 跨域的js运行错误可以捕获吗, 错误提示是什么,应该怎么处理？
可以捕获
错误提示：Script error ，没有权限获取具体信息
处理：
① 客户端再script标签增加crossorigin属性
② 服务端设置js资源响应头 Access-Control-Allow-Origin: “* 或域名”
就可以拿到详细的错误信息

三、上报错误的基本原理

1. 采用Ajax通信的方式上报
2. 利用Image对象上报

<script type="text/javascript">
    (new Image()).src = 'http://baidu.com/test123'
  </script>