二、前端监控之方案调研

前端监控体系

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

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

相关推荐
killerbasd3 分钟前
还是迷茫 5.3
前端·react.js·前端框架
不会敲代码11 小时前
TCP/IP 与前端性能:从数据包到首次渲染的底层逻辑
前端·tcp/ip
kyriewen1 小时前
奥特曼借GPT-5.5干杯,而你的Copilot正按Token收钱
前端·github·openai
AC赳赳老秦1 小时前
投标合规提效:用 OpenClaw 实现标书 / 合同自动审核、关键词校验、格式优化,降低废标风险
开发语言·前端·python·eclipse·emacs·deepseek·openclaw
kyriewen1 小时前
代码写成一锅粥?3个设计模式让你的项目“起死回生”
前端·javascript·设计模式
千寻girling2 小时前
《 Git 详细教程 》
前端·后端·面试
之歆3 小时前
DAY08_CSS浮动与行内块布局实战指南(下)
前端·css
yqcoder3 小时前
CSS Position 全解析:5 种定位模式详解
前端·css
Rhi6374 小时前
从零搭建项目:React 19 + Vite 8 + Tailwind CSS v4 实战配置
前端
竹林8184 小时前
用Viem替代ethers.js:从一次签名失败到完整迁移的实战记录
前端·javascript