webfunny前端监控系统服务器搭建
webfunny
作为一个免费开源的前端监控系统,主要功能有:
监控JS报错、http接口报错、静态资源加载报错等;记录页面访问、点击事件、接口请求等行为日志;
统计PV/UV数据、用户7天留存数据、版本号/机型/地域分布数据
提供报错具体查找和定位功能、用户详细行为追踪与分析功能、用户网络环境评估功能
提供额外上报接口,上报自定义日志
再来看下作者给webfunny
的定义是:
怎样定位前端线上问题,一直以来,都是很头疼的问题,因为它发生于用户的一系列操作之后。错误的原因可能源于机型,网络环境,复杂的操作行为等等,在我们想要去解决的时候很难复现出来,自然也就无法解决。
不多说,我们来几张webfunny
的界面靓照
有这么多功能,是不是有点心动了呢,别急这里,还有他的官网,github,各位看官可以去体验看下。
github上官方提供了一些安装方法,但有些不尽详细,这里,我以xx云作为服务器,使用宝塔面板(因为我是服务器小白,这个面板是国内比较好的)来搭建webfunny
。
在搭建之初始,希望其服务器上安装 node
、git
,也可以先安装宝塔面板,其内置了git
、node
和LMNP
或AMNP
的环境。
下载代码
这里默认其服务器上安装了git
//回到目录 cd / //进入 www 目录 cd www //新建tongji mkdir tongji //进入tongji目录 cd tongji //下载代码 git clone https://github.com/a597873885/webfunny_monitor.git 复制代码
项目配置
这里说下,如果是宝塔面板的话,请点击面板'文件'栏目,就可以看到一个Web的资源管理器界面,这里可以对文件进行各种操作
修改项目根目录下的config.js
/** * 请求接口域名, 比如:日志上报,日志查询相关的接口 * 如果你的云服务器IP是:10.10.1.125, 你就应该配置成 //10.10.1.125:8011 */ const default_api_server_url = "//localhost:8011" /** * 网站的访问域名 * 如果你的云服务器IP是:10.10.1.125, 你就应该配置成 //10.10.1.125:8010 */ const default_assets_url = "//localhost:8010" 复制代码
在项目根目录下,进入 config/db_local.js ,配置mysql数据库的连接配置
/** * 你可以在这个文件里配置你自己的数据库 */ const Sequelize = require('sequelize'); const sequelize = new Sequelize('数据库名', '数据库用户名', '数据库用户密码', { //这里需要说下,如果你数据库放在本地可以使用localhost,但如果是使用远程数据库,这里可要改为您远程的数据库 host: 'localhost', //这里是数据库的端口,原文件没有,这里是新增加的 port:'3306', dialect: 'mysql', dialectOptions: { charset: "utf8mb4", supportBigNumbers: true, bigNumberStrings: true }, pool: { max: 50, min: 0, acquire: 30000, idle: 10000 }, timezone: '+08:00' //东八时区 }); module.exports = { sequelize: sequelize } 复制代码
安装依赖
npm run install_packages 复制代码
本地部署
在项目更目录执行:chmod 755 restart.sh ,给 restart.sh 脚本文件执行权限 (linux、macOs环境下)
在根目录下执行:npm run prd ,即可启动生产环境服务
常用命令如下: 执行命令: pm2 log 可查看启动日志 执行命令: pm2 list 可查已经启动的列表 执行命令: pm2 stop webfunny 停止当前服务 执行命令: pm2 delete webfunny 删除当前服务
完成后,希望重启下服务器
宝塔安装pm2
在宝塔面板里选择软件商店
->运行环境
->pm2管理器
宝塔启动服务
宝塔映射
结语
这里需要说明下,部分云服务器需要在安全组里开放两个端口,这里项目使用的端口为8011
和8010
,其中8010
为前端项目端口,8011
为服务api的端口,另外,请在宝塔面板中安全
的防火墙里放于其两个端口,至此,整个项目部署完成了。我的演示地址为http://www.cncsto.com/
作者:明月寒
链接:https://juejin.cn/post/6844904022265036814