GithubHelp home page GithubHelp logo

sunlianlong / webfunny_monitor Goto Github PK

View Code? Open in Web Editor NEW

This project forked from a597873885/webfunny_monitor

0.0 0.0 0.0 11.29 MB

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

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

JavaScript 100.00%

webfunny_monitor's Introduction

前言

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

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

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

系统特点

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

贡献者支持

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

上报功能列表

  1. 前端异常上报【完成】
  2. 用户PV/UV统计【完成】
  3. 页面加载时间统计【完成】
  4. 用户点击行为统计【完成】
  5. 接口请求日志统计【完成】
  6. 接口请求耗时统计【完成】
  7. 静态资源加载异常统计【完成】
  8. 实现JS页面截图【完成】
  9. 自定义日志上传【完成】
  10.日志数据分表分库【完成】

     将要增加的上报功能:

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

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

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

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

分析功能列表

  1. js报错实时监控【完成】
  2. js报错的统计分析【完成】
  3. js报错的详情分析和代码定位【完成】
  4. 静态资源加载异常实时监控【完成】
  5. 静态资源加载异常的统计分析【完成】
  6. 接口请求报错实时监控【完成】
  7. 接口请求报错的统计分析【完成】
  8. 用户pv/uv实时统计【完成】
  9. 记录回放功能(详细记录用户使用的足迹)【完成】

     将要增加的分析功能:

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

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

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

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

探针部署方式:

  1. 前往 新建应用

  2. 命令行:$ npm install webfunny-monitor --save-dev

  3. var wm = require("webfunny-monitor"); wm.initMonitor("应用ID", "userId", "1.0.0");

如果有问题,欢迎提问。

讲解须知

监控系统的探针代码

细节讲解

系统简介

概览

概览

错误预览

报错统计看板

实时变化

实时变化

前端错误统计

前端错误统计

错误详情分析

错误详情分析

用户行为检索

用户行为检索

webfunny_monitor's People

Contributors

a597873885 avatar a826604005 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.