如何快速搭建前端监控系统

一、前端为什么要做监控系统
前端的开发环境比较复杂，页面在不同浏览器、微信等APP都可能展现不同，用户的网络网速、手机性能等，也会影响页面访问速度。在移动端可能更为明显，移动端用户对页面响应延迟、页面无法使用的容忍度更低。

二、要监控哪些？
前端异常监控：

JavaScript错误信息监控
Promise捕获异常信息的抓取
Ajax（xhr）异常信息捕获
console.error错误信息捕获
资源错误信息捕获
页面性能监控：

重定向时间
DNS查询/缓存时间
页面卸载时间
TCP连接耗时
解析DOM树耗时
内容/页面加载完成时间
设备信息采集：

设备类型
操作系统/版本
屏幕信息
浏览器信息
这些主要是基础功能，对于前端来说，最主要目的是方便快速定位线上问题。
然后我就搜索了一些前端监控系统，不过大都不如意。开源的功能极少，而且后期维护的很难。
自己搭建健康系统，时间和精力有限；周期太长，不适合。而像Logan类似的，阉割版，功能太少了不考虑。然后就看到了webfunny版本的，功能基本满足我的需求，感觉还不错。

三、webfunny
它的功能包括：

用户细查
错误分析
接口分析
性能分析
流量分析
健康分析
上线安全监测

还能自定义添加埋点，这个不错。

四、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. 此时此刻，本地配置已经完成了，尝试运行命令$:npmrunprd如果提示报错：Scriptalreadylaunched，说明程序已经运行了，请使用$: npm run restart

2. 打开浏览器，访问地址：http://localhost:8010/webfunny/register.html?type=1 (初始化管理员账号，并登录)

3. 创建新项目后，可以看到探针部署教程，完成部署。
   就是这么快，部署好了。
   webfunny支持私有化部署，容器化部署，这个不错。