神的尾巴

全栈工程师、独立开发者

0%

实现前端异常监控

异常收集

针对错误的捕获,使用window.onerror或者addEventListener(‘error’)。

window.onerror = function(message, source, lineno, colno, error) {};

浏览器兼容性

Browser Message & Url Line numbers Column numbers Stack trace
Chrome
Firefox
Edge
IE11
IE10
IE9
IE8
Safari 6+
iOS Safari 6+
Opera 15+
Android Browser 4.4
Android Browser 4 – 4.3

针对资源异常的捕获

因为事件发生在捕获而不是冒泡阶段,所以不支持ie8。

1
2
3
4
5
6
7
8
document.addEventListener(
'error',
function(e) {
// 资源异常处理
},
// 用来表示监听在事件捕获阶段,默认为冒泡阶段
true
);

节流

防止过多的对服务器接口发起请求,主要通过两个方面实现节流。

  1. 客户端缓存异常队列,每隔一段时间,检查异常队列,批量上传。
  2. 对异常进行重复检测,如果是一致的忽略。

针对sourcemap的处理

可以在每次部署的时候把sourcemap文件传到服务器目录,在捕获错误后,到后端通过soucemap还原出错误代码。

觉得对你有帮助的话,请我喝杯咖啡吧~.