自己学着开发一款前端性能监控系统

如今的前端越来越宽泛了，技术栈也越来越广，从之前的纯前端Js + Html + Css到服务端的Node，前端要做的事情越来越多，开发一款从服务端到客户端的应用成为现实。今天就来介绍一款github上开源的高性能、高可用的前端性能监控和统计平台（https://github.com/wangweianger/zanePerfor）

该项目的技术栈涵盖：Node + Vue + Egg + Mogodb + Redis + Kafka

这个项目学习下来，你的技术广度应该又提升一个高度。对服务的稳定性和高并发有一定要求。我从事技术也有五年了，始终觉得最好的学习方式就是从开源的源码开始学起，先运行起来，然后再了解文档，熟悉其中的技术栈，最后再试着去阅读主要的源码，遇到不懂的概念和技术点，再从网上找资料去学习。这是一条快速而并没有那么枯燥的一种学习方法。也是一种目的性很强的一种学习方式。

平台的功能如下：

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

这个项目是数据收集和后台提供展示，详细的介绍文档（https://blog.seosiwei.com/performance/simple_deployment.html），另外还提供了数据上报客户端的SDK，包括小程序和PC端

微信小程序端使用说明

直接下载sdk（https://github.com/wangweianger/wx-report-sdk），引入到小程序的app.js最顶部
微信小程序 app.js头部引入sdk
const wxRepotSdk = require('./utils/wx-report-sdk.min');
new wxRepotSdk({
domain:'http://test.com',
add:{
appId:'56F6E424F57EFB36B0XXX'
}
})