前端监控SDK开发 | 青训营笔记

54 阅读2分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 12 天

开篇:为什么我们要聊前端监控

监控是提高故障处理能力和保障服务质量必需的一环,它需要负责的内容包括:及时上报错误、收集有效信息、提供故障排查依据。

及时上报错误:发生线上问题后,经由运营或者产品反馈到开发人员,其中流转过程可能是几分钟甚至几十分钟,这段时间可能直接导致公司的经济损失。如果有一个监控系统,在线上出现问题时,监控系统能够第一时间报警,并且通知到开发人员,那开发人员就可以第一时间修复上线,使公司损失最小化。 收集有效信息:特别是移动时代,定位一个问题时,需要很多用户信息(如用户手机版本、网络情况、操作流程等)。如果没有监控数据,往往只能靠猜,又或是来回找产品运营甚至出现问题的用户去沟通定位,会花费大量的时间。假如监控系统里记录了设备信息、错误发生时的场景信息和用户的操作流程,我们就可以直接根据这些信息进行问题定位,在最短时间内完成故障修复,减小问题的影响面。 提供故障排查依据:监控前端SDK所上报的错误信息和其它的记录信息,其最终目的都是作为我们排查故障的依据,为我们保障服务提供坚实的依靠。

图片.png

图片.png

图片.png

概述:前端监控之常用性能指标

图片.png

图片.png

图片.png

概述:前端监控之前端常见异常

静态资源错误

图片.png 请求异常

图片.png js错误

图片.png 白屏异常

图片.png

小试牛刀:监控前端性能与异常

性能指标监控

图片.png js错误监控

图片.png 静态资源错误监控

图片.png 请求异常监控

图片.png