JavaScript -- 前端错误监控

错误分类

1：运行错误（代码错误）

2：资源加载错误

对应上面的俩种错误类型，分别有几种错误捕获方式。

运行错误捕获方式

1：try...catch 组合  2：window.onerror（或者window.addEventListener("error", function (e) {} ) )

资源加载错误

1：object.onerror 2: performance.getEntries() 3 :Error事件捕获

我们先来演示第二种，在某网站控制台输入performance.getEntries()

 

这些表示已经加载好的资源，用全部资源剪出加载好的就是没有加载的资源。

Error事件捕获可以捕获到资源加载错误，但是冒泡不行，切记！！！

<script type = "text/javascript">//脚本
    window.addEventListener("error", function (e) {
        console.log(e);
    }, true)
</script>

<script src = "//google.com/text.js">
//不存在的资源
</script>

如果改为冒泡(即true变成false),那么无法捕捉

如何上报错误

1：通过Ajax上传（不推荐）

2：通过Image对象上传。

<script type = "text/javascript">//脚本
   (new Image()).src = "//google.com/text.js?r=cyl"
</script>

我们注意到，请求已经发送出去了。

只是地址是错误的，所以失败了。