如今的前端越来越宽泛了,技术栈也越来越广,从之前的纯前端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'
}
})

Web端上报SDK详细说明:

见另外一个git项目:(https://github.com/wangweianger/web-report-sdk)

详细的配置参数,可根据配置上报不同级别的性能参数,还根据不同的技术打包成不同的sdk

  • 一 :所有类型通用的上报SDK 即:web-report-default.js
  • 二 :针对于使用Jquery ajax的上报SDK 即:web-report-jquery.js
  • 三 :针对于使用Axios ajax的上报SDK 即:web-report-axios.js
  • 四 :针对于使用Fetch ajax的上报SDK 即:web-report-fetch.js
  • 五 :针对于业务代码手动触发的上报SDK 即:web-report-none.js

相信吃透这套源码,前端应该在一个中高级的水平了,搞懂原理更重要,不要被各种新出的技术弄的眼花缭乱,这一套东西下来涵盖一个应用的各个方面,很系统的,从不同端到不同的服务,数据的上报于收集,再到最后的分析,这在一个公司最起码是三四种岗位做的事,前端、后端、运维、运营,你一个人就搞定了,你说牛不牛!

自己学着开发一款前端性能监控系统-爱 • 范儿