前端异常示例

引子

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

基础知识点

前端异常一定会接触到 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(-10)

67-range-error

ReferenceError

let a = undefinedVariable

67-reference-error

SyntaxError

eval('hello syntax')

67-syntax-error

有些语法错误是无法捕获的，因为可能导致整个程序无法正常运行，不过这类型大多在编写阶段就会很容易发现。

const a++;

TypeError

const a = 'hell';
a.fun();

67-type-error

URIError

decodeURIComponent('%')

67-uri-error

AggregateError

Promise.any([
  Promise.reject(new Error("some error")),
]).catch(e => {
  throw e; // 这里抛出，让 onunhandledrejection 接收会有详细的异常信息
});

67-aggregate-error

DOMException

const node = document.querySelector('#demo'); // 这个要存在
const refnode = node.nextSibling;
const newnode = document.createTextNode('异常');
node.insertBefore(newnode, refnode);

67-dom-exception

DOMError

已经不推荐使用了，但一些浏览器还是兼容了这个。

const err = new DOMError('DOMError');
throw err;

67-dom-error

ErrorEvent

const err = new ErrorEvent('ErrorEvent');
throw err; // onerror 会捕获到

67-error-event

资源加载异常

常见的 link、script、img 标签加载异常都是这样类似的信息：

67-static-error

接口请求异常

基础 XMLHttpRequest 示例：

const xhr = new XMLHttpRequest();
xhr.open("GET", "http://localhost:6677/index");
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) {
    if (xhr.status == 200) {
      console.info('success')
    } else {
      console.info('xhr error：',xhr)
    }
  }
};
xhr.send();

67-xhr-error

基础 fetch 示例：

fetch("http://localhost:6677/index").then((res) => {
  if (!res.ok) {
    throw res;
  }
}).catch((e) => {
  console.info('fetch error：',e);
})

67-fetch-error

Script error.

这个本地（浏览器直接文件路径访问）很容易出现，例如点击按钮的时候，抛出了一个异常，onerror 也捕获到了，但什么信息也没有：

67-script-error

换成 try-catch 捕获，有了一些信息：

67-try-script-error

这个应该是一个对象，用对象的形式打印一下：

67-error-object

这样就可以拿到相关的信息进行解析了，可参考 TraceKit 。

区分

看到上面的示例，有好几种形式的异常，进行处理的时候，区分判断的依据是什么？

思路 1

比较简单的做法，就是不用区分，既然都是异常，整个全都上报，在后台人工查看一样可以达到异常分析排查的目的。

思路 2

通过检查特定字段，或者字段的组合来判断区分。针对特定的异常可以做到，所有的就不太清楚了。

思路 3

在看 sentry 源码的时候，发现了另外一种思路：根据异常的类型来区分。

使用的主要方法是：

function getType(value) {
  return Object.prototype.toString.call(value);
}

按照这个思路，异常类型有：

[object Error] ：属于这种类型的异常有 RangeError 、ReferenceError、SyntaxError、TypeError、URIError 。
[object Exception] ：这个没找到，但 sentry 里面有写。
[object DOMException] ：属于这种类型的异常有 DOMException 。
[object DOMError] ：属于这种类型的异常有 DOMError 。
[object ErrorEvent] ：属于这种类型的异常有 ErrorEvent 。
[object PromiseRejectionEvent] ：这个有些特殊，当上面的 AggregateError 在 catch 里面检查类型时属于 [object Error] ，如果 throw 时，在 onunhandledrejection 里面类型变成了 [object PromiseRejectionEvent] 。

这里大概的写一下 sentry 的区分逻辑：

const exception = 'some value';
let format;
if (isErrorEvent(exception) && exception.error) {
  format = doSomething1(exception);
  return format;
}

if (isDOMError(exception) || isDOMException(exception)) {
  format = doSomething2(exception);
  return format;
}

// isError 包含的类型有 [object Error] [object Exception] [object DOMException] ，以及继承自 Error 对象的自定义对象。
if (isError(exception)) {
  format = doSomething3(exception);
  return format;
}

// isPlainObject 检查类型是 [object Object]，isEvent检查的是 wat instanceof Event
if (isPlainObject(exception) || isEvent(exception)) {
  format = doSomething4(exception);
  return format;
}

format = doSomething5(exception);

return format;

参考资料

Error mdn