Giter VIP home page Giter VIP logo

xwarer / webfunny_monitor Goto Github PK

View Code? Open in Web Editor NEW

This project forked from mircle/webfunny_monitor

0.0 1.0 0.0 11.08 MB

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

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

HTML 52.16% JavaScript 47.84%

webfunny_monitor's Introduction

阅读须知

  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数据可视化

如果有问题,欢迎提问。

系统简介

前端错误统计

前端错误统计

错误详情分析

错误详情分析

用户行为检索

用户行为检索

webfunny_monitor's People

Contributors

a597873885 avatar a826604005 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.