实现前端异常监控

异常收集

针对错误的捕获，使用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。

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

节流

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

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

针对sourcemap的处理

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