推荐 github 2k 星：前端监控工具 -凯发k8官方网

为什么需要前端监控？

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

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

今天给大家推荐一个在github上线仅几个月，就已经获得 2k 星项目——前端业务日志监控工具 webfunny

https://github.com/a597873885/webfunny_monitor

1、webfunny概述

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

凯发k8官方网官网：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 install3.确认是否安装了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/webmonitoridlist2.数据展示地址，请在浏览器访问：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试用账号

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

总结

以上是凯发k8官方网为你收集整理的推荐 github 2k 星：前端监控工具 - webfunny 项目的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。