Open into-piece opened 3 years ago
先发散思维，列出自己可以想到的方法 react16在新的fiber架构下，新增生命周期componentDidcatch和static getDerivedStateFromError，可以捕捉事件异常 getDerivedStateFromError是协调阶段的生命周期，适合进行显示对应降级后UI的变更操作，而如记录错误信息会产生副作用的操作适合放在处于commit阶段的getDerivedStateFromError，进行错误收集后请求接口，上传到对应的服务器。 看了最新的sentry版本也是有对应的error boundry组件，相信也是运用了对应的生命周期 那么在16提供这个生命周期之前是怎么捕获的呢？现在的hook也同样不具备生命周期，该如何解决？
浅谈Sentry前端监控原理
每当代码在runtime时发生错误时，JavaScript引擎就会抛出一个Error对象，并且触发window.onerror函数。
Sentry对window.onerror函数进行了改写，在这里实现了错误监控的逻辑，添加了很多运行时信息帮助进行错误定位，对错误处理进行跨浏览器的兼容等等。
在这里Sentry使用了TraceKit来帮助它劫持window.onerror函数。TraceKit主要是用来进行抹平各浏览器之间的差异，使得错误处理的逻辑统一。
在我们使用Promise的时候，如果发生错误而我们没有去catch的话，window.onerror是不能监控到这个错误的。但是这个时候，JavaScript引擎会触发unhandledrejection事件，只要我们监听这个事件，那么就能够监控到Promise产生的错误。
先发散思维，列出自己可以想到的方法 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产生的错误。