webfunny是一款轻量级前端异常监控和前端性能监控系统，致力于线上项目的实时分析。PV、UV数据的变化趋势，线上错误分析定位，用户行为追踪以及自定义埋点
用户行为，指的是用户与产品UI的交互行为，主要表现在Android App、iOS App与Web页面上。这些交互行为，有的会与后端服务通信，有的仅仅引起前端UI的变化，但是不管是哪种行为，其背后总是伴随着一组属性数据。对于与后端发生交互的行为，我们可以从后端服务日志、业务数据库中拿到相关数据；而对于那些仅仅发生在前端的行为，则需要依靠前端主动上报给后端才能知晓。用户行为数据采集系统，便是负责从前端采集所需的完整的用户行为信息，用于数据分析和其他业务。
一、搭建自己的webfunny
webfunny官网有详细的使用教程
以下是根据官网的实操(前提条件：前端环境Node.js、数据库环境MySQL)
1.下载(clone)最新部署包，初始化，运行
本地克隆代码
git clone https://github.com/a597873885/webfunny_monitor.git
github网络不稳定，可以使用码云地址
git clone https://gitee.com/webfunnyMonitor/webfunny_monitor.git
在项目根目录下执行初始化命令和安装命令（执行成功后目录下会出现bin文件夹）
npm run init && npm install
如果没有安装pm2，请执行安装命令(我头一次听说这个，直接安装)
npm install pm2 -g
配置数据库(Mysql)连接，创建数据库webfunny_db。进入webfunny_monitor/bin/mysqlConfig.js文件中
module.exports = {
write: {
ip: '127.0.0.1', // ip地址(我这里用的本机)
port: '3306', // 端口号
dataBaseName: 'webfunny_db', // 数据库名
userName: 'root', // 用户名
password: 'root' // 密码
}
}
尝试运行命令
npm run prd
如果提示报错：Script already launched，说明程序已经运行了，请使用$: npm run restart重启
访问首页地址： http://localhost:8010/webfunny/home.html
初始化管理员： http://localhost:8010/webfunny/register.html?type=1
部署问题集合： http://www.webfunny.cn/website/faq.html
2.创建项目
首先初始化管理员，填个邮箱验证收一下验证码就好了。当你登录进来的时候，页面会提醒你先创建一个项目，没有项目就什么也做不了。
创建好了之后。点击应用设置进入到项目详情
3.安装探针
项目详情中可以查看探针代码，有详细的探针部署方式（选推荐的就好）
4.传入userId
webfunny是通过内置id来区分用户的，传入的userId只是用来跟webfunny的内置id做关联的，所以传入时机晚一点，或晚很多都没有关系，只要你在用户的生命周期中传入过userId，就能够关联上。
//登录成功后直接设置
window.localStorage.wmUserInfo = JSON.stringify({ userId: 'userId', userTag: 'tag', projectVersion: '1.0.1' })
- 用户的userId，是让你们用来查找用户的，必传
- 用的tag，这个是用户的标签（比如：角色A、公司B等等）
- 项目版本号（projectVersion），是用来让你查看你们项目每个版本号还有多少人在访问的
二、webfunny的使用
1.错误统计分析
对前端js、api和静态资源的报错进行统计分析，通过webfunny可以定位到所有报错的地方
2.性能统计和分析
统计接口耗时，页面加载耗时并进行分析
3.用户行为记录和追踪（复现BUG）
Webfunny可以根据userId检索出过去任何时间点，某个用户所有的行为记录，包括：浏览记录、接口请求（参数和返回值）、报错记录、点击行为等等；同时能够对用户当时的网络环境进行评估。由于搜集了用户所有的行为记录，复现BUG将变得非常简单~
4.连接线上用户（无线调试）
根据用户的UserId，跟用户进行线上连线以后，能够实时掌握用户的每一个动作，从而帮助用户实时解决他的问题。同理，也可以用于平时的测试中，即使不使用复杂的调试工具，也能够轻易的掌握接口请求，报错等问题。
webfunny支持自定义邮箱报警和钉钉机器人警报，如果需要其他报警方式，需要用户自己完善代码。具体操作方式参考官网
网友评论