Awesome Open Source
Awesome Open Source

zanePerfor一款完整、高性能、高可用的前端性能监控和统计平台

Node Vue Egg Mogodb Redis

开发功能进度说明

  • 集成框架选型及其相关配置(已完成)
  • 主重数据库相关配置开发(已完成)
  • web网页sdk开发(已完成)
  • web端数据库数据后端存储逻辑开发 (已完成)
  • web端网站性能数据,错误信息,资源加载信息后台逻辑开发(定时任务:已完成)
  • web端网站PV,UV,IP统计开发(定时任务:已完成)
  • ip地址库存储逻辑(多种缓存策略:本地文件缓存,redis缓存,mongodb缓存)(已完成)
  • web端上报脚本开发(已完成)
  • 分城市统计性能逻辑开发(已完成)
  • 浏览器端后台cms界面开发(已完成)
  • 微信小程序sdk开发 (已完成)
  • 微信小程序相关后端逻辑开发 (已完成)
  • 微信小程序后台cms界面开发(已完成)
  • 微信分城市统计性能逻辑开发(已完成)
  • 用户行为漏斗分析 即用户行为分析(已完成)
  • TOP性能统计(已完成)
  • 省市流量统计热力图分析(已完成)
  • 上报方式新增redis 消息队列(已完成)
  • 索引优化(已完成)
  • Mongodb副本集读写分离开发(已完成)
  • 数据库分表(即分集合)针对于apges,ajaxs,errors,resource,enviroment大数据量表分表,不同应用存储到不同的表中(已完成)
  • Mongodb集群配置 (已完成)
  • github第三方登录 (已完成)
  • 新浪微博第三方登录 (已完成)
  • 微信授权第三方登录 (已完成)
  • Mongodb集群分片开发(优化中)
  • 项目性能优化(已完成)
  • 邮件触发服务开发(已完成)
  • 每日日报邮件发送(已完成)
  • 页面后续操作过程中出现的Error错误、Ajax性能、资源加载的上报(已完成)
  • 所有预警相关业务开发(开发中)
  • Kafka消息队列的引入和使用 (已完成)
  • 应用突破历史流量峰值时触发邮件通知、开发流量预警功能(已完成)
  • 用户访问实时消费流量统计功能(ajax,页面,资源)(已完成)

项目开发文档

项目说明

  • 项目已部署到正式环境,并已稳定运行一段时间,请放心使用。
  • 前期推荐使用单机数据库或者Mongodb副本集架构,后期根据自身需求考虑是否使用集群分片
  • 目前4核8G单机服务器大概能支撑每日50-100W的pv,8核16G单机服务器可支撑100W-500W的PV流量
  • 如果项目日PV超千万,需要Redis集群,Mongodb集群分片的部署方式
  • 项目后台查询性能增加合适的索引之后,千万以上的数据量可在100ms-2s之内查询出来,平均100-300ms(单机/副本集)

浏览器端使用说明

使用SDK方式上报数据

  • 使用web SDK进行数据上报,使用方式请参考 web-report-sdk SDK详情

npm引入使用方式

// install
npm install web-report --save

// 通用版本引入
import { Performance } form 'web-report'
// 使用
Performance({
    domain:'http://report.com/api/v1/report/web',
    add:{
        appId:'D3D9B9AA45B56F6E424F57EFB36B0XXX',
    }
})

import {
    Performance,
    axiosReport,
    defaultReport,
    fetchReport,
    jqueryReport,
    noneReport
} from 'web-report'
// 使用
defaultReport({
    domain:'http://report.com/api/v1/report/web',
    add:{
        appId:'D3D9B9AA45B56F6E424F57EFB36B0XXX',
    }
})

浏览器端上报SDK详细说明文档请参考:web-report-sdk:

https://awesomeopensource.com/project/wangweianger/web-report-sdk

微信小程序端使用说明

  • 直接下载sdk,引入到小程序的app.js最顶部
微信小程序 app.js头部引入sdk

const wxRepotSdk = require('./utils/wx-report-sdk.min');

new wxRepotSdk({
    domain:'http://test.com',
    add:{
        appId:'56F6E424F57EFB36B0XXX'
    }
})

小程序端上报SDK详细说明文档请参考:wx-report-sdk:

https://awesomeopensource.com/project/wangweianger/wx-report-sdk

docker 安装配置环境(非必须)

  1. 安装并保证有 docker-compose 的环境

  2. 修改 start-docker-compose.sh 里的 hostIP 为外网 IP ⚠️ 不能是 127.0.0.1localhost

  3. docker-compose 启动方式

方式一:

# 项目所在目录
./start-docker-compose.sh

方式二

export hostIP='自己的外网IP' && docker-compose up -d --build
  1. 启动 web 开发环境
npm run dev
  1. 启动 web start 环境 ⚠️ 修改 config/config.prod.js 里的 redis 配置
npm start 

交流和建议群

  • 自发布以来有感兴趣的童鞋遇到了各种问题,大部分情况下是通过邮件进行沟通,为了方便解决大家部署中遇到的各种问题,下面贴出一个QQ交流群,有问题或者建议可提出。

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,513,654
Nodejs (53,956
Mongodb (14,171
Redis (6,701
Kafka (3,320
Vuejs2 (2,598
Egg (402
Related Projects