二、前端监控之方案调研

前端监控体系

一个完整的前端监控体系包括了日志采集、日志上报、日志存储、日志切分&计算、数据分析、告警等流程。

对于一名前端开发工程师来说,也就意味着工作不再局限于前端业务的开发工作,需要有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、行为回放:还原异常是如何触发的,具体到每一步的操作,返回了什么样的异常,在哪个文件,在第几行代码等等信息。

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

成熟方案

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

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

为什么选择Sentry

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

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

参考资料

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

https://juejin.cn/post/6936562262480158728

相关推荐
rookie fish几秒前
Electron+Vite+Vue项目中,如何监听Electron的修改实现和Vue一样的热更新?[特殊字符]
前端·vue.js·electron
她超甜i5 分钟前
前端通过后端给的webrtc的链接,在前端展示,并更新实时状态
前端·javascript·webrtc
歪歪10011 分钟前
Redux和MobX在React Native状态管理中的优缺点对比
前端·javascript·react native·react.js·架构·前端框架
东风西巷15 分钟前
Atlantis Word Processor:全方位的文字处理专家
前端·学习·word·软件需求
今天不要写bug27 分钟前
基于elementUI实现一个可编辑的表格(简洁版)
前端·javascript·elementui
上优30 分钟前
Vue3纯前端同源跨窗口通信移动AGV小车
前端·vue.js·状态模式
h_k1008630 分钟前
Chrome 插件开发入门技术文章大纲
前端·chrome
一只小阿乐31 分钟前
vue-router 的实现原理
前端·javascript·vue.js·路由·vue-router
Zz_waiting.31 分钟前
案例开发 - 日程管理 - 第七期
开发语言·前端·javascript·vue.js·html·路由
一只小风华~35 分钟前
Vue:事件处理机制详解
前端·javascript·vue.js·typescript·前端框架