/webfunny_monitor

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

Primary LanguageJavaScriptApache License 2.0Apache-2.0

GitHub repo size GitHub last commit GitHub issues GitHub closed issues GitHub

如果你是一位前端工程师,那你一定不止一次去解决一些顽固的线上问题,你也曾想方设法复现用户的bug,结果可能都不太理想。 怎样定位前端线上问题,一直以来,都是很头疼的问题,因为它发生于用户的一系列操作之后。错误的原因可能源于机型,网络环境,复杂的操作行为等等,在我们想要去解决的时候很难复现出来,自然也就无法解决。

身为一名前端工程师,我每天都要面临很多线上的问题,一时间让我焦头烂额。公司其他的监控系统也有,但是每次解决问题都需要辗转于各种监控系统之间,亦是疲惫不堪。所以,我便为自己(前端工程师)量身定做了这样一款监控系统,现在分享给大家使用,欢迎点击了解。

只需要简单几步,你就可以搭建一套属于自己的前端监控系统了。

了解作品

【功能简介】 | 【Demo效果】 | 【关于开源】

部署方式

【正常部署】 | 【Docker容器化部署】

联系作者微信

微信号:webfunny_2020

目录结构

    |
    |──bin/                                    * 项目启动目录
    |     |
    |     |
    |     |—— domain.js                        * 域名配置文件
    |     |—— messageQueue.js                  * 消息队列开关配置文件
    |     |—— mysqlConfig.js                   * mysql数据库连接配置文件
    |     |—— purchaseCode.js                  * 激活码配置文件
    |     |—— saveDays.js                      * 日志存储周期配置文件
    |     |—— webfunny.js                      * 服务启动文件
    | 
    |
    |——config/                                 * 基础配置目录(使用者可以不用关注)
    |
    |——controllers/                            * 业务逻辑代码(已加密)
    |
    |——interceptor/                            * 拦截器代码(监控到的异常都会经过拦截器,使用者可以自定义报警)
    |             |
    |             |—— customerWarning.js       * 对项目总体评分的拦截
    |             |—— httpRequest.js           * 产生接口请求会被拦截到
    |             |—— javascriptError.js       * 产生js报错会被拦截到
    |             |—— resourceError.js         * 产生静态资源加载失败的情况会被拦截到
    |
    |——lib/
    |     |
    |     |—— RabbitMq.js                      * 消息对列创建文件
    |     |—— webfunny.min.js                  * 探针生成的模板文件
    |
    |——logs/
    |      |
    |      |——errors/                          * 监控系统运行错误日志目录(排查部署问题)
    |      |
    |      |——info/                            * 普通日志打印目录
    |
    |
    |——modules/
    |         |
    |         |—— models.js                    * 业务逻辑代码(已加密)
    |
    |
    |——routes/                                 * 路由、定时器
    |
    |——views/                                  * 监控系统页面代码
    |
    |
    |
    |—— app.js                                 * 程序入口文件
    |—— Dockerfile.js                          * docker部署配置文件
    |—— restart.sh                             * 程序重启脚本文件(需设置此文件的执行权限)

    |—— 其他文件或目录,使用者大可不必关注