20｜Sentry：线上错误与性能监控怎么处理？
蒋宏伟
你好，我是蒋宏伟。
今天这一讲是我们社区生态篇的最后一讲，我们来聊聊 App 上线之后，如果遇到线上异常，或者是线上性能问题应该怎么处理。
这是我们每个人都会遇到的问题。即便我们的代码在本地测试时没有问题，也有各种上线流程的保障，但由于线上环境的复杂性，也难免遇到各种奇奇怪怪的线上 Bug。我们既然不能完全避免线上 Bug，那么就需要尽可能地减少线上 Bug 对用户的影响，这就要用到线上监控系统了。
我曾经遇到过好几次老板甩来的 Bug，那时候我开发的 React Native 应用也没有接入线上监控，遇到问题只能绞尽脑汁在本地复现和解决。经历过那几次痛苦的 Debug 后，我就打算搞个 React Native 监控系统，从 2020 年开始至今，我一直在参与 58 大前端监控系统的设计和研发，其中 React Native 的监控也是由我负责的。
但是，从头搭建和迭代一个监控系统的成本非常高。如果你有线上错误和性能的监控需求，但公司内部没有现成的监控系统，那我的建议是直接用 Sentry。Sentry 提供了一个演示 Demo，你可以直接打开看看它具体都有哪些功能。
而且 Sentry 的代码是开源的，它既支持你自己搭建，也支持付费直接使用。
如果想自己搭建的话，Sentry 后端服务是基于 Python 和 ClickHouse 创建的，需要自己使用物理机进行搭建，我们的兄弟团队，转转团队就是这么做的。如果想付费使用的话，可以参考 Sentry 官方文档先试用一下，如果老板也觉得不错，愿意付费使用，那就省去了自己搭建和维护 Python 服务的麻烦事了。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
本文深入探讨了Sentry线上监控SDK的底层原理，包括收集用户信息、用户报错和用户性能数据。作者分享了实现一个简易监控SDK的方法，包括使用UUID算法生成用户唯一标识和收集设备信息。文章还介绍了普通JavaScript报错的收集和Promise报错的收集方法。对于需要了解线上错误与性能监控处理方法的读者具有一定的参考价值。 文章还介绍了React/React Native应用中组件render报错的收集方法，以及性能收集的原理和实现方式。性能收集主要包括App启动耗时、页面跳转耗时和请求耗时的统计方法，通过记录开始时间点和结束时间点来计算耗时。此外，还提供了示例代码来展示如何在React Navigation中统计页面跳转耗时，以及如何监听XMLHttpRequest的open和onreadystatechange事件来统计请求耗时。 总的来说，本文通过深入的技术讨论和实际示例，帮助读者了解了线上监控SDK的实现原理和方法，以及如何收集用户信息、错误信息和性能信息。对于开发人员和需要进行线上监控的团队具有一定的指导意义。
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《React Native 新架构实战课》，新⼈⾸单¥59
《React Native 新架构实战课》，新⼈⾸单¥59
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(7)
- 最新
- 精选
python4实例代码中用同步的log来简单代替上报, 真实上报是个异步过程, 能讲一下异步上报需要注意的点么? 比如会不会阻塞业务代码运行, 需不需要空闲时间集中上报作者回复: 因为报错通知的事件本身是异步的，上报请求本身也是异步的，所以不会阻塞，也无需考虑集中上报。
2022-05-1421
郭智强老师您好 ，您上面提到的那一段设置 ErrorUtils.setGlobalHandler 的代码我放到一个tsx 文件后，那这个文件应该在哪个地方 import 进去？我想在初始化的时候，就把这个 handler 设置好作者回复: 单独起个文件，在该文件中执行，然后把该文件在入口 index.js 文件中优先引入即可。
2022-05-182
魑魅魍魉👽老师您好, 我们也在使用Sentry 的 performance 来监控产线应用的性能, 项目中使用的是React Navigation V5. 同时也是直接使用Sentry提供的 ReactNavigationInstrumentation 作为routingInstrumentation. 但是在Sentry 的 Dashboard上会有很多的Route Change的Transaction. 这是什么原因?作者回复: 每次 Route，Sentry 都当作性能 Transaction 统计的，可以看下 Tracing 相关的文档。
2022-05-133
daosentry event 本身有很多信息，比如 tags 里有用户ID、设备号、部署环境、发布版号等； contexts 里有 详细应用信息、详细设备信息、操作系统信息 等；在 breadcrumbs 里有很多种类的路径信息。真的很丰富，sentry event 对象示例 https://bit.ly/3x84RVp 。（老师的 SDK 里的用户和设备信息对 sentry 上报系统来说，显得有点多余了。 ） 作业二， - 考虑上传每次正式发布版的 sourcemap ； - 在需要的时候，使用 Sentry.captureMessage 上报些特别调试信息； - 在需要的时候，使用 Sentry.setExtras 和 Sentry.addBreadcrumb 增加更多的信息到 sentry event 。2022-06-042- dao写了个简易的基于 sentry 监控的 sdk ，代码 https://bit.ly/3xKe1If ，应用 https://bit.ly/3NPUHQj。2022-06-131
- Geek_e3ffce老师您好，如何统计页面加载时长，类似web中的onload事件，rn能直接收集到这个时长吗2022-07-04
ad老师你好，Promise异常捕获，通过设置require('promise/setimmediate/rejection-tracking').enable(cusotomtRejectionTrackingOptions) 后，发生promise异常时，onUnhandled收不到回调，是什么原因呢？2022-06-24
收起评论