wangweianger/zaneperfor

前端性能监控系统,消息队列,高可用,集群等相关架构

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

开发功能进度说明

• 集成框架选型及其相关配置（已完成）
• 主重数据库相关配置开发（已完成）
• 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，页面，资源)（已完成)

使用

简单尝试推荐使用 Docker 运行

1. 安装 Docker

Docker 官网：https://www.docker.com/

docker 官网中下载适合自己系统得 Docker 进行安装。

• 验证 Docker 是否安装成功

Docker --version

2. 推荐安装 Docker Desktop

Docker 安装成功之后，推荐安装 Docker Desktop

Desktop 安装地址：https://www.docker.com/products/docker-desktop/

3. 安装 docker-compose

docker-compose 下载地址：https://github.com/docker/compose/releases

• 在 Assets 中下载对应的解压包

• 验证是否安装成功

docker-compose --version

4. 下载代码到本地

git clone [e-mail]:wangweianger/zanePerfor.git

5.修改 start-docker-compose.sh 里的 hostIP 为内网 IP

⚠️ 不能是 127.0.0.1 或 localhost

• 获取 IP 地址方式

cmd 窗口中运行 ipconfig, IPv4 地址即内网 IP

6. 启动 docker-compose

方式一：

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

方式二

export hostIP='自己的内网IP' && docker-compose up -d --build

6.启动 web 开发环境

# 安装依赖
yarn install

# 启动本地服务
yarn dev

发布生产

维护生产环境配置文件 ./config/config.prod.js

yarn start

项目开发文档

• zanePerfor是什么?
• zanePerfor在高流量高并发项目下的架构配置建议实践说明
• 系统高可用之Mongodb集群分片架构
• 系统高可用之Mongodb副本集读写分离架构
• github 登录授权说明
• zanePerfor中集成kafka的开发实践和限流优雅降级

项目说明

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

浏览器端使用说明

方式一

在管理后台创建项目之后有详细的使用文档，参考使用即可。

方式二

• 使用SDK方式上报数据

// install
yarn add web-report

// 使用
import { Performance, axiosReport, defaultReport, fetchReport, jqueryReport } from 'web-report'

defaultReport({
    domain:'http://report.com/api/v1/report/web',
    add:{
        appId:'D3D9B9AA45B56F6E424F57EFB36B0XXX',
    }
})

• web-report SDK详细文档: https://github.com/wangweianger/web-report-sdk

• 附加： vue 项目使用参考文档

微信小程序端使用说明

• 管理后台创建项目后下载sdk，引入到小程序的 app.js 最顶部

// 微信小程序 app.js头部引入sdk
const wxRepotSdk = require('./utils/wx-report-sdk.min');

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

• wx-report-sdk SDK详细文档：https://github.com/wangweianger/wx-report-sdk

展示效果

zaneperfor's Issues

请求failed会有Content-Length报错

请求filed返回data只有errMsg: "request:fail "，此时没有data.header
做了一下兼容
const bodySize = (data.header&&data.header['Content-Length']) || datas.length || 0;

域名来源有误,请检查config的origin配置

域名来源有误,请检查config的origin配置

本地开发环境下，单应用无法上报

单应用本地环境下，一直提示上报跨域的问题，请问怎么解决这类应用场景

白屏时间的计算方式，感觉有点不对啊

timing.responseStart - timing.navigationStart
查看了好多资源，感觉应该是timing. domLoading - timing.navigationStart ,
不知道对不对？

使用docker-compose部署，logs日志中kafka异常终止。

老哥，预警模块预计啥时候上线？

百度地图获取不会省份城市吗？全都数据都显示**？有遇到类型这样的情况的吗？

怎么启动项目

hi 项目详细文档里好像也没有说明这个项目怎么跑起来呢，以及要安装哪些东西，eg redis mogodb 等 以及这些东西安装方式....

支持更换其它ip地址库吗？

可以增加其它地址库吗？比如纯真ip，geoip，谢谢

redis集群在config怎么配置？

// redis配置
config.redis = {
client: {
port: 6379, // Redis port
host: 'xx.xx.xx.xx', // Redis host
password: 'xxxxxx',
db: 0,
},
};

现在看到的是配置单机的，集群的redis 怎么配置？

run

如何可以支持飞书小程序？可否自行开发客户端相关SDK，复用服务端逻辑和可视化大盘

rt

addData ：上报时自定义的数据

接口传入的参数，服务端没有做保存，现在发现无法使用，请求作者解惑

router.afterEach(to => {
  const account = Cookies.get('ch_op_id')
  const name = Cookies.get('ch_op_name')
  if (process.env.NODE_ENV === 'production') {
    Performance.addData(data => {
      data.id = account
      data.name = name
    })
  }
})

{"time":1610518435515,"addData":{"id":"12019","name":"chengli"},"markUser":"YRy18ZGSJx1610510064329","markUv":"FFGFhM77jS1610507282054","type":1,"url":"https://tiangong.caohua.com/create/tencentlocal/plan","preUrl":"","errorList":[],"performance":{"dnst":0,"tcpt":0,"wit":54,"domt":367,"lodt":881,"radt":46,"rdit":0,"uodt":0,"reqt":29,"andt":515},.....

上报成功了，但是查这个文件，没有写入数据库，mongodb没有这个字段
service report_task.js

   // 数据操作层
    async handleData(query) {
        const type = query.type || 1;

        let item = {
            app_id: query.appId,
            create_time: new Date(query.time),
            user_agent: query.user_agent,
            ip: query.ip,
            mark_page: query.markPage || this.app.randomString(),
            mark_user: query.markUser || '',
            mark_uv: query.markUv || '',
            url: query.url,
        };

        if (type === 1) {
            // 页面级性能
            if (typeof query.isFristIn !== 'boolean') query.isFristIn = false;
            item = Object.assign(item, {
                is_first_in: query.isFristIn ? 2 : 1,
                pre_url: query.preUrl,
                performance: query.performance,
                error_list: query.errorList,
                resource_list: query.resourceList,
                screenwidth: query.screenwidth,
                screenheight: query.screenheight,
            });
        } else if (type === 2 || type === 3) {
            // AJAX性能
            item = Object.assign(item, {
                error_list: query.errorList,
                resource_list: query.resourceList,
            });
        }
        return item;
    }

npm start 运行外网无法访问

在腾讯云的轻量部署的Ubuntu，redis、mongo等都使用的docker-compose.

docker容器如下：

config.prod.js改动如下：

config.default.js改动如下：

npm start 如下：

访问: http://xxx.xxx.xxx.xxx:7001

没装nginx反代，安全组全开、防火墙也关了...实在想不出为啥了。。。

生产环境启动命令npm run build失败

（1）执行npm run build提示错误”npm ERR! missing script: build“是什么原因？
（2）执行npm run build是加载/config/config.prod.js文件吗？在哪个地方配置的？

文档多页面部署案例那里多了\看着好难受

安装过程卡在日志不动

你好，我按照这个过程使用docker安装了依赖软件之后，docker已经启动，用npm run dev启动，一直打印这个日志但是没有启动是怎么回事，是还有缺失吗

是开源的吗？

我想部署一套测试一下

请问如何部署在本地的react项目上呀？？

如何打包

如题

userMsg 存在安全隐患

pass_word 之类的敏感信息不应该存在localStorage 里面

怎么打包发布到服务器上呢

获取客户IP访问都是一个IP地址

ip、pv和uv都是0

mongo的webpvuvips表里有数据，但是每条数据的ip和pv、uv都是0，这是为什么呢？另外web_enviroment、web_pages里都没有数据是为什么呢？

通过Nginx做转发，注册成功后，登陆后立即被弹出

Nginx配置如下：

访问127.0.0.1:7001登录正常，通过Nginx访问登录后就被弹出

关于预警相关业务

建议预警相关业务以plugin的模式集成sentry

微信小程序，清空1日，20日，30日数据报错

1、 代码未改动时，提示 appID 不能为空，
看代码是在 setting.html 中没有传入 appId,

                removeWebDB1Data(){
			popup.confirm({title:'确定清空1日之前所有数据吗？',yes:()=>{
				util.ajax({
					url:`${config.baseApi}api/v1/remove/deleteDb1WebData`,
					data: {
						type: 'wx',
						appId: this.appId
					},
					success:data=>{
						popup.alert({title:'操作成功!'})
					}
				})
			}})
		},
		removeWebDB2Data(number){
			popup.confirm({
				title: `确定清空${number}日之前所有数据吗？`, yes: () => {
					util.ajax({
						url: `${config.baseApi}api/v1/remove/deleteDb2WebData`,
						data:{
							number: number,
							type: 'wx',
							appId: this.appId
						},
						success: data => {
							popup.alert({ title: '操作成功!' })
						}
					})
				}
			})
		},

上面是贴了改后的，看了网页项目的代码改的

2、 这样改了又是报错，报remove 为 undefind 。看了代码后，原因是分项目分表后，表名是要appId的，这里明显没有传，但是直接（appId）是不可以了，因为model不存在，所以改后代码如下：

async deleteDb2WebData(appId, number, type = 'web') {
        number = number * 1;
        const interval = parser.parseExpression(this.app.config.pvuvip_task_day_time);
        const endTime = new Date(new Date(interval.prev().toString()).getTime() - number * 86400000);
        const query = { create_time: { $lt: endTime } };
        let result = null;

        if (type === 'web') {
            // Ajax
            const remove1 = Promise.resolve(this.app.models.WebAjaxs(appId).remove(query).exec());
            // Pages
            const remove2 = Promise.resolve(this.app.models.WebPages(appId).remove(query).exec());
            // Environment
            const remove3 = Promise.resolve(this.app.models.WebEnvironment(appId).remove(query).exec());
            // Errors
            const remove4 = Promise.resolve(this.app.models.WebErrors(appId).remove(query).exec());
            // Resource
            const remove5 = Promise.resolve(this.app.models.WebResource(appId).remove(query).exec());
            result = await Promise.all([ remove1, remove2, remove3, remove4, remove5 ]);
        } else if (type === 'wx') {
            // Ajax
            const remove1 = Promise.resolve(this.app.models.WxAjaxs(appId).remove(query).exec());
            // Pages
            const remove2 = Promise.resolve(this.app.models.WxPages(appId).remove(query).exec());
            // Errors
            const remove3 = Promise.resolve(this.app.models.WxErrors(appId).remove(query).exec());
            result = await Promise.all([ remove1, remove2, remove3 ]);
        }
        return result;
}

上面代码的路径是 service/remove.js

已上改完就可以了，没有提pull request，看作者也不怎么更新，但是人加能开源就不错了，自己能动手的就不要键盘侠

good night!

注册成功后，登陆后立即被弹出

注册成功后，登陆后立即被弹出。推测是 redis 判断了不同平台登陆，导致token失效，正在找问题，先来提个 issue。请作者看到协助下 😁

怎么跑起来啊？

搭了好久，没成功，是我太菜，打算放弃了。好气啊，有更加详细一点的搭建方案吗？docker是必须的吗？https://blog.seosiwei.com/performance/simple_deployment.html 这里没有说呀

文档页面无法访问

首页跳出率数值格式化NaN

通过NGINX代理出现域名域名来源有误,请检查config的origin配置

环境是 Linux云服务器 BT面板
也在config.prod.js配置了config.origin 但还是提示，请问下还需要配置哪里？

场景【页面加载时自动上报性能数据，页面按钮触发自定义数据上报】如何选择sdk？

需求：页面加载成功以后自动上报性能数据，然后页面操作时上报埋点数据
请教一下此场景如何选择sdk？
※web-report-default.min.js好像只支持自动上报（监听load时间调用reportData函数）
※web-report-none.min.js自动上报性能数据是通过业务页面js中监听load事件然后调用window.ReportData()上报，然后按钮动作调用window.ReportData()实现埋点数据上报？

项目使用fetch请求报错

Uncaught (in promise) TypeError: Failed to execute 'json' on 'Response': body stream is locked

项目上报成功，但是没有写入redis(原始数据写入)，导致查不到数据

redis和mongodb相关的表都是空的

本地启动报错

这种是由于mongodb链接的原因吗？

api/v1/report/webscript 接口404

本地启动服务，http://127.0.0.1:7001/api/v1/report/webscript接口404，http://127.0.0.1:7001/api/v1/report/web 同样404

<\script src="/dist/performance-report-default.min.js"><\/script>
<\script>
Performance({
    domain: 'http://127.0.0.1:7001/api/v1/report/webscript', 
    add:{
        appId:'pwBSn621542855731693'
    }
})
<\/script>

难道domain不是这个吗

这个项目还会继续开发吗？

想把这个项目部署到线上去，想问一下这个项目还会继续开发吗？

是否支持自定义埋点呢？比如点击某个按钮进行数据埋点

ajax下查询不会默认选择某日期，查询结果为空

应该默认3天内时间段查询结果，或者昨日的统计

npm run star报错： egg-mongoose-performance-system

使用环境：
使用 VMware虚拟机 centos7 安装应用
其中 npm run dev 正常启动

npm run start 时报错如下：

error [email protected] start: egg-scripts start --daemon --workers=2 --title=performance
error Exit status 1
error Failed at the [email protected] start script.

是因为我的mongodb 链接不正确么？

不知道怎么解决，请指教！

请问为什么统计不了数据的吗？

<\script src="/dist/performance-report-default.min.js"></script>
<\script>
Performance({
domain: 'http://127.0.0.1:7001/api/v1/report/web',
add:{
appId:'FdFTkd71612432225657'
}
})
</script>
是不是生成出来的是有问题的吗？

小程序的上报接口还不支持吗

部署linux mongodb集群 但是会报错

(node:2611) DeprecationWarning: collection.count is deprecated, and will be removed in a future version. Use Collection.countDocuments or Collection.estimatedDocumentCount instead
2021-03-29 17:17:00,029 ERROR 2611 [Job#16170094200012871372976768671] /opt/zanePerfor/app/schedule/ip_task.js execute failed, used 24ms. { MongoError: not authorized on performance to execute command { distinct: "systems", key: "app_id", query: { type: "web" }, lsid: { id: UUID("79941e64-2b5d-4d1f-86e7-e3566568f319") }, $clusterTime: { clusterTime: Timestamp(1617009402, 4), signature: { hash: BinData(0, 502F7D5161F5E86197502542CD3B17E5B8C87787), keyId: 6943851795571539994 } }, $db: "performance", $readPreference: { mode: "secondaryPreferred" } }
at Connection. (/opt/zanePerfor/node_modules/mongodb/lib/core/connection/pool.js:451:61)
at Connection.emit (events.js:182:13)
at processMessage (/opt/zanePerfor/node_modules/mongodb/lib/core/connection/connection.js:451:10)
at Socket. (/opt/zanePerfor/node_modules/mongodb/lib/core/connection/connection.js:620:15)
at Socket.emit (events.js:182:13)
at addChunk (_stream_readable.js:283:12)
at readableAddChunk (stream_readable.js:264:11)
at Socket.Readable.push (stream_readable.js:219:10)
at TCP.onread (net.js:639:20)
ok: 0,
code: 13,
codeName: 'Unauthorized',
operationTime:
Timestamp { bsontype: 'Timestamp', low: 4, high: 1617009402 },
'$clusterTime':
{ clusterTime:
Timestamp { bsontype: 'Timestamp', low: 4, high: 1617009402 },
signature: { hash: [Binary], keyId: [Long] } },
name: 'MongoError' }
2021-03-29 17:17:00,037 INFO 2611 重启db3数据库失败!

关于技术选型，为什么选择mogodb

为什么不选择生态比较成熟的mysql

ajax信息上报但是未被记录，mongo中web_ajaxs表为空

其余所有上报均正常，只有web_ajaxs表为空

是否考虑添加LDAP支持？

这个项目非常棒，非常感谢作者提供了这么一套工具，非常喜欢。最近打算在公司部署一套，但是看到功能里面没有说明是否支持LDAP登录。

1.这个项目支持LDAP登录吗？如果支持怎么设置？
2.如果不支持是否有计划支持这个特性？
3.是否欢迎PR？

kafka的用法可能有点问题

目前的kafka消费策略是有点问题的，没有从根本解决kafka fetch loop的问题，虽然队列限制了10000的大小，但是fetch loop会一直执行，除非手动pause，offset会一直自动提交。如果收到消息后判断当前队列大于10000后，直接return是会丢失消息的。同时，当消息量增加，消费能力较弱时，node eventloop由于在不停触发on message事件，会导致eventloop队列内持续增长，有内存溢出的风险。

到底能支撑多少数据啊，我就监控了几个系统 就出现报错了

MongoDB Could not find host matching read preference { mode: “primary” } for set shard3

我按照教程配置了，但是没有数据

我用的是react+webpack

引入方式是这样的；

import { Performance } from 'web-report';

Performance({
  domain: 'https://test.xxxx.com',
  add: {
    appId: '3ECTeiB156914081xxxx',
  },
});

在本地搭建项目中也添加了该项目

但就是没有数据，
还报错死循环


能否帮忙看一下？谢谢！
另外，本地可以监控到么，如果能，是不是domain和项目中的地址都要改成"http://localhost"这样？