二、前端监控之方案调研

前端监控体系

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

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

相关推荐
ct97816 小时前
组件间的通信
前端·javascript·vue.js
左手吻左脸。16 小时前
Vue 全栈面试题大全(2026 最新版最详细)
前端·javascript·vue.js
Aphasia31116 小时前
手写KeepAlive组件
前端·react.js·面试
两个西柚呀16 小时前
js中的同步和异步,三种处理异步任务的方式
前端·javascript
pe7er17 小时前
软件设计不要“既要又要”
前端·后端·架构
kyriewen17 小时前
从Webpack到Vite:我们迁移了一个10万行代码的项目,总结了这7个坑
前端·webpack·vite
IT_陈寒17 小时前
Java Stream并行流的坑:我花了3小时才找到的线程安全问题
前端·人工智能·后端
小新11017 小时前
最简单但完整的 Vue 响应式示例(一个简单的计数器按钮)
前端·javascript·vue.js
鹿青18 小时前
给设计稿做体检:我搓了个 Skill,专治 Figma 转代码出垃圾
前端·claude·视觉设计
陈_杨18 小时前
鸿蒙APP开发:足球战术App怎么做拖拽交互?球员拖动与路线绘制
前端