对于监控平台，民工哥在以往的文章中介绍过太多太多，仔细的读者都发现了。
不过，话说回来，监控零碎对于任何业务来说都是重中之重，部署实现之后，除了必要的逻辑优化与更新迭代，监控与报警显得更加重要。
往期介绍的【监控零碎】在这里。大家能够依据本人的理论生产环境与业务需要抉择适合的。
所以，明天民工哥又给大家安利一款轻量级、酷炫的监控零碎。
简介
Webfunny是一款轻量级前端异样监控和前端性能监控零碎，致力于帮忙前端工程师定位并解决各种线上问题，确保我的项目衰弱良好的运行。这是一款由前端工程师设计的软件，咱们深知前端的痛点，咱们心愿前端的工作更有效率。
Webfunny 反对千万级别日PV量，可能满足用户的各种场景需要。同时，针对不通过企业和用户，提供一对一的领导服务，满足更多业务需要。
Webfunny 专一于微信小程序、H5前端、PC前端线上利用实时监控，实时监控前端网页、前端数据分析、谬误统计分析监控和BUG预警，第一工夫报警，疾速修复BUG！反对私有化部署，容器化部署！
环境要求
- 请装置NodeJS，版本号：10.6.0及以上。
- 日活十万UV以内：1核2G内存及以上，单点即可。
- 日活百万UV左右：2核4G内存及以上，单点即可。（为保障稳定性，倡议至多2核2G以上）
装置部署
第一步、下载(clone)最新部署包，初始化
#本地克隆代码$：git clone https://github.com/a597873885/webfunny_monitor.git#应用码云仓库$：git clone https://gitee.com/webfunnyMonitor/webfunny_monitor.git（github网络不稳固，能够应用码云地址）#在我的项目根目录下执行初始化命令和装置命令$：npm run init && npm install#确认是否装置了pm2，如果没有装置pm2，请执行装置命令$：npm install pm2 -g第二步、配置数据库(Mysql)连贯
- 装置Mysql数据库
Mysql装置教程:
- 创立数据库
数据库名称：webfunny_db。字符集设置：[Default Character set]：utf8、 [Default Collation]：utf8_bin数据库连贯配置
进入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
如果提醒报错：Script already launched，阐明程序曾经运行了，请应用$: npm run restart
2)关上浏览器，拜访地址：http://localhost:8010/webfunn... (初始化管理员账号，并登录)
3)创立新我的项目后，能够看到探针部署教程，实现部署。
第四步、生产环境部署
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', // 前端页面端口号}代理域名配置，去掉端口号（形式二）
#应用代理域名的用户，请肯定要了解分明Nginx代理的办法，代理域名配置形式（端口号还是须要配置的）：module.exports = {localServerDomain: 'www.baidu.com', // 日志上报域名localAssetsDomain: 'www.baidu.com', // 前端页面域名localServerPort: '8011', // 日志上报端口号localAssetsPort: '8010', // 前端页面端口号}第五步、增加执行权限
失常状况下 createTable.sh, restart.sh 这两个脚本没有执行权限，须要用户手动受权。
linux、mac零碎，须要在我的项目根目录下执行命令$：chmod 755 createTable.sh， chmod 755 restart.sh 进行受权。
其余操作系统，请自行搜寻受权形式。【留神】如果不受权，可能无奈主动创立每天的数据库表。
目录构造
| |──bin/ * 我的项目启动目录 | | | | | |—— domain.js * 域名配置文件 | |—— messageQueue.js * 音讯队列开关配置文件 | |—— mysqlConfig.js * mysql数据库连贯配置文件 | |—— purchaseCode.js * 激活码配置文件 | |—— saveDays.js * 日志存储周期配置文件 | |—— webfunny.js * 服务启动文件 | | |——config/ * 根底配置目录（使用者能够不必关注） | |——controllers/ * 业务逻辑代码（已加密） | |——interceptor/ * 拦截器代码（监控到的异样都会通过拦截器，使用者能够自定义报警） | | | |—— config/dingRobot.js * 钉钉机器人配置 | |——lib/ | | | |—— RabbitMq.js * 音讯对列创立文件 | |—— webfunny.min.js * 探针生成的模板文件 | |——logs/ | | | |——errors/ * 监控零碎运行谬误日志目录（排查部署问题） | | | |——info/ * 一般日志打印目录 | |——schema/ * 根底表数据库字段设计 |——schema_con/ * 须要分表的数据库字段设计 | |——modules/ | | | |—— models.js * 业务逻辑代码（已加密） | | |——routes/ * 路由、定时器 | |——views/ * 监控零碎页面代码 | | | |—— app.js * 程序入口文件 |—— Dockerfile.js * docker部署配置文件 |—— restart.sh * 程序重启脚本文件（需设置此文件的执行权限） |—— 其余文件或目录，使用者大可不必关注祝贺您，Webfunny这样就部署好了，快去尝试部署到线上环境吧。
应用文档中文：https://www.webfunny.cn/des.html
我的项目源码地址：https://github.com/a597873885...
Nginx代理配置
webfunny 的探针是依据监控我的项目的网址来判断的，你的我的项目地址用的是 https，上报接口也会切换到https
http { map $http_upgrade $connection_upgrade { default upgrade; '' close; } #用80端口代理8011，8010两个端口号（可反对http） server { listen 80; server_name www.baidu.com; root /home/jiangyingwei/webWorks/website; index /home.html; location /webfunny/ { proxy_pass http://101.23.9.1:8010/webfunny/; proxy_redirect default ; } # webfunny_server 数据接口等反向代理 location /server/ { proxy_pass http://101.23.9.1:8011/server/; proxy_connect_timeout 3000; proxy_send_timeout 3000; proxy_set_header Host $http_host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } } #用443端口代理8011，8010两个端口号（可反对https） server { listen 443 ssl; server_name www.baidu.com; #网站域名，和80端口保持一致 root /home/jiang/webWorks; index /index.html; # ssl on; ssl_certificate /etc/nginx/cert/3120409_www.baidu.com.pem; #证书公钥 ssl_certificate_key /etc/nginx/cert/3120409_www.baidu.com.key; #证书私钥 ssl_session_cache shared:SSL:1m; ssl_session_timeout 5m; ssl_protocols TLSv1 TLSv1.1 TLSv1.2; ssl_ciphers ECDH:AESGCM:HIGH:!RC4:!DH:!MD5:!3DES:!aNULL:!eNULL; ssl_prefer_server_ciphers on; # 数据接口等代理 location /server/ { proxy_pass http://www.baidu.com:8011/server/; proxy_connect_timeout 3000; proxy_send_timeout 3000; proxy_set_header Host $http_host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } # 页面服务代理 location /webfunny/ { proxy_pass http://www.baidu.com:8010/webfunny/; proxy_redirect default ; } }}性能展现
成果展现
整体概览
数据大屏
一站式数据可视化展现平台，炫酷大屏，自在部署，实时数据，我的项目运行状态和衰弱状态尽收眼底。
经营数据
数据“采集+治理+剖析”智能一体化，获取经营要害数值，让您对我的项目经营情况一目了然。
用户数据
谬误数据统计
性能剖析
- 接口
- 页面
自定义埋点
小程序监控数据
以上就是明天给大家带来的分享内容，如有帮忙请顺手点个在看与转发朋友圈反对一下，感激大家。如果须要我的项目源码与具体的阐明文档，能够点击下方公众号名片，而后回复关键字 webfunny监控 收费获取。