介绍
-
Webfunny 是一款轻量级前端异常监控和前端性能监控系统，致力于帮助前端工程师定位并解决各种线上问题，确保项目健康良好的运行。这是一款由前端工程师设计的软件，我们深知前端的痛点，我们希望前端的工作更有效率。
-
Webfunny 支持千万级别日PV量，能够满足用户的各种场景需求。同时，针对不通过企业和用户，提供一对一的指导服务，满足更多业务需求。
-
Webfunny 专注于微信小程序、H5前端、PC前端线上应用实时监控，实时监控前端网页、前端数据分析、错误统计分析监控和BUG预警，第一时间报警，快速修复BUG！支持私有化部署，容器化部署
功能
- 项目总览；监控系统支持多个项目，让所有项目的状态都一目了然。通过对线上项目的实时分析，让我们可以对线上状况有个非常直观的了解。例如PV、UV数据变化趋势，留存变化，页面停留时间，线上报错、异常等
- 用户细查；深入分析每一个用户，记录下每个用户的所有行为。由于线上用户的操作行为十分复杂，有些问题可能隐藏在很多次操作之后，所以探针记录了用户的很多操作行为，一旦出现问题，复现BUG也将变得非常简单。 同时，可以使用多种检索条件进行搜索，提高查找效率
- 自定义埋点；用户可以自定义埋点，webfunny会将其记录下来，并定时分析。同时可以对多个埋点步骤进行漏斗分析，可以清晰的看到步骤之间的转化率，留存率等等。
- 错误分析；精细化分析每一个报错问题，支持sourceMap源码定位。通过探针监控和上报线上环境的报错，以及一些自定义异常。我们对这些日志进行精确的分析，可以准确定位到代码的问题所在。同时能够看到每一个报错的变化趋势，也能够分析出用户在哪一步操作中发生了问题
- 性能分析；分析页面和接口性能，加载耗时，成功率。探针对页面的加载性能进行分析，直观反映在报表之上。也对接口的性能进行了分析，如：耗时、成功率等。
- 无线调试功能；强大的调试功能，让你从繁杂的调试工具中解脱出来。无线调试功能可以让你随时线上用户，实时了解用户的行为、控制台打印信息、本地缓存信息等等。
部署
快速开始
环境要求
请安装NodeJS，版本号：10.6.0及以上。
配置要求、压力测试
日活十万UV以内：1核2G内存及以上，单点即可。日活百万UV左右：2核4G内存及以上，单点即可。（为保证稳定性，建议至少2核2G以上）
压力测试：2核CPU(3.8GH), 4G内存，单点部署，最高峰支持2.8万/分钟的日志并发量。超过3万/分钟后，会出现日志丢失的情况（此压力值测试供参考）
压力测试地址： 点我进行压测 （注意：需要搭建好webfunny，并创建好项目之后才能测试）
第一步、下载(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建议切换淘宝镜像：' npm config set registry http://registry.npm.taobao.org/ '默认没有bin目录，执行' npm run bootstrap '命令生成bin目录3.确认是否安装了pm2，如果没有安装pm2，请执行安装命令$：npm install pm2 -g
第二步、配置数据库(Mysql)连接
1. 安装 Mysql 数据库（Mysql安装教程）2. 创建数据库
数据库名称：webfunny_db。
字符集设置：[Default Character set]：utf8、 [Default Collation]：utf8_bin3. 数据库连接配置
进入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
如果提示报错：Script already launched，说明程序已经运行了，请使用$: npm run restart2) 打开浏览器，访问地址：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', // 前端页面端口号
}2. 代理域名配置，去掉端口号（方式二）
使用代理域名的用户，请一定要理解清楚Nginx代理的方法代理域名配置方式（端口号还是需要配置的）：
module.exports = {localServerDomain: 'www.baidu.com', // 日志上报域名localAssetsDomain: 'www.baidu.com', // 可视化页面域名localServerPort: '8011', // 日志上报端口号localAssetsPort: '8010', // 前端页面端口号
}第五步、添加执行权限
正常情况下 createTable.sh, restart.sh 这两个脚本没有执行权限，需要用户手动授权。
linux、mac系统，需要在项目根目录下执行命令$：chmod 755 createTable.sh， chmod 755 restart.sh 进行授权。其他操作系统，请自行搜索授权方式。【注意】如果不授权，可能无法自动创建每天的数据库表。恭喜您，Webfunny这样就部署好了，快去尝试部署到线上环境吧。
本文链接：https://my.lmcjl.com/post/5176.html
展开阅读全文
4 评论