二、前端监控之方案调研

前端监控体系

一个完整的前端监控体系包括了日志采集、日志上报、日志接收、日志处理、日志切分、数据分析、监控告警、行为回放等流程。

对于一名前端开发工程师来说，也就意味着工作不再局限于前端业务的开发工作，需要有Nginx服务运维能力、实时/离线分析能力、Node应用开发运维能力等等。

以下是一张完整的监控流程图：

在《一、前端监控之异常监控》里面，主要讲述的是日志采集和日志上报这2部分，这些是前端需要做的部分。

但是，后面还有很多事情需要后端来实现。

1、日志接收：建设后端应用，提供日志上报接口给到采集SDK

2、数据发布：后端应用接收到的日志后处理成可被实时流计算处理的流式数据，如DataHub、SLS、Kafaka等

3、日志处理：流计算平台对流式数据进行实时处理，可基于Flink、Spark、Storm等

（1）日志数据分析：基于样本的实时分析:基于OLAP数据库进行实时分析，如阿里云Hologres、Hive、Kylin等

（2）日志数据汇总计算：将原始日志实时汇总计算成指标（如错误率）后存入OLTP数据库，如阿里云RDS、GaussDB、TBase等

4、监控告警：建设前台应用，实现监控、告警

5、行为回放：还原异常是如何触发的，具体到每一步的操作，返回了什么样的异常，在哪个文件，在第几行代码等等信息。

如果公司有这样的财力，支持做整个前端的监控体系，那么还可以琢磨琢磨，但是业务才是企业的生存之道，一般情况下，没有机会给你慢慢的搞一套出来，你不得不寻找其他优质的开源方案。

监控的意义

盈利

公司的目的是盈利。一方面公司要控制成本，我们可以看到投入QA人力日益削减，另一方面又需要我们线上运行的代码更加稳定，有什么办法可以做到呢？一个高效的方法就是加强监控。

效率

通过监控，可以快速自主地发现问题。

可以将收集上来的数据进行分类筛选，然后设置报警告知。根据我们监控内容，设定不同的阈值，当达到阈值的时候，第一时间有效的通知到对应的研发人员，进行分析和修复。

通过监控，可以全方位了解页面运行情况。

通过信息收集，可以获取到用户访问的区域、机型、APP版本等基础用户信息，同时也可收集到页面运行时的性能，要知道性能就是金钱（打开速度一定程度上会影响用户的去留）。

通过监控，可以指导后期项目开发。

经过一段时间的沉淀，我们收集过的错误，可以绘制出一个报表，统计出我们某段时间内问题产生的原因、报错、解决方案。

规范

从研发流程上来看，我们的项目不是完成上线就万事大吉。需要监控页面线上运行情况，根据监控的数据及时进行复盘，循环迭代优化，形成持续的研发闭环生态。

以上这些监控的意义，是日后流程机制的指南，是研发同学的行为准则，也是老板、高工某些关键时刻做决策的参考内容之一。通过监控，更加直观地、全方位立体化地了解产品。

区分监控与统计

监控又分为异常监控和性能监控。即可以收集前端异常信息，也可以收集性能指标。

除了收集信息以外，还需要做一下统计分析。现有的统计平台，如：thunder，spy等通用的平台。

监控不同于统计，统计关注的是一段时间内访问情况的一个总和，对于实时性要求并不那么高，可以延迟上报、累计上报；监控则恰恰相反，关注的是页面运行时的情况。

成熟方案

市面上有很多成熟的方案可供选择：Sentry、FunDebug、ARMS（阿里）等等。但不论哪种系统的体系都基本是符合上文所讲到的体系。

Sentry
Sentry 是一个开源的实时错误追踪系统，可以帮助开发者实时监控并修复异常问题。
它主要专注于持续集成、提高效率并且提升用户体验。
Sentry 分为服务端和客户端 SDK，前者可以直接使用它家提供的在线服务，也可以本地自行搭建；
后者提供了对多种主流语言和框架的支持，包括 React、Angular、Node、Django、RoR、PHP、Laravel、Android、.NET、JAVA 等。
同时它可提供了和其他流行服务集成的方案，例如 GitHub、GitLab、bitbuck、heroku、slack、Trello 等。
目前公司的项目也都在逐步应用上 Sentry 进行错误日志管理。

Fundebug
Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java线上应用实时BUG监控。 
自从2016年双十一正式上线，Fundebug累计处理了10亿+错误事件，付费客户有阳光保险、荔枝FM、掌门1对1、核桃编程、微脉等众多品牌企业。

这里选择使用的是 Sentry 的开源版本。

为什么选择Sentry？

主要是因为一个字：钱！绝大部分监控系统都是需要收费的，而sentry则是免费的。其次是开源的，再看看star数量。

注意：sentry免费也只是普通版本。高级版本也是需要收费的！！另外开源协议使用的是Apache！

参考资料：

Apache开源协议：https://baike.baidu.com/item/Apache/6848636?fr=ge_ala

https://juejin.cn/post/6936562262480158728