一、前端为什么要做监控系统
前端的开发环境比较复杂，页面在不同浏览器、微信等APP都可能展现不同，用户的网络网速、手机性能等，也会影响页面访问速度。在移动端可能更为明显，移动端用户对页面响应延迟、页面无法使用的容忍度更低。
二、要监控哪些？
-
前端异常监控：
- JavaScript错误信息监控
- Promise捕获异常信息的抓取
- Ajax（xhr）异常信息捕获
- console.error错误信息捕获
- 资源错误信息捕获
-
页面性能监控：
- 重定向时间
- DNS查询/缓存时间
- 页面卸载时间
- TCP连接耗时
- 解析DOM树耗时
- 内容/页面加载完成时间
-
设备信息采集：
- 设备类型
- 操作系统/版本
- 屏幕信息
- 浏览器信息
这些主要是基础功能，对于前端来说，最主要目的是方便快速定位线上问题。
然后我就搜索了一些前端监控系统，不过大都不如意。开源的功能极少，而且后期维护的很难。
自己搭建健康系统，时间和精力有限；周期太长，不适合。而像Logan类似的，阉割版，功能太少了不考虑。然后就看到了webfunny版本的，功能基本满足我的需求，感觉还不错。
三、webfunny
它的功能包括：
- 用户细查
- 错误分析
- 接口分析
- 性能分析
- 流量分析
- 健康分析
- 上线安全监测
WX20211116-115430@2x.png
WX20211116-115507@2x.png
还能自定义添加埋点，这个不错。
WX20211116-115635@2x.png
四、webfunny快速部署
- webfunny部署
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 init '命令生成bin目录
3.确认是否安装了pm2，如果没有安装pm2，请执行安装命令$：npm install pm2 -g
- MySQL 数据库部署
1. 安装 Mysql 数据库（Mysql安装教程）
2. 创建数据库
数据库名称：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
如果提示报错：Script already launched，说明程序已经运行了，请使用$: npm run restart
2) 打开浏览器，访问地址：http://localhost:8010/webfunny/register.html?type=1 (初始化管理员账号，并登录)
3) 创建新项目后，可以看到探针部署教程，完成部署。
就是这么快，部署好了。
webfunny支持私有化部署，容器化部署，这个不错。
五、使用反馈
总体使用起来感觉不错，部署也是很方便，功能也很齐全，推荐使用。
