推荐 GitHub 2K+ 星:前端监控工具 - webfunny 项目

推荐 GitHub 2K+ 星:前端监控工具 - webfunny 项目_第1张图片

为什么需要前端监控?

如果你是一位前端工程师,那你一定不止一次去解决一些顽固的线上问题,你也曾想方设法复现用户的bug,结果可能都不太理想。

如何定位前端线上问题?一直以来,都是很头疼的问题,因为它发生于用户的一系列操作之后。错误的原因可能源于机型,网络环境,复杂的操作行为等等,很难在开发环境中复现出来。特别是前端在没有监控系统加持的情况下,往往需要人肉解决问题,还要应对产品的需求轰炸,真真是太难了!!!

推荐 GitHub 2K+ 星:前端监控工具 - webfunny 项目_第2张图片

今天给大家推荐一个在GitHub上线仅几个月,就已经获得 2K+星项目——前端业务日志监控工具 Webfunny

https://github.com/a597873885/webfunny_monitor

1、Webfunny概述

Webfunny是一款轻量级前端异常监控和前端性能监控系统,致力于帮助前端工程师定位并解决各种线上问题,确保项目健康良好的运行。支持千万级别日PV量,能够满足用户的各种场景需求。同时,针对不同企业和用户,提供一对一的定制化服务,满足更多业务需求。

官网:www.webfunny.cn

2、Webfunny 特点

  • 轻量级:可以随时部署在任何地方,支持ESC部署和Docker部署,非常快捷方便;

  • 功能全面:不限制应用的流量、自定义日志存储时间,能够适应更多高并发的场景;

  • 针对性强:针对前端使用场景研发,辅助前端开发,容易上手;

  • 无风险:所有监控数据都可以回流,监控日志都存储在你们自己的数据库内,不依赖任何第三方;

3、Webfunny 安装使用

基础环境

安装NodeJS,版本号:10.6.0及以上

第一步、下载(clone)最新部署包,初始化(不要改项目名!!!)

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


3.确认是否安装了pm2(执行$:pm2 -v),如果没有安装pm2,请执行安装命令$:npm install pm2 -g

第二步、配置数据库(Mysql)连接

1. 安装 Mysql 数据库(Mysql安装教程)
2. 创建数据库(webfunny_db)
创建数据库: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(第一次运行使用此命令,重启使用:npm run restart)


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


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

第四步、生产环境部署

1. IP地址或者域名配置

进入webfunny_monitor/bin/domain.js文件中(注意,对应的端口号要保持一致)

IP地址配置方式:


module.exports = {
  localServerDomain: 'xxx.xxx.xxx.xxx:8011',    // 日志上报域名
  localAssetsDomain: 'xxx.xxx.xxx.xxx:8010',    // 前端页面域名
  localServerPort: '8011',                      // 日志上报端口号
  localAssetsPort: '8010',                      // 前端页面端口号
}


域名配置方式:


module.exports = {
  localServerDomain: 'www.baidu.com:8011',      // 日志上报域名
  localAssetsDomain: 'www.baidu.com:8010',      // 前端页面域名
  localServerPort: '8011',                      // 日志上报端口号
  localAssetsPort: '8010',                      // 前端页面端口号
}

配置完成后,浏览器访问以下地址,保证能够访问成功。

1.项目列表地址,请在控制台执行:curl http://xxx.xxx.xxx.xxx:8011/server/webMonitorIdList 或 curl http://www.baidu.com:8011/server/webMonitorIdList


2.数据展示地址,请在浏览器访问:http://xxx.xxx.xxx.xxx:8010/webfunny/overview.html 或 http://www.baidu.com:8010/webfunny/overview.html

2. 添加执行权限(重要!!!否则无法生成数据库表)

正常情况下 createTable.sh, restart.sh 这两个脚本没有执行权限,需要用户手动授权。

linux、mac系统,需要在项目根目录下执行命令$:chmod 755 createTable.sh, chmod 755 restart.sh 进行授权。


其他操作系统,请自行搜索授权方式


【注意】如果不授权,可能无法自动创建每天的数据库表
第五步、配置报警信息(钉钉机器人)
webfunny提供了自定义报警拦截功能,执行 npm run init 命令后会出现interceptor目录,需要使用者修改代码,以实现钉钉机器人的报警方式,配置目录如下:
钉钉机器人配置文件:/interceptor/config/dingRobot.js,其他通知方式,请自己查看代码

以下步骤可不必执行,高并发的用户可以继续往下看。

第六步、启动消息队列(非必须)

1. 安装RabbitMq(建议您在云服务器上部署完成后再执行此步骤)

开启消息队列之前,请先 安装RabbitMq消息队列服务,ubantu:https://www.cnblogs.com/warm-stranger/p/11000996.html 


安装完成后可以访问Url:http://IP地址:15672 查看消息队列的情况


如果需要连接远程消息队列,请在根目录下找到 lib/RabbitMq.js调整代码配置。


【小提示】:消息队列不易安装成功,如果中途出现问题,可以选择重启或者初始化云服务器。
2. 启动消息队列
RabbitMq 安装完成后,在 webfunny_monitor/bin/messageQueue.js 文件中找到变量名:messageQueue,将此变量的值设置为:true, 重启服务即可
第七步、配置读写分离(非必须)
1.配置好主从同步的多台MySQL数据库(最好是一主多从,一主一从尚可)


2.进入webfunny_monitor/bin/mysqlConfig.js文件中


module.exports = {
  write: {
    ip: 'xxx.xxx.xxx.xxx',         // 远程ip地址
    port: '3306',                  // 端口号
    dataBaseName: 'webfunny_db',   // 数据库名
    userName: 'root',              // 用户名
    password: '123456'             // 密码
  },
  // 高性能版支持此属性
  read: [
    { host: "xxx.xxx.xxx.xxx", username: "root1", password: "123456" },
    { host: "xxx.xxx.xxx.xxx", username: "root2", password: "123456" }
  ]
}

项目地址:

https://github.com/a597873885/webfunny_monitor

关于Webfunny介绍到此就结束啦!

关于安装使用上有任何问题和建议,

欢迎添加下方客服交流、反馈哈~

微信号:webfunny_2020

--------------------------------------

下面是福利时间

本公众号读者现在

可享受2个月免费试用DEMO

????????????

添加Webfunny客服,

添加暗号“试用”

告知客服MM试用账号

方便后台帮你延长试用时间

推荐 GitHub 2K+ 星:前端监控工具 - webfunny 项目_第3张图片

你可能感兴趣的:(java,数据库,mysql,docker,linux)