前端异常监控方式

1、window.onerror 异常处理

window.onerror 无论是异步还是非异步错误，onerror 都能捕获到运行时错误。

window.onerror = function (event) {
  console.log('我知道错了')
  console.log(event)
  return true
}
setTimeout(() => {
  null.length //  报错
}, 10)

window.onerror 函数只有在返回 true 的时候，异常才不会向上抛出，否则即使是知道异常的发生控制台还是会显示 Uncaught Error: xxxxx。

2、Promise 错误

Promise 实例抛出异常而你没有用 catch 去捕获的话，onerror 无法捕捉到错误。特别是你在一些基于 promise 的库比如 axios 等一定要小心，因为你不知道什么时候这些异步请求会抛出异常而你并没有处理它，所以你最好添加一个 Promise 全局异常捕获事件 unhandledrejection。

window.addEventListener('unhandledrejection', function(e){
  e.preventDefault()
  console.log('我知道错了')
  console.log(e.reason)
  return true
})


new Promise((resolve, reject) => {
  reject('error') //  报错
})

3、iframe 错误

父窗口直接使用 window.onerror 是无法直接捕获，通过直接给 iframe 添加 onerror 事件即可。

<iframe src="/iframe.html" id="ref"></iframe>
<script>
let frames = document.getElementById('ref')
frames.onerror = function (event) {
  console.log('我知道错了')
  console.log(event)
}
</script>

监控拿到报错信息之后，接下来就需要将捕捉到的错误信息发送到信息收集平台上（比如阿里云日志平台），常用的发送形式主要有通过 Ajax 发送数据。