「前端工程」浅谈如何落地一个B端监控系统

前言

一个项目不仅仅上线了就是完美的，你还要得知用户使用情况以及产品功能设计是否合理，线上问题如何定位，等等一系列问题...那么监控在这个过程起主导作用，我们不仅要听取用户的反馈更需要用数据去落实，进而设计出更好的解决方案。

本文将讲述如何从0-1设计一个B端监控系统，为产品更好的赋能！

系统设计分析

监控系统服务于你开发的项目，在这里我称之为应用系统。

通过明确监控系统的服务对象，我首先思考的是监控的目标，需要监控应用系统什么？

• 应用系统稳定性。针对稳定性，可以监控系统的错误。错误包括：js错误，promise异常，资源异常，白屏情况。
• 应用系统用户体验。监控性能，接口返回速度，静态资源的加载情况。
• 应用系统的业务。根据用户行为来推测出功能的使用频率以及合理性，在需求评审上可以通过数据来倒逼产品去完善产品。
• 应用系统用户画像。通过监控，我们可以大致清楚应用系统的UV（Unique Visitor，访客量）和PV（Page View，页面浏览量）。

其次，针对监控目标我需要思考如何采集数据和上报数据？

关于数据采集：

• 页面错误捕获。我需要监听全局error事件和unhandledrejection事件

• 页面性能监控。我通过原生api Performance

• 监控后端接口。可以分为手动监听和自动监听。手动监听就是需要给应用系统暴露方法，应用系统调取此方法再进行数据采集。自动监听就是通过重写ajax请求或者fetch请求。

• 监听用户点击事件。这里要思考如何获取到这些需要被监控的元素？

  可以通过埋点或者配置化获取那些需要被监控的元素。至于埋点业界已经有很多的方案了。再这里，我会讲述如何通过配置化去获取需要被监控的元素。（ps：留个疑问，看完后续就会豁然开朗）

• 监控白屏情况

关于上报数据：

• 可以无感知获取，利用new Image的方式进行数据上报。
• 也可以感知获取，通过调用接口上报数据。

再则，收集到数据之后我如何对这些数据进行加工存储？以及如何及时提示各个相关负责人？

收集数据和上报数据之后，需要对数据进行分析。这部分需要一个服务端来支持。对于前端开发工程师，毫无疑问node服务对我们来说是最佳选择。

在数据处理的过程中，如果有异常数据需要及时提示相关负责人，这里我们可以使用两种方案。

如果各司有告警系统，可以接入告警系统或者可以在企业微信设置企业微信机器人来通知。

最后，如何将这些分析完的数据通过可视化的形式展示出来？

将分析完的数据通过可视化的方式进行展示。当然这个系统不仅仅只是展示，还可以进行一些配置。比如上述所说的被监控的元素可以通过配置化获取到...

所以这个可配置的可视化系统有两个职责：

第一是配置模块。通过配置要监控的应用系统、监控的路由、监控的元素。通过配置化的形式反向可以为上述提到的采集数据模块服务。

第二是展示数据。通过获取已分析的数据，让人一目了然的看到结果。

如下，整理的一个流程分析图：

系统组成部分

通过如上的分析，我将系统大体分化成三部分。

在采集数据和上报数据过程中，我设计一个sdk。将sdk应用在我的应用系统里。

在数据存储，加工和实时传输过程中，我设计一个后台系统，用来提供接口。服务于我的SDK和我的可配置的可视化系统。

最后就是一个可配置的可视化系统。

系统技术方案

得知一个监控系统是由哪几部分组成之后，需要思考每一部分是如何设计？

可视化平台设计

这个平台通过两个大的方向去做设计:配置和视图。

配置的话可以通过这三个维度去实现:项目配置、项目/路由配置、项目/路由/元素配置。（注：这里的项目、路由、元素均和应用系统相关）

通过配置项目，即可得到每个要监控的B端应用系统，关键点是应用系统的host和自动生成每个应用系统唯一的key来区分。再则，可以配置应用系统的所对应的路由，最后配置每个路由下要监控的元素。

在配置完成之后，视图层我们也可用如上的是三个维度去展示数据。当然也可以纵观全局去观察查询数据，比如接口信息，用户画像，日志信息。

sdk设计

关于sdk，我设计成一个npm package。通过其暴露的init方法初始化这个sdk。sdk内部也暴露了几个方法，可以手动收集也可自动收集。

init方法获取通过可视化平台配置的数据，并且将用户信息上报。设计每个用户随机生成一个session_id。sdk主要是放在应用系统中使用。比如在监控应用系统的元素过程中，sdk先是调用后台接口获取被监控的元素，然后sdk将元素进行事件绑定。在元素被操作时调用接口上报数据。sdk暴露方法，在应用系统中通过路由前置守卫去调用这个方法。

因为可视化平台我是以项目/路由的维度展示数据的，所以在上报数据时，需要将当前路由的以path_name一起上报。

后台设计

这个后台基于node egg框架去编写，数据库是mysql。分为三个维度去设计，可视化平台接口设计、sdk接口设计、用户权限接口设计。

对于数据上报，后台提供接口使得sdk通过接口调用上报数据。可视化平台接口设计，主要是通过上面的三个配置维度去建表存数据，然后后台提供增删改查的能力。对于采集到的数据通过开启定时的任务将数据落到数据库里，并且会创建定时任务去删除数据库的数据。采集到的数据通过数据分析过滤将数据可视化，所以这部分的接口也是会被可视化平台应用。

对于监控系统来说，也需要一个告警的能力。如何让相关负责人得知这个异常，并且及时解决。需要接入告警系统 或者 简单的话可以通过第三方工具企微。

后台系统的设计，将它分成三大部分，下面是每部分的相关设计：

• 可视化系统相关设计

• sdk相关设计：

• 用户权限相关设计：

下面将实现的监控元素、监控错误信息、监控接口信息的这三个方向进行整体的梳理

监控元素的总体思路： 监控错误信息的总体思路： 监控接口信息的总体思路：

总结 & 后期

整个系统的思路大致是这样的，在这个过程中形成了闭环，通过可视化平台去完善埋点，同时也可以复盘产品设计的合理性。

对于监控这件事情来说，对于应用系统有重大的意义。通过监控来分析应用系统中的一些关键业务流程，通过对比促使是否可以优化业务流程，来提高人效这件事情。也可以通过监控观察业务本身的意义，以及业务产生的一些数据，来赋能整个产品线。通过监控得知痛点，后期如何落地解决方案，当然也需要根据不同的产品场景去跟踪。

到这里，监控系统end。如果有帮助到您，您的赞是对我最大的支持~

最后，提前祝大家圣诞节🎄快落~

eggjs.org/zh-cn/basic…