前端监控体系建设

前端监控体系主要分为错误监控、性能监控、业务监控及安全监控三个方面。

一、错误监控

（一）监控范围

js语法错误、资源加载失败、设备网络错误、http异常状态码、接口异常和网页是否可访问。

（二）第三方工具

1、sentry
2、honeybadger
honeybadger官网拿sentry与其产品对比 ,说它们无需再购买pingdom(监控网页性能和可用性)及cronitor(服务的定时任务cron监控、心跳监测及服务或网站正常运行时间监控)。
3、fundebug
4、阿里的arms
5、国外的 logrocket 及rrweb其支持屏幕录制回放

（三）基本知识及方法汇总

1、前端错误监控系统汇总
2、sentry与fundebug对比

二、性能监控

（一）监控范围

白屏时间、首字节时间、首屏时间、网络时间、DOM构建及资源渲染时间、总加载时间等

（二）第三方工具

1、sentry
2、oneapm
3、阿里的arms
4、国外的NewRelic
5、国外的atatus https://www.atatus.com/browser-monitoring/features

（三）性能监控基本知识及方法汇总

关于web前端性能监控的那些事儿

三、业务监控

（一）监控范围

PV访问来量（Page View） /UV访问数（Unique Visitor）、业务转化、用户行为等

（二）第三方工具

1、手动埋点(代码埋点)

• 百度统计
• matomo (开源)
• 友盟

2、可视化埋点

• 开源的Mixpanel
• TalkingData
• 诸葛 IO
• 腾讯的 MTA

3、无埋点

• GrowingIo https://www.growingio.com/
• 数极客 https://www.shujike.com/
• 神策数据
• 阿里的arms

四、安全监控监控

1、Checkmarx

image.png

关于前端安全，发布前可使用eslint-plugin-security 进行检测。

五、其他

1、

构建日志应用

2、服务运行日志监控 ELK(Elasticsearch + Logstash + Kibana) 或 ELK Stack
3、美团的后端监控工具 CAT — 实时应用监控平台
4、推荐参考资料 前端监控体系建设思考——前端研发体系
5、全方位的开源监控工具链介绍 里面涉及到前端、APM、JMX监控、服务器监控、数据库监控、CI/CD监控、测试监控和日志监控
6、node性能监控
a、运行时：Alinode
b、信息上报：基于 agenthub 修改
https://github.com/aliyun-node/agenthub 整合 agentx 和 commdx 的便利工具
https://github.com/aliyun-node/agentx
https://nodesource.com/products/nsolid/
c、数据存储
d、数据展示
7、node 服务运行日志监控 ELK
8、info监控: fluentd 行为监控: influxdb+grafana
9、app崩溃监控 crashlytics https://firebase.google.com/products/crashlytics
10、云端监控：datadog主要用于性能监控、基础设施监控、组件监控及日志监控
11、前端埋点总结 https://segmentfault.com/a/1190000037512181
12、vue项目引入腾讯移动分析平台统计页面浏览量和功能按钮点击量的具体方法步骤

image.png

image.png