webfunny前端监控开源项目

前言介绍

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

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

系统特点

Webfunny是一套完整的前端监控系统方案，只需要简单几步就可以将这套监控系统移植到你自己的服务器上。

Webfunny经压力测试，可以支持千万级别日PV量，能够满足更多用户的场景需求。

Webfunny是私有化部署，所有的日志数据都存在使用者的数据库中，没有任何数量限制，也不会依赖我们的任何服务

Webfunny提供了很多报警机制，使用者可以自己修改代码，决定报警时机。

功能列表

1. 项目总览；监控系统支持多个项目，让所有项目的状态都一目了然。通过对线上项目的实时分析，让我们可以对线上状况有个非常直观的了解。例如PV、UV数据变化趋势，留存变化，页面停留时间，线上报错、异常等

2. 用户细查；深入分析每一个用户，记录下每个用户的所有行为。由于线上用户的操作行为十分复杂，有些问题可能隐藏在很多次操作之后，所以探针记录了用户的很多操作行为，一旦出现问题，复现BUG也将变得非常简单。 同时，可以使用多种检索条件进行搜索，提高查找效率。

3. 自定义埋点；用户可以自定义埋点，webfunny会将其记录下来，并定时分析。同时可以对多个埋点步骤进行漏斗分析，可以清晰的看到步骤之间的转化率，留存率等等。

4. 错误分析；精细化分析每一个报错问题，支持sourceMap源码定位。通过探针监控和上报线上环境的报错，以及一些自定义异常。我们对这些日志进行精确的分析，可以准确定位到代码的问题所在。同时能够看到每一个报错的变化趋势，也能够分析出用户在哪一步操作中发生了问题。

5. 性能分析；分析页面和接口性能，加载耗时，成功率。探针对页面的加载性能进行分析，直观反映在报表之上。也对接口的性能进行了分析，如：耗时、成功率等。

6. 无线调试功能；强大的调试功能，让你从繁杂的调试工具中解脱出来。无线调试功能可以让你随时线上用户，实时了解用户的行为、控制台打印信息、本地缓存信息等等。

环境要求

请安装NodeJS，版本号：10.6.0及以上。

第一步、下载(clone)最新部署包，初始化

1.本地克隆代码$：git clone https://github.com/a597873885/webfunny_monitor.git 

使用码云仓库$：git clone https://gitee.com/webfunnyMonitor/webfunny_monitor.git（github网络不稳定，可以使用码云地址）

2.在项目根目录下执行初始化命令和安装命令$：npm run init && npm install 

3.确认是否安装了pm2，如果没有安装pm2，请执行安装命令$：npm install pm2 -g 

第二步、配置数据库(Mysql)连接

1. 安装 Mysql 数据库（Mysql安装教程） 

2. 创建数据库（webfunny_db） 
创建数据库：webfunny_db。 
字符集设置：[Default Character set]：utf8、 [Default Collation]：utf8_bin

3. 数据库连接配置
进入webfunny_monitor/bin/mysqlConfig.js文件中

第三步、本地部署运行

1) 此时此刻，本地配置已经完成了，尝试运行命令$: npm run prd

2) 打开浏览器，访问地址：http://localhost:8010/webfunny/register.html?type=1 (初始化管理员账号，并登录)

3) 创建新项目后，可以看到探针部署教程，完成部署。

第四步、生产环境部署（域名配置方式2选1）

1. IP地址或者域名配置（方式一）
进入webfunny_monitor/bin/domain.js文件中（注意，对应的端口号要保持一致）

IP地址配置方式：

域名配置方式：

配置完成后，浏览器访问以下地址，确保能够访问成功。

1) 项目列表地址：http://xxx.xxx.xxx.xxx:8011/server/webMonitorIdList 或 http://www.baidu.com:8011/server/webMonitorIdList
2) 数据展示地址：http://xxx.xxx.xxx.xxx:8010/webfunny/overview.html 或 http://www.baidu.com:8010/webfunny/overview.html

2. 代理域名配置（方式二）
使用代理域名的用户，请一定要理解清楚Nginx代理的方法

代理域名配置方式（端口号还是需要配置的）：
配置完成后，浏览器访问以下地址，确保能够访问成功。

1) 项目列表地址：http://www.baidu.com/server/webMonitorIdList
2)数据展示地址：http://www.baidu.com/webfunny/overview.html

第五步、添加执行权限

正常情况下 createTable.sh, restart.sh 这两个脚本没有执行权限，需要用户手动授权。
linux、mac系统，需要在项目根目录下执行命令$：chmod 755 createTable.sh， chmod 755 restart.sh 进行授权。
其他操作系统，请自行搜索授权方式
【注意】如果不授权，可能无法自动创建每天的数据库表

1. Nginx代理配置

很多情况下，我们是不想在请求的URI中包含端口号的，所以我们一般会用nginx代理8011，8010两个端口号。

1. 用80端口代理8011，8010两个端口号（可支持http），并且代理socket

2. 用443端口代理8011，8010两个端口号（可支持https）