如何实现异常监控

[into-piece]

先发散思维，列出自己可以想到的方法
react16在新的fiber架构下，新增生命周期componentDidcatch和static getDerivedStateFromError，可以捕捉事件异常
getDerivedStateFromError是协调阶段的生命周期，适合进行显示对应降级后UI的变更操作，而如记录错误信息会产生副作用的操作适合放在处于commit阶段的getDerivedStateFromError，进行错误收集后请求接口，上传到对应的服务器。
看了最新的sentry版本也是有对应的error boundry组件，相信也是运用了对应的生命周期
那么在16提供这个生命周期之前是怎么捕获的呢？现在的hook也同样不具备生命周期，该如何解决？

浅谈Sentry前端监控原理

window.onerror劫持

每当代码在runtime时发生错误时，JavaScript引擎就会抛出一个Error对象，并且触发window.onerror函数。

Sentry对window.onerror函数进行了改写，在这里实现了错误监控的逻辑，添加了很多运行时信息帮助进行错误定位，对错误处理进行跨浏览器的兼容等等。

在这里Sentry使用了TraceKit来帮助它劫持window.onerror函数。TraceKit主要是用来进行抹平各浏览器之间的差异，使得错误处理的逻辑统一。

监听unhandledrejection事件

在我们使用Promise的时候，如果发生错误而我们没有去catch的话，window.onerror是不能监控到这个错误的。但是这个时候，JavaScript引擎会触发unhandledrejection事件，只要我们监听这个事件，那么就能够监控到Promise产生的错误。