前言
怎样定位前端线上问题,一直以来,都是很头疼的问题,因为它发生于用户的一系列操作之后。错误的原因可能源于机型,网络环境,复杂的操作行为等等,在我们想要去解决的时候很难复现出来,自然也就无法解决。 当然,这些问题并非不能克服,让我们来一起看看如何去监控并定位线上的问题吧。
暂停部署
本项目将会在2月15日之前发布新版本,会有更好的使用体验。大家可以暂停部署当前这个版本。
部署
只需要简单几步就可以搭建一套属于自己的前端监控系统,欢迎关注和Star。
【监控系统效果】 | 【开源说明】 | 【微信号】webfunny_2020
主体功能
-
监控JS报错、http接口报错、静态资源加载报错等;记录页面访问、点击事件、接口请求等行为日志;
-
统计PV/UV数据、用户7天留存数据、版本号/机型/地域分布数据
-
提供报错具体查找和定位功能、用户详细行为追踪与分析功能、用户网络环境评估功能
-
提供额外上报接口,上报自定义日志
目录结构
./A-monitor-code/webmonitor.js 探针代码
./schema 数据库建表结构
./views/ 前端展示代码
./config 数据库配置目录
./logs 运行报错日志目录
./config.js 接口配置文件
更新计划:更新排期计划表
贡献者支持
开发了这么久,也是颇有一番感慨。 一叹,前辈高人技艺之精湛;二叹,开源世界心胸之广阔;正是有这些无私奉献的大牛们,才让这技术的世界多姿多彩。
一颗star, 一份关注, 都将是我前进的动力 :)