二、前端监控之方案调研

前端监控体系

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

对于一名前端开发工程师来说,也就意味着工作不再局限于前端业务的开发工作,需要有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

相关推荐
小粉粉hhh4 分钟前
React(三)——Redux
前端·javascript·react.js
易知微EasyV数据可视化1 小时前
定制化3D组件开发:打造差异化孪生体验
前端·人工智能·经验分享·数字孪生
前端炒粉2 小时前
Vue2 SSE 流式对话完整前端代码
前端·sse·流式输出
BIM云平台开发2 小时前
【App.vue里跟踪页面跳转和用户ID】
开发语言·前端·javascript
汪汪大队u2 小时前
Zabbix 6.0 部署踩坑记:从启动失败到 Web 成功访问
前端·zabbix
顺颂时绥_12 小时前
new Set 过滤数据实战
前端
赵大仁2 小时前
Next.js + Vercel AI SDK 实战:30 分钟搭出流式 Chat 页面
前端·ai·实战·react·next.js·vercel
云空3 小时前
《Three.js 完整版3D魔方:带贴纸+中心固定+自动求解复原》
前端·javascript·3d·three.js
酸梅果茶3 小时前
【7】lightning_lm项目-LIO 前端 -IVox 局部地图
前端·slam
gis开发之家3 小时前
《Vue3 从入门到大神33篇》Vue3 源码详解(三):响应式核心思想——从 Object.defineProperty 到 Proxy
前端·javascript·vue.js·vue3·vue3源码