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

一、前端为什么要做监控系统

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

二、要监控哪些？

1. 前端异常监控：

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

2. 页面性能监控：

   • 重定向时间
   • DNS查询/缓存时间
   • 页面卸载时间
   • TCP连接耗时
   • 解析DOM树耗时
   • 内容/页面加载完成时间

3. 设备信息采集：

   • 设备类型
   • 操作系统/版本
   • 屏幕信息
   • 浏览器信息

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

三、webfunny

它的功能包括：

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

[email protected]

[email protected]

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

[email protected]

四、webfunny快速部署

1. 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

2. 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'             // 密码
  }
}

3. 项目启动

1) 此时此刻，本地配置已经完成了，尝试运行命令$: npm run prd
如果提示报错：Script already launched，说明程序已经运行了，请使用$: npm run restart

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

3) 创建新项目后，可以看到探针部署教程，完成部署。

就是这么快，部署好了。
webfunny支持私有化部署，容器化部署，这个不错。

五、使用反馈

总体使用起来感觉不错，部署也是很方便，功能也很齐全，推荐使用。