前端错误监控

发表于 | 分类于


前端错误的分类

1、即时运行错误（代码错误）。2、资源加载错误

错误捕获方式

即时运行错误的捕获方式
1
2
3
4
5
6
7
8
1、try ... catch

2、window.addEventListener("error", fn); // 全局监听页面错误, DOM0为window.onerror = function() {}

3、（2）方法无法捕获跨域的js运行错误，想引入B网站的b.js文件，怎么捕获它的异常呢？
在b.js中，加入如下 response header，表示允许跨域
Access-Control-Allow-Origin: *
引入第三方的文件b.js时，在<script>标签中增加crossorigin属性
资源加载错误捕获方式

上面的window.onerror只能捕获即时运行错误，无法捕获资源加载错误。原理是：资源加载错误，并不会向上冒泡，object.onerror捕获后就会终止（不会冒泡给window），所以window.onerror并不能捕获资源加载错误。

1
2
3
4
5
6
7
8
9
10
11
方式1：object.onerror。img标签、script标签等节点都可以添加onerror事件，用来捕获资源加载的错误。

方式2：performance.getEntries。可以获取所有已加载资源的加载时长，通过这种方式，可以间接的拿到没有加载的资源错误。
performance.getEntries().forEach(item=>{console.log(item.name)})
document.getElementsByTagName('img')获取的资源数组减去通过performance.getEntries()获取的资源数组，剩下的就是没有成功加载的，这种方式可以间接捕获到资源加载错误。

方式3；**Error事件捕获。
源加载错误，虽然会阻止冒泡，但是不会阻止捕获。我们可以在捕获阶段绑定error事件。
window.addEventListener('error', function(e){
  console.log('捕获', e)
}, true)

错误上报的两种方式

1、采用Ajax通信的方式上报（此方式虽然可以上报错误，但是我们并不采用这种方式）。
2、利用Image对象上报（推荐。网站的监控体系都是采用的这种方式）

利用Image对象上报
1
(new Image()).src = 'http://smyhvae.com/myPath?badjs=msg'; // myPath表示上报的路径（我要上报到哪里去）。后面的内容是自己加的参数。