静态html页面请求接口,GitHub - chenming142/webfunny_monitor: 通过向html页面中插入一段简单的JS探针代码，实现无埋点监控前端页面的用户行为，包括但不限于 ...

怎样定位前端线上问题，一直以来，都是很头疼的问题，因为它发生于用户的一系列操作之后。错误的原因可能源于机型，网络环境，复杂的操作行为等等，在我们想要去解决的时候很难复现出来，自然也就无法解决。 当然，这些问题并非不能克服，让我们来一起看看如何去监控并定位线上的问题吧。

市面上的前端监控系统有很多，功能齐全，种类繁多，不管你用或是不用，它都在那里，密密麻麻。往往我需要的功能都在别人家的监控系统里，手动无奈，罢鸟，怎么才能拥有一个私人定制的前端监控系统呢？做一个自带前端监控系统的前端工程狮是一种怎样的体验呢？

系统特点

稳定运行，欢迎试用。

定期维护，保证准确率。

敏感信息加密，功能不断升级。

上报功能列表

前端异常上报【完成】

用户PV/UV统计【完成】

页面加载时间统计【完成】

用户点击行为统计【完成】

接口请求日志统计【完成】

接口请求耗时统计【完成】

静态资源加载异常统计【完成】

实现JS页面截图【完成】

自定义日志上传【完成】

将要增加的上报功能：

1)接口增加参数和返回结果的统计(敏感信息加密)

2)增加应用版本号字段，排查因发布造成的bug

3)增加页面加载性能相关信息上报

4)即将增加录屏功能测试

分析功能列表

js报错实时监控【完成】前往

js报错的统计分析【完成】

js报错的详情分析和代码定位【完成】

静态资源加载异常实时监控【完成】前往

静态资源加载异常的统计分析【完成】

接口请求报错实时监控【完成】前往

接口请求报错的统计分析【完成】

用户pv/uv实时统计【完成】

记录回放功能(详细记录用户使用的足迹)【完成】前往

将要增加的分析功能：

1)增加7日内留存数据分析

2)增加版本号分析，浏览器分布，等信息分析

3)分析页面加载性能数据

探针部署方式：

命令行：$ npm install webfunny-monitor --save-dev

var wm = require("webfunny-monitor");

wm.initMonitor("应用ID", "userId", "1.0.0");

如果有问题，欢迎提问。

贡献者支持

一颗star, 一份关注, 都将是我前进的动力 :)

讲解须知

监控系统的探针代码

系统简介

概览

错误预览

实时变化

前端错误统计

错误详情分析

用户行为检索