前端异常监控

前端异常监控.md

前端异常监控

为什么需要前端异常监控

如今Web庞大复杂应用场景广泛，再加上各种浏览器造成的环境差异，很难保证我们的页面呈现给每个用户时都是正常的。稳定和准确是每个产品的基础，对于用户直接交互的页面更加显得重要。我们不能等到用户投诉后才知道出现问题，而是应该主动监控尽快暴露出异常。

前端有哪些异常

• 静态资源加载异常
  • 网络环境恶劣
  • 运营商劫持
  • 文件丢失
  • 资源服务器异常
• CSS展现异常
  • 浏览器兼容
  • 不同屏幕大小
• js运行异常
  • 浏览器兼容
  • 服务接口返回数据异常
  • 我们写代码时没捕获到(考虑到)的异常

用badjs监控前端异常(引入badjs并详细介绍功能以及使用教程)

badjs官网

功能列表

• 收集上报浏览器UA和用户uin
• 历史日志查询
• 实时异常监控
• 高频错误统计
• 错误统计报表和邮件报表
• 使用source-map展示出正式环境的压缩代码

使用教程

• 一键docker部署
• 给web页面注入错误收集上报脚本

badjs原理与架构

GitHub地址

原理

• 错误采集（浏览器兼容，采集错误详细信息）
• 错误上报（跨域上报，随机上报，合并上报）

架构

• badjs-report
• badjs-acceptor
• badjs-storage
• badjs-mq
• badjs-web

提高与展望

提高

• 通过lz压缩算法对上报的错误信息进行压缩减少上报流量
• 异常高频出现时发送警告

展望

• 大前端异常监控一体化解决方案（监控iOS，android，RN等端的异常）
• 对于一个突显高频错误自动算出开始出现的时间点结合发布系统得出那次发布导致该高频错误，缩小错误定位范围
• 智能分析异常算法（针对错误关键字去Google搜索找出可能出现的原因并分析源代码提示程序员导致出错的地方）
• 样式展示异常监控（浏览器内核蜘蛛定时抓起页面截图保存对比前后差异）
• 通过html5 performance API监控页面性能异常（一行改动不小心带入内存泄漏导致页面卡顿）