前端代码异常监控

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的使用。

参考文章

1. Sentry官网
2. 前端代码异常日志收集与监控