前言
如果你是一位前端工程师，那你一定不止一次去解决一些顽固的线上问题，你也曾想方设法复现用户的bug，结果可能都不太理想。
如何定位前端线上问题？一直以来，都是很头疼的问题，因为它发生于用户的一系列操作之后。错误的原因可能源于机型，网络环境，复杂的操作行为等等，很难在开发环境中复现出来。特别是前端在没有监控系统加持的情况下，往往需要人肉解决问题，还要应对产品的需求轰炸，真真是太难了！！！
今天就让我们一起告别这种无奈，给大家介绍一款非常好用的前端业务日志监控工具— Webfunny，只需要简单几步，你就可以搭建一套属于自己的前端监控系统啦~
Webfunny前端系统概述
Webfunny是一款轻量级前端异常监控和前端性能监控系统，致力于帮助前端工程师定位并解决各种线上问题，确保项目健康良好的运行。支持千万级别日PV量，能够满足用户的各种场景需求。同时，针对不同企业和用户，提供一对一的定制化服务，满足更多业务需求。
Webfunny前端系统-特点
- 轻量级：可以随时部署在任何地方，支持ESC部署和Docker部署，非常快捷方便；
- 功能全面：不限制应用的流量、自定义日志存储时间，能够适应更多高并发的场景；
- 针对性强：针对前端使用场景研发，辅助前端开发，容易上手；
- 无风险：所有监控数据都可以回流，监控日志都存储在你们自己的数据库内，不依赖任何第三方；
- 一对一定制化服务
Webfunny前端系统-功能模板
==一、实时数据分析大屏==
线上项目有很多，能否实时掌握每个项目的运行状态很重要，Webfunny提供了实时数据分析大屏，及时地了解线上项目的各项指标。
==二、产品运营数据总览==
==2.1、 PV / UV 变化趋势分析==
统计24小时内，每个小时的PV、UV、新用户、访问频次的变化趋势；同时还会展现出，上个周期（一周前）同一时间点的变化趋势，对比出两个周期的变化量。
==2.2、 留存数据分析==
留存数据能够体现出用户对应用的喜爱程度和粘度，是优化用户体验的重要指标；其中包含：用户跳出率、新用户7天的留存率、新用户次日留存率、以及用户的平均停留时长等。
webfunny官网
==2.3、 综合数据分析==
综合数据能够表现出用户群体的硬件数据：设备型号、地理位置、系统版本、应用版本，对分析用户群体，和版本优化起着重要作用。
==2.4、 健康状况分析==
线上项目的健康状况并非一个直观的数据，它会涉及到Js错误、自定义错误、静态资源加载错误、接口错误等等，我们对其进行量化并打分，让你们能够直观地看到项目的健康状态，及时应对突发情况。
三、线上项目错误统计和分析
==3.1、Js错误统计分析==
错误统计包括：Js报错统计和自定义异常统计两大块，我们统计了30天内总的错误变化趋势，对单个错误进行聚合归类，可以更加直观的看到错误出现的严重程度。
Webfunny针对单个错误进行了细致的分析，帮助前端工程师来排查和定位错误发生的时间和位置。
Webfunny支持sourceMap逆向解析源码，定位源码位置更方便。同时我们统计了错误量的发展趋势，对于突然产生大量报错的应用场景，Webfunny能够快速并且精准定位到具体的某一分钟，大大提升排查问题的效率。
==3.2、 API接口错误统计分析==
Webfunny统计了30天内接口报错的变化趋势，针对于400、500等报错状态进行精细化的分类和统计，能够快速判断哪些接口出了问题，及时找到后端小伙伴进行沟通。
==3.3、静态资源加载错误统计分析==
静态资源加载异常，最直观的表现就是应用白屏，页面假死状态，是判断线上应用是否健康的一个非常重要的指标。它产生的原因有可能是云服务器异常，第三方异常（如CDN等），所以需要针对这个指标做好容错方案。
四、线上项目性能统计和分析 ==4.1、 页面加载性能分析==
Webfunny可以实时分析线上应用的加载情况，针对加载时间，分为5个时间段，分别是：<1秒、1-5秒、5-10秒、10-30秒、>30秒；可以清晰的看到那些属于慢加载页面，从而进行优化。
==4.2、API接口性能分析==
Webfunny可以实时分析线上API接口请求耗时的情况，针对接口耗时，分为5个时间段，分别是：<1秒、1-5秒、5-10秒、10-30秒、>30秒；可以清晰的看到哪些接口耗时比较多或者请求量过多，然后找到后端小伙伴进行协商优化。
五、用户行为记录和追踪（复现BUG）
Webfunny可以根据userId检索出过去任何时间点，某个用户所有的行为记录，包括：浏览记录、接口请求（参数和返回值）、报错记录、点击行为等等；同时能够对用户当时的网络环境进行评估。由于搜集了用户所有的行为记录，复现BUG将变得非常简单~
六、连接线上用户（无线调试） ==6.1、连接线上用户==
根据用户的UserId，跟用户进行线上连线以后，能够实时掌握用户的每一个动作，从而帮助用户实时解决他的问题。同理，也可以用于平时的测试中，即使不使用复杂的调试工具，也能够轻易的掌握接口请求，报错等问题。
==6.2、无线调试模式==
移动端调试的时候，无法看到控制台打印的消息，也无法知道本地缓存中信息，通过无线调试模式，Webfunny可以轻易地获取到控制台打印的日志，以及本地的缓存信息。如：localStorage、sessionStorage、console.log、cookie等。
七、自定义埋点和漏斗分析
==7.1、自定埋点==
正常情况下，埋点功能应该由后端同学配合完成。在真实的开发过程中，我们免不了遇到需要做一些特殊的埋点，但是有时候又不容易得到后端同学帮助的情况，那么前端开发可以自己去完成埋点功能。如下：图表中展示埋点触发的次数，以及埋点触发的人数。
==7.2、 漏斗分析==
在增加自定义埋点的同时，Webfunny也增加了埋点步骤转化率统计：埋点1 -> 埋点2 的留存率分析。进一步强化自定义埋点功能。
Webfunny 前端系统-目录结构
|
|──bin/ * 项目启动目录
| |
| |
| |—— domain.js * 域名配置文件
| |—— messageQueue.js * 消息队列开关配置文件
| |—— mysqlConfig.js * mysql数据库连接配置文件
| |—— purchaseCode.js * 激活码配置文件
| |—— saveDays.js * 日志存储周期配置文件
| |—— webfunny.js * 服务启动文件
|
|
|——config/ * 基础配置目录（使用者可以不用关注）
|
|——controllers/ * 业务逻辑代码（已加密）
|
|——interceptor/ * 拦截器代码（监控到的异常都会经过拦截器，使用者可以自定义报警）
| |
| |—— config/dingRobot.js * 钉钉机器人配置
|
|——lib/
| |
| |—— RabbitMq.js * 消息对列创建文件
| |—— webfunny.min.js * 探针生成的模板文件
|
|——logs/
| |
| |——errors/ * 监控系统运行错误日志目录（排查部署问题）
| |
| |——info/ * 普通日志打印目录
|
|——schema/ * 基础表数据库字段设计
|——schema_con/ * 需要分表的数据库字段设计
|
|——modules/
| |
| |—— models.js * 业务逻辑代码（已加密）
|
|
|——routes/ * 路由、定时器
|
|——views/ * 监控系统页面代码
|
|
|
|—— app.js * 程序入口文件
|—— Dockerfile.js * docker部署配置文件
|—— restart.sh * 程序重启脚本文件（需设置此文件的执行权限）
|—— 其他文件或目录，使用者大可不必关注
Webfunny前端系统-安装使用
基础环境
安装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 -v），如果没有安装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文件中
module.exports = {
write: {
ip: 'xxx.xxx.xxx.xxx', // 远程ip地址
port: '3306', // 端口号
dataBaseName: 'webfunny_db', // 数据库名
userName: 'root', // 用户名
password: '123456' // 密码
}
}
第三步、本地部署运行
1) 此时此刻，本地配置已经完成了，尝试运行命令$: npm run prd（第一次运行使用此命令，重启使用：npm run restart）
2) 打开浏览器，访问地址：http://localhost:8010/webfunny/register.html?type=1 (初始化管理员账号，并登录)
3) 创建新项目后，可以看到探针部署教程，完成部署。
第四步、生产环境部署
1. IP地址或者域名配置
进入webfunny_monitor/bin/domain.js文件中（注意，对应的端口号要保持一致）
IP地址配置方式：
module.exports = {
localServerDomain: 'xxx.xxx.xxx.xxx:8011', // 日志上报域名
localAssetsDomain: 'xxx.xxx.xxx.xxx:8010', // 前端页面域名
localServerPort: '8011', // 日志上报端口号
localAssetsPort: '8010', // 前端页面端口号
}
域名配置方式：
module.exports = {
localServerDomain: 'www.baidu.com:8011', // 日志上报域名
localAssetsDomain: 'www.baidu.com:8010', // 前端页面域名
localServerPort: '8011', // 日志上报端口号
localAssetsPort: '8010', // 前端页面端口号
}
配置完成后，浏览器访问以下地址，保证能够访问成功。
1.项目列表地址，请在控制台执行：curl http://xxx.xxx.xxx.xxx:8011/server/webMonitorIdList 或 curl 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. 添加执行权限（重要！！！否则无法生成数据库表）
正常情况下 createTable.sh, restart.sh 这两个脚本没有执行权限，需要用户手动授权。
linux、mac系统，需要在项目根目录下执行命令$：chmod 755 createTable.sh， chmod 755 restart.sh 进行授权。
其他操作系统，请自行搜索授权方式
【注意】如果不授权，可能无法自动创建每天的数据库表
第五步、配置报警信息（钉钉机器人）
webfunny提供了自定义报警拦截功能，执行 npm run init 命令后会出现interceptor目录，需要使用者修改代码，以实现钉钉机器人的报警方式，配置目录如下：
钉钉机器人配置文件：/interceptor/config/dingRobot.js，其他通知方式，请自己查看代码
以下步骤可不必执行，高并发的用户可以继续往下看。
第六步、启动消息队列(非必须)
1. 安装RabbitMq（建议您在云服务器上部署完成后再执行此步骤）
开启消息队列之前，请先 安装RabbitMq消息队列服务，ubantu：https://www.cnblogs.com/warm-stranger/p/11000996.html
安装完成后可以访问Url：http://IP地址:15672 查看消息队列的情况
如果需要连接远程消息队列，请在根目录下找到 lib/RabbitMq.js调整代码配置。
【小提示】：消息队列不易安装成功，如果中途出现问题，可以选择重启或者初始化云服务器。
2. 启动消息队列
RabbitMq 安装完成后，在 webfunny_monitor/bin/messageQueue.js 文件中找到变量名：messageQueue，将此变量的值设置为：true, 重启服务即可
第七步、配置读写分离(非必须)
1.配置好主从同步的多台MySQL数据库（最好是一主多从，一主一从尚可）
2.进入webfunny_monitor/bin/mysqlConfig.js文件中
module.exports = {
write: {
ip: 'xxx.xxx.xxx.xxx', // 远程ip地址
port: '3306', // 端口号
dataBaseName: 'webfunny_db', // 数据库名
userName: 'root', // 用户名
password: '123456' // 密码
}，
// 高性能版支持此属性
read: [
{ host: "xxx.xxx.xxx.xxx", username: "root1", password: "123456" },
{ host: "xxx.xxx.xxx.xxx", username: "root2", password: "123456" }
]
}
关于webfunny前端监控系统介绍到此就结束啦！对webfunny感兴趣的小伙伴欢迎访问：www.webfunny.cn官网尝试搭建吧，可以免费试用哟~
