前言
如果你是一位前端工程师，那你一定不止一次去解决一些顽固的线上问题，你也曾想方设法复现用户的bug，结果可能都不太理想。
如何定位前端线上问题？一直以来，都是很头疼的问题，因为它发生于用户的一系列操作之后。错误的原因可能源于机型，网络环境，复杂的操作行为等等，很难在开发环境中复现出来。特别是前端在没有监控系统加持的情况下，往往需要人肉解决问题，还要应对产品的需求轰炸，真真是太难了！！！
今天就让我们一起告别这种无奈，给大家介绍一款非常好用的前端业务日志监控工具— Webfunny，只需要简单几步，你就可以搭建一套属于自己的前端监控系统啦~
Webfunny概述
Webfunny是一款轻量级前端异常监控和前端性能监控系统，致力于帮助前端工程师定位并解决各种线上问题，确保项目健康良好的运行。支持千万级别日PV量，能够满足用户的各种场景需求。同时，针对不同企业和用户，提供一对一的定制化服务，满足更多业务需求。
Webfunny 特点
轻量级：可以随时部署在任何地方，支持ESC部署和Docker部署，非常快捷方便；
功能全面：不限制应用的流量、自定义日志存储时间，能够适应更多高并发的场景；
针对性强：针对前端使用场景研发，辅助前端开发，容易上手；
无风险：所有监控数据都可以回流，监控日志都存储在你们自己的数据库内，不依赖任何第三方；
费用低：只需要花费少量的赞助，便可以使用一套完整的私有化部署系统；
一对一定制化服务
Webfunny 功能模板
一、实时数据分析大屏
线上项目有很多，能否实时掌握每个项目的运行状态很重要，Webfunny提供了实时数据分析大屏，及时地了解线上项目的各项指标。
二、产品运营数据总览
2.1、 PV / UV 变化趋势分析：
统计24小时内，每个小时的PV、UV、新用户、访问频次的变化趋势；同时还会展现出，上个周期（一周前）同一时间点的变化趋势，对比出两个周期的变化量。
2.2、 留存数据分析：
留存数据能够体现出用户对应用的喜爱程度和粘度，是优化用户体验的重要指标；其中包含：用户跳出率、新用户7天的留存率、新用户次日留存率、以及用户的平均停留时长等。
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 安装使用
基础环境
安装NodeJS，版本号：10.6.0及以上
第一步、下载(clone)最新部署包，初始化（不要改项目名！！！）
1.本地克隆代码$：git clonehttps://github.com/a597873885/webfunny_monitor.git使用码云仓库$：git clonehttps://gitee.com/webfunnyMonitor/webfunny_monitor.git（github网络不稳定，可以使用码云地址）2.在项目根目录下执行初始化命令和安装命令$：npm run init && npm install3.确认是否安装了pm2（执行$：pm2 -v），如果没有安装pm2，请执行安装命令$：npm install pm2 -g
第二步、配置数据库(Mysql)连接
1. 安装 Mysql 数据库（Mysql安装教程）2. 创建数据库（webfunny_db）创建数据库：webfunny_db。字符集设置：[Default Characterset]：utf8、 [DefaultCollation]：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/webMonitorIdList2.数据展示地址，请在浏览器访问：http://xxx.xxx.xxx.xxx:8010/webfunny/overview.html 或 http://www.baidu.com:8010/webfunny/overview.html
2. 添加执行权限（重要！！！否则无法生成数据库表）
正常情况下 createTable.sh, restart.sh 这两个脚本没有执行权限，需要用户手动授权。
linux、mac系统，需要在项目根目录下执行命令$：chmod755createTable.sh，chmod755restart.sh 进行授权。其他操作系统，请自行搜索授权方式【注意】如果不授权，可能无法自动创建每天的数据库表
第五步、配置报警信息（钉钉机器人）
webfunny提供了自定义报警拦截功能，执行 npm runinit命令后会出现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介绍到此就结束啦！