一场前端监控主题分享带给我的启发

2020.4.25 前端如何搞监控

场景

搭建平台开发的组件太多，实际上很多功能类似，需要监控组件在一类场景下效能如何
组件监控的指标

• 引用量，引用次数高对此组件的优先级也高
• 曝光点击率： 引导转化率 = 引导成交量/点击量/曝光量
• 数据接口： 加载时间、组件异常、白屏率
• 配置复杂度：比如输入转选择类型，预设默认值，减少用户配置时间
• 代码质量：编译过程中，ESlint上报不合规

App、小程序监控
监控目的：

• 有没有人用
• 用的怎么样
• 有什么异常
• 如何跟踪
• 分析解决
• 提供决策

工具
以宋小菜为例：
----
第一版

• Countly: 针对RN应用
• 友盟：针对原生APP

第二版

• BugSneg 针对RN
• MongoDB 数据存储
• RGB 基于Koa自建

第三版

• 采集SDK 自研平台
• Filebeat 节点 Node Transfer 做日志采集转发
• Kafka集群做分布式消息通信
• ES(ElasticSearch) 日志处理
• Datawarehouse 下沉到数仓
• Reports 大表哥报表平台
• MySQL/Redis Task存储

系统架构
----
客户端： PC/H5、RN、小程序
日志处理： log-transfer、Filebeat、Kafka集群、ElasticSearch
数据处理： Data Warehouse、监控系统后台
数据展现：可视化报表平台、监控看板

为什么自己研发

以贝贝举例：
假设有80个工程项目，每年需要支付28W左右监控费用 > 自己研发成本
业界方案对比（有一定误差，仅供参考）：