Skip to content

通过向html页面中插入一段简单的JS探针代码,实现无埋点监控前端页面的用户行为,包括但不限于 PV/UV、报错日志、请求日志、静态资源加载情况、用户点击行为以及截图信息等等,目的在于帮助前端开发提高解决线上问题的效率。页面DEMO:

Notifications You must be signed in to change notification settings

mircle/webfunny_monitor

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

66 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

阅读须知

  1. webmonitor.js 为探针的源码

  2. /resource/fetchCode.js 为fetch的源码

  3. /resource/html2canvas0.js 为截图插件的源码

讲解须知

监控系统的探针代码

点击前往线上Demo

点击前往博客讲解

如果实在嫌部署麻烦,Demo系统可以提供7天的监控量,我会长期维护,点击跳转

探针部署方式:

  1. 根目录下执行命令$: webpack 得到一个压缩js文件(探针) lib/monitor.fetch.html2.min.js, lib/monitor.fetch.min.js

  2. 将探针代码插入到html页面head的最顶部

    ...

    <script type="text/javascript"> ...此处放置监控代码... </script>

    ...

  3. 启动mysql数据库,如果使用远程数据库可以参考教程:

    Mysql数据库的安装和使用

  4. 启动node服务器,可以参考教程:

    搭建前端监控系统(三)NodeJs服务器部署篇

    源码:NodeJs后台服务

  5. 启动分析平台界面,可以参考教程(README.md):

    源码:React数据可视化

如果有问题,欢迎提问。

系统简介

前端错误统计

前端错误统计

错误详情分析

错误详情分析

用户行为检索

用户行为检索

About

通过向html页面中插入一段简单的JS探针代码,实现无埋点监控前端页面的用户行为,包括但不限于 PV/UV、报错日志、请求日志、静态资源加载情况、用户点击行为以及截图信息等等,目的在于帮助前端开发提高解决线上问题的效率。页面DEMO:

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • HTML 52.2%
  • JavaScript 47.8%