前端异常类型及捕获方式

引子

最近想起这方面的事情，就去花时间查找了相关资料，以下是个人的总结。

• Origin
• My GitHub

异常类型

从使用浏览器，浏览一个网页，与网页进行交互的过程，从用户的角度想一想会出现那些异常。

首先是使用浏览器一般都是基于操作系统，系统自身可能会出现问题，比如内存不够。这类情况归为系统异常。

正常打开浏览器后，访问网页的时候，可能没有网络，或提示出现服务错误等等，这类情况归为网络异常。

能够正常访问网页后，用户进行交互时，可能出现一种情况下点击有效，另一种情况下点击无效。这类情况归为应用异常。

在上面感性的认知基础上，下面进一步进行细化。

系统异常

系统异常情况比较少，相关的可能有：

• 浏览器崩溃

网络异常

网络异常中，相关的可能有：

• XMLHttpRequest 请求异常
• Fetch 请求异常
• 静态资源加载异常

应用异常

应用异常可以用 JavaScript 中的错误对象体现出来：

• EvalError ： 与 eval() 有关的错误。
• RangeError ： 表示这个值不在允许值集或范围内。
• ReferenceError ： 表示发现一个无效的引用。
• SyntaxError ： 表示发生了解析错误。
• TypeError ：当其它类型错误都不符合时，TypeError 用于指示一个不成功的操作。
• URIError ：表示用于处理 URI 的函数（encodeURI 或 decodeURl）使用方式与其定义的不兼容。

比较常见的异常可以参考 Top 10 JavaScript errors from 1000+ projects 。

异常捕获

浏览器都具有某种向用户报告异常的机制，对于用户都是隐藏此类信息。对于开发者，一般在控制台可以看到相关信息。

下面看下捕获异常对应的方法。

try-catch 捕获

try-catch 使用的形式如下：

try {
   
  // 可能导致异常的代码
} catch(error) {
   
  // 发生异常时的处理
}

测试页面见这里，有下面的一些特点：

• catch 块中会接收一个包含异常信息的对象，在不同的浏览器中包含的信息可能不同，但共同有一个保存异常信息的 message 属性。
• 不能捕获语法异常。
• 不能捕获异步异常。
• 该方式捕获的异常，不会出现在控制台上，也不会被 error 事件捕获。

语法异常在开发的