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的端口,另外,请在宝塔面板中安全
的防火墙里放于其两个端口,至此,整个项目部署完成了。