JavaScript 异常处理 详解

　　前端工程师都知道 JavaScript 有基本的异常处理能力。我们可以 throw new Error()，浏览器也会在我们调用 API 出错时抛出异常。但估计绝大多数前端工程师都没考虑过收集这些异常信息

反正只要 JavaScript 出错后刷新不复现，那用户就可以通过刷新解决问题，浏览器不会崩溃，当没有发生过好了。这种假设在 Single Page App 流行之前还是成立的。现在的 Single Page App 运行一段时间后状态复杂无比，用户可能进行了若干输入操作才来到这里的，说刷新就刷新啊？之前的操作岂不要完全重做？所以我们还是有必要捕获和分析这些异常信息的，然后我们就可以修改代码避免影响用户体验。

捕获异常的方式

我们自己写的 throw new Error() 想要捕获当然可以捕获，因为我们很清楚 throw 写在哪里了。但是调用浏览器 API 时发生的异常就不一定那么容易捕获了，有些 API 在标准里就写着会抛出异常，有些 API 只有个别浏览器因为实现差异或者有缺陷而抛出异常。对于前者我们还能通过 try-catch 捕获，对于后者我们必须监听全局的异常然后捕获。

try-catch

如果有些浏览器 API 是已知会抛出异常的，那我们就需要把调用放到 try-catch 里面，避免因为出错而导致整个程序进入非法状态。例如说 window.localStorage 就是这样的一个 API，在写入数据超过容量限制后就会抛出异常，在 Safari 的隐私浏览模式下也会如此。

如果我们已经有一整套工具来生成网站上不同页面的 <script> 标签的话，我们就需要调整一下这套工具让它对 <script> 标签做出改动：

当然，由于我们没办法保证每一个脚本文件只有 1000 行，也有可能有些脚本文件明显小于 1000 行，所以其实不需要固定分配 1000 行的区间给每一个 <script> 标签。我们可以根据实际脚本行数来分配区间，只要保证每一个 <script> 标签所使用的区间互不重叠就可以了。

crossorigin 属性

浏览器对于不同源的内容进行的安全限制当然不仅限于 <script> 标签。既然 XMLHttpRequest 可以通过 CORS 来突破这个限制，为什么直接通过标签引用的资源就不可以呢？这当然是可以的。

针对 <script> 标签引用不同源脚本文件的限制同样作用于 <img> 标签引用不同源图片文件。如果一个 <img> 标签是不同源的话，一旦在 <canvas> 绘图时用到了，该 <canvas> 将变为只写状态，保证网站不能通过 JavaScript 窃取未授权的不同源图片数据。后来 <img> 标签通过引入 crossorigin 属性解决了这个问题。如果使用 crossorigin="anonymous"，则相当于匿名 CORS；如果使用 `crossorigin=“use-credentials”，则相当于带认证的 CORS。

既然 <img> 标签能这样做，为什么 <script> 标签就不能这样做？于是浏览器厂商就为 <script> 标签加入了同样的 crossorigin 属性用于解决上述安全限制问题。现在 Chrome 和 Firefox 对这个属性的支持是完全没有问题的。Safari 则会把 crossorigin="anonymous" 当做 crossorigin="use-credentials" 处理，结果是如果服务器只支持匿名 CORS 则 Safari 会当做认证失败。由于 CDN 服务器出于性能的考虑被设计为只能返回静态内容，不可能动态的根据请求返回认证 CORS 所需的 HTTP Header，Safari 相当于不能利用此特性来解决上述问题。

总结

JavaScript 异常处理看起来很简单，跟其它语言没什么区别，但真的要把异常都捕获了然后对属性做分析，其实还不是那么容易的事情。现在尽管有一些第三方服务提供捕获 JavaScript 异常的类 Google Analytics 服务，但如果要弄明白其中的细节和原理还是必须自己亲手做一次。