标签： Error
前端工程师都知道 JavaScript 有基本的异常处理能力。我们可以 throw new Error()，浏览器也会在我们调用 API 出错时抛出异常。但估计绝大多数前端工程师都没考虑过收集这些异常信息。反正只要 JavaScript 出错后刷新不复现，那用户就可以通过刷新解决问题，浏览器不会崩溃，当没有发生过好了。这种假设在 Single Page App 流行之前还是成立的。现在的 Single Page App 运行一段时间后状态复杂无比，用户可能进行了若干输入操作才来到这里的，说刷新就刷新啊？之前的操作岂不要完全重做？所以我们还是有必要捕获和分析这些异常信息的，然后我们就可以修改代码避免影响用户体验。
捕获异常的方式
我们自己写的 throw new Error()想要捕获当然可以捕获，因为我们很清楚 throw写在哪里了。但是调用浏览器 API 时发生的异常就不一定那么容易捕获了，有些 API 在标准里就写着会抛出异常，有些 API 只有个别浏览器因为实现差异或者有缺陷而抛出异常。对于前者我们还能通过 try-catch捕获，对于后者我们必须监听全局的异常然后捕获。
如果有些浏览器 API 是已知会抛出异常的，那我们就需要把调用放到 try-catch里面，避免因为出错而导致整个程序进入非法状态。例如说 window.localStorage就是这样的一个 API，在写入数据超过容量限制后就会 抛出异常，在 Safari 的隐私浏览模式下也会如此。
try{
localStorage.setItem('date',Date.now());
}catch(error){
reportError(error);
}
另一个常见的 try-catch适用场景是回调。因为回调函数的代码是我们不可控的，代码质量如何，会不会调用其它会抛出异常的 API，我们一概不知道。为了不要因为回调出错而导致调用回调后的其它代码无法执行，所以把调用回到放到 try-catch里面是必须的。
listeners.forEach(function(listener){
try{
listener();
}catch(error){
reportError(error);
}
});
window.onerror
对于 try-catch覆盖不到的地方，如果出现异常就只能通过 window.onerror来捕获了。
window.onerror =
function(errorMessage, scriptURI, lineNumber){
reportError({
message: errorMessage,
script: scriptURI,
line: lineNumber
});
}
注意不要耍小聪明使用 window.addEventListener或 window.attachEvent的形式去监听 window.onerror。很多浏览器只实现了 window.onerror，或者是只有 window.onerror的实现是标准的。考虑到标准草案定义的也是 window.onerror，我们使用 window.onerror就好了。
属性丢失
假设我们有一个 reportError函数用来收集捕获到的异常，然后批量发送到服务器端存储以便查询分析，那么我们会想要收集哪些信息呢？比较有用的信息包括：错误类型（ name）、错误消息（ message）、脚本文件地址（ script）、行号（ line)、列号（ column）、堆栈跟踪（ stack）。如果一个异常是通过 try-catch捕获到的，这些信息都在 Error对象上（主流浏览器都支持），所以 reportError也能收集到这些信息。但如果是通过 window.onerror捕获到的，我们都知道这个事件函数只有 3 个参数，所以这 3 个参数以外的信息就丢失了。
序列化消息
如果 Error对象是我们自己创建的话，那么 error.message就是由我们控制的。基本上我们把什么放进 error.message里面， window.onerror的第一个参数（ message）就会是什么。（浏览器其实会略作修改，例如加上 'Uncaught Error: '前缀。）因此我们可以把我们关注的属性序列化（例如 JSON.Stringify）后存放到 error.message里面，然后在 window.onerror读取出来反序列化就可以了。当然，这仅限于我们自己创建的 Error对象。
第五个参数
浏览器厂商也知道大家在使用 window.onerror时受到的限制，所以开始往 window.onerror上面添加新的参数。考虑到只有行号没有列号好像不是很对称的样子，IE 首先把列号加上了，放在第四个参数。然而大家更关心的是能否拿到完整的堆栈，于是 Firefox 说不如把堆栈放在第五个参数吧。但 Chrome 说那还不如把整个 Error对象放在第五个参数，大家想读取什么属性都可以了，包括自定义属性。结果由于 Chrome 动作比较快，在 Chrome 30 实现了新的 window.onerror签名，导致 标准草案也就跟着这样写了。
window.onerror =function(
errorMessage,
scriptURI,
lineNumber,
columnNumber,
error
){
if(error){
reportError(error);
}else{
reportError({
message: errorMessage,
script: scriptURI,
line: lineNumber，
column: columnNumber
});
}
}
属性正规化
我们之前讨论到的 Error对象属性，其名称都是基于 Chrome 命名方式的，然而不同浏览器对 Error对象属性的命名方式各不相同，例如脚本文件地址在 Chrome 叫做
