前端异常监控实践

用户1687375

发布于 2019-07-31 16:47:30

1.2K0

发布于 2019-07-31 16:47:30

文章被收录于专栏：较真的前端较真的前端

为什么要做前端异常监控

bug是不可能被全部测试出来的，由于成本和上线档期的考虑，测试无法做到“面面俱到”，即使时间充裕也总会有这样或那样的bug埋藏在某个角落。

此外，一个可靠的前端监控系统还可以化被动为主动，不再被动的等待客服来找，而是在问题出现时开发人员可以第一时间知道并解决。

捕获方式

可以捕获JavaScript错误的基本方法有以下三个：

try…catch
window.onerror
利用Promise.prototype.catch()

各个方法的优缺点：

评价捕获错误方式的好坏可以从以下几个维度考虑：

错误信息的完整性和可读性，包括完整的错误堆栈（Error Stack）
是否可以捕获异步错误
是否可以捕获跨域脚本的错误
对源代码的破坏性

下面来逐个对比上面三种方式。

try..catch优点是可以返回完整的错误堆栈，缺点是无法捕获异步异常，看下面的代码：

// 同步异常的捕获
function foo () {
  doSomething()
}

try {
  foo()
} catch (e) {
  console.log(e)
}
// 会打印出完整的错误堆栈
// ReferenceError: doSomething is not defined
//  at foo (<anonymous>:2:3)
//  at <anonymous>:6:3

// 异步异常的捕获
function onloadHandler () {
  doSomething()
}
try {
  window.onload = onloadHandler
} catch (e) {
  // 获取不到任何信息！
}

除了对于异步异常无法捕获之外，try…catch势必也会修改源代码，如果想通过try…catch捕获到全部异常的话，要在大量的代码中追加try…catch处理。

window.onerror的优点可以捕获同步和异步的异常，但是它受到同源策略的限制，只能捕获当前域名下的错误。

比如下面的情况：

// @file: example1.com/index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <script>
    window.onerror = function (...args) {
      console.log('--------------')
      console.log(args)
      console.log('--------------')
    }
  </script>
  <script src="http://example2.com/main.js"></script>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
    ...
</body>
</html>

exampl2.com/main.js中如果出现异常，window.onerror虽然会被触发，但是回调获取的信息没有任何参考价值，内容如下：

 ["Script error.", "", 0, 0, null]
0: "Script error."
1: ""
2: 0
3: 0
4: null

这是浏览器出于安全考虑，禁止了获取跨域脚本的错误信息。但是可以通过在<script>中设置crossorigin为anonymous来解决，同时服务器端也要做出修改，设置responese headers Access-Control-Allow-Origin:*。但是要注意，关于crossorigin也有他的局限性，并不是所有浏览器都完美支持，下面是各浏览器支持的情况：

图片来自《把前端监控做到极致》

利用Promise.prototype.catch()可以捕获Promise实例中发生的异常。

看下面的例子：

function queryData () {
  return myFetch('example.com/user?id=2393')
  .then(response => {
    // response.msg并不存在，所以对其调用toLowerCase()方法会报错
    console.log(response.msg.toLowerCase())
  })
}

//由于queryData()返回的是一个promise实例，所以可以用catch对异常进行捕获
queryData().catch(error => {
  console.log(error)
})

缺点是只能捕获promise内部的错误。

通过上面三种方式的对比，貌似没有哪个可以作为完美的解决方案。

不过我们还可以看看其他解决方案。

其他捕获异常方式

现在市面上已经有很多比较成型的解决方案。

框架提供的处理方式：
Vue提供的错误处理回调——Vue.errorHandler(无法捕获异步异常）
微信小程序提供的错误处理——onError(异步、同步都可以捕获)。
第三方错误监控解决方案——sentry和bugsnag
第三方的解决方案是前后端整体，只需要几行代码就可以完成所有处理
但是商用是需要花钱的。。。
hack手法——利用babel，将源码解析成功AST语法树，然后在所有function追加try…catch，重写js原生方法如setTimeout、forEach等方法。（这样代码体积会膨胀）