前端异常监控的实现思路 -| = |- ）

实现异常监控的核心问题是 如何捕获错误信息

通常情况下，我们都知道捕获错误是使用下面的结构:

try {
  ...
} catch(e) {
  ...
}

是的，try/catch 的方式只适合局部的程序块，并不是适合全局，毕竟你需要考虑 render 函数并不允许此种方式来是实现错误捕获。

嗯，前端，当然可以用前端的方式来实现啦。

那么我们先介绍捕获错误的事件 error 事件，使用的方法如下：

window.addEventListener('error', event => {console.log(event)});

或者我们也可以使用这种形式：

window.onerror = function(message, source, lineno, colno, error) { 
   console.error(message, source, lineno, colno, error)
}

注意，这两种捕获方式并不相同，window.addEventListener('error') 相较于 window.onerror 返回的是一个 ErrorEvent ，不仅包含了 onerror 中所能获得数据，还可以触发此错误的 DOM 对象。

当两者都同时实现监听的时候，则以注册的顺序来触发对应的 callback 函数。

由于 error 事件只能捕获 ErrorEvent 类型的错误。那么它将无法帮助我们监听资源是否加载完成的情况，和 Promise 中未被 catch 的 reject 的错误。

那么我们接下来将分析这两个问题的应该如何解决。

LinkXSystem / learn-guide