zenglincient / webfunny_monitor

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

Home Page:https://www.webfunny.cn/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

前言

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

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

部署教程:📚 想要自己部署一套监控系统,请看这里。 📚

具体内容:请移步线上监控系统

系统特点

  1. 切实解决工作中遇到的问题。
  2. 定期维护,保证数据准确率。
  3. 敏感信息加密,功能不断升级。

目录结构

     ./A-monitor-code   探针代码
     ./schema  数据库建表结构
     ./views/ 前端展示代码
     ./config  数据库配置目录
     ./logs  运行报错日志目录
     ./config.js 自动化配置文件

更新计划:更新排期计划表

开源说明

本项目是开源的,除了部分属于业务代码,不便开源,但是并不影响对项目本身(原理)的理解,也不会影响你的部署。 带来不便,请见谅。

贡献者支持

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

讲解须知

细节讲解

About

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

https://www.webfunny.cn/


Languages

Language:CSS 61.9%Language:JavaScript 34.9%Language:HTML 3.1%