前端异常示例

引子

在 前端异常类型及捕获方式 之后，尝试了自己去封装一下，然后去看了 sentry 的源码，发现之前的那篇只是一个概括，当采集的时候，需要更加细致的解析，接下来看看各种异常具体是什么样的。

• Origin
• My GitHub

基础知识点

前端异常一定会接触到 Error 对象，先来简单的了解一下。

错误的类型：

• Error ： 基类型，其它错误类型都是继承自该类型。
• EvalError ： 使用 eval() 函数而发生异常时抛出。
• RangeError ： 数值超出相应有效范围时的异常。
• ReferenceError ： 访问无效的引用的异常。
• SyntaxError ： 语法错误的异常。
• TypeError ： 变量或参数不是一个有效类型的异常。
• URIError ： encodeURI() 或 decodeURI() 传入无效参数的异常。
• AggregateError ： 一个操作导致多个异常需要报告，例如 Promise.any() 。
• InternalError ： JavaScript 引擎内部抛出的错误，这个还没有标准化。

实例共有的标准属性：

• message ： 异常信息。
• name ： 异常名称。

实例共有的非标准属性：

• description ： 微软的非标准属性，类似 message 。
• number ： 微软的非标准属性，异常数字。
• fileName ： Mozilla 的非标准属性，异常产生所在文件的路径。
• lineNumber ： Mozilla 的非标准属性，异常产生所在文件的行数。
• columnNumber ： Mozilla 的非标准属性，异常产生所在文件的列数。
• stack ： Mozilla 的非标准属性，堆栈跟踪。

更多异常相关的信息见 ecma-262 Error 和 WebIDL Exceptions 。

下面看看每种类型的示例。（暂没有考虑框架）

以下示例环境：

• Chrome ：86.0.4240.198（正式版本） (x86_64)。
• 使用 nginx 启动了一个本地服务，原生 js 。
• 为了方便查看更多信息，使用了 try-catch、onerror、onunhandledrejection 。

EvalError

EvalError 已不再被 JavaScript 抛出，现在该对象为了保持兼容性存在。用下面的方式可以看到这种异常：

try {
   
  throw new EvalError('Hello, EvalError');
} catch (e) {
   
  console.log(e instanceof EvalError); // true
  console.log(e.message);              // "Hello, EvalError"
  console.log(e.name);                 // "EvalError"
}

查一些资料说下面方式就会抛出该类型异常，但试了一下抛出的异常是 TypeError 。

new eval();

RangeError

const arr = new Array(<