前端代码异常监控
JS异常一般包括两方面：语法错误和运行时错误。语法错误应该在开发阶段避免。通常处理JS异常的方案有2种：
- try...catch捕获
- window.onerror捕获
1. try...catch捕获
try {
var btn = $('#id');
btn.on('click', function() {
throw new Error();
});
} catch(e) {
console.log(e.name + e.message);
}
优点
- 可以细化到代码块
- 可以自定义错误类型
缺点
- 发生语法错误不进入try时，无法捕获
- 回调函数的异常不会被外层catch捕获，必须内部再嵌套try...catch
小结
try...catch方式繁琐，工作量大，依赖编译工具部署
2. window.onerror捕获
加载一个全局的error事件处理函数用于自动收集错误报告，但window.onerror必须放在所有JS文件之前才能捕获所有的异常信息。
- JS运行错误时（语法和运行时错误），window触发ErrorEvent接口的error事件，执行window.onerror();
- 某些资源加载失败(img/script)，加载资源的元素会触发一个Event接口的error事件，并执行该元素上的onerror()处理函数，这些error不会冒泡到window
window.onerror = function(messge, source, lineno, colno, error) {
console.log(message); // 错误信息
console.log(source); // 脚本地址
console.log(lineno); // 行号
console.log(colno); // 列号
console.log(error); // Error对象
return true; // 阻止执行默认事件处理函数，不会
}
element.onerror = function(evt) {
....
}
3. 跨域JS文件异常捕获
为了提升web性能，大部分web产品都有CDN部署，将资源部署到不同的域名上，利用浏览器的并发请求机制。
当加载不同域的脚本发生错误时，由于浏览器安全性限制，语法错误的细节不会报告，仅返回"Script error"。
针对这种问题，可以在服务器端设置"Accesss-Control-Allow-Origin: *"的响应头，允许跨域请求，在请求资源的script标签添加crossorigin属性即可。
<script src="xxxx/test.js" crossorigin></script>
4. Sentry
可以使用Sentry这样的异常统计工具进行监控，加载语言的SDK，自动上传异常信息。
对于JS，可以了解下raven.js的使用。
参考文章
