前端错误监控

前端错误分类

代码运行时错误

       可以通过以下两种方式监控

• try catch方式

      try {
        showError()
    } catch (error) {
        //  console.log(error)
    }

• window.onerror方式,不过onerror方法要放在前面，放在后面js报错可能捕获不到

    window.onerror=function(error){
        console.log(error)
    }
    showError()

• window.onerror 是dom0中的写法，也可以用dom2 中的window.addEventListener来监听,同样监听方法要放在前面，放在后面js报错可能捕获不到

   window.addEventListener("error",function(error){
        console.log(error)
    })
     showError()

资源加载错误

• object.onerror （不会冒泡）

   <img src="coddde.png" id="mytest">
    document.getElementById("mytest").onerror=function(error){
       console.log(error)
   }

• performance.getEntries 获取当前页面所有加载资源信息（可以间接获取到）
• 只能通过window.onerror 捕获阶段获取资源加载错误，冒泡阶段获取不到

 window.addEventListener("error",function(error){
      console.log(error)
  },true)

跨域的js错误

它会拿到一个错误，但是所有跨域js错误都是一个script error

1：在script标签上添加crossorigin 属性
2：设置js资源响应头Access-Control-Allow-Origin

错误上报

(new Image()).src=''