Cloudtop 开源前端性能监控系统设计与开发一（简述）

Cloudtop 前端监控系统是一套集流量监控、错误监控、性能监控、接口监控于一体的监控平台；目前支持 Web 端接入。

Github 地址：

github.com/zhedh/cloud...

一、项目介绍

txt 复制代码

.
├── Dockerfile
├── README.md
├── cloudtop
├── cloudtop_monitor
├── cloudtop_monitor_server
├── cloudtop_server
├── init.sh
├── package.json
└── start.sh

cloudtop 前端性能监控探针

用于收集和分析网页或 Web 应用在前端运行时的性能数据。通过对这些数据的分析，开发人员可以识别性能瓶颈，优化用户体验，提高网页加载速度和交互效率。

前端性能监控探针会搜集下面几个方面的数据信息：

页面加载时间：监控页面从开始加载到完全加载所需的时间，包括 DNS 查询、TCP 连接、请求和响应时间等。
资源加载：跟踪 HTML、CSS、JavaScript、图片等资源的加载时间，了解哪些资源耗时较长。
渲染时间：测量页面渲染的时间，包括首屏时间、白屏时间等。
用户交互响应：收集用户与页面交互时的响应时间，如点击按钮、输入数据等。
错误监控：捕获 JavaScript 错误、网络请求失败等异常情况。

cloudtop_server 前端性能日志接收服务

用于接收、处理和存储前端应用发送的日志数据的服务。负责对前端发送的日志进行有效的管理。

主要功能：

提供的 API 接口，用于接收前端发送的日志数据。
对接收到的日志数据进行解析，以便于后续处理。
将解析后的日志数据存储到数据库或日志文件系统中。

cloudtop_monitor_server 前端性能监控数据检索服务

提供用户查询和分析前端性能监控数据的服务。

主要功能：

提供 API，允许用户查询性能数据。
用于分析性能数据，生成报告和可视化图表。
根据性能数据设置阈值，当性能指标超过阈值时发送告警通知。
用户权限管理。

cloudtop_monitor 前端性能监控数据大盘

前端监控综合性的数据展示界面，汇总并可视化前端性能监控的关键指标和数据，以便于开发者和运维团队快速了解前端应用的性能状况。

主要功能：

**实时性能指标：**显示当前应用的实时性能数据，如页面加载时间、响应时间、错误率等。
**历史性能趋势：**展示性能指标随时间变化的趋势图，帮助用户发现性能变化的趋势和周期性波动。
**地域分布：**显示不同地区用户的性能体验，帮助识别地域性性能问题。
**设备类型分布：**展示不同设备类型（如桌面、移动设备）的性能数据，以便优化特定设备的用户体验。
**页面性能分布：**显示不同页面或视图的性能数据，帮助识别性能瓶颈所在的页面。
**错误统计：**统计不同类型的错误发生次数和频率，帮助定位和解决前端错误。
**用户行为分析：**分析用户在前端应用中的行为模式，如页面停留时间、点击热力图等。
**性能阈值告警：**设置性能指标的阈值，当指标超过阈值时发出告警，以便及时处理性能问题。

二、系统整体框架图

三、项目部署

环境要求

nodejs + typescript + pm2

Node >= 16

下载(clone)项目源码

bash 复制代码

git clone https://github.com/zhedh/cloudtop.git

环境变量配置

修改根目录下 .env 文件，改成自己项目的配置

环境变量说明如下：

变量	描述	必填	默认值
CLOUDTOP_ELASTIC_NODE	Elastic 连接	必填	-
CLOUDTOP_ELASTIC_USERNAME	Elastic 账号	必填	-
CLOUDTOP_ELASTIC_PASSWORD	Elastic 密码	必填	-
CLOUDTOP_ELASTIC_INDEX	Elastic 索引	必填	-
CLOUDTOP_ELASTIC_TYPE	Elastic 类型	必填	-
CLOUDTOP_DATABASE_HOST	Mysql 主机	必填	-
CLOUDTOP_DATABASE_PORT	Mysql 端口号	必填	-
CLOUDTOP_DATABASE_USER	Mysql 账号	必填	-
CLOUDTOP_DATABASE_PASSWORD	Mysql 密码	必填	-
CLOUDTOP_DATABASE_DATABASE	Mysql 数据库名	必填	-
VITE_PORT	cloudtop_monitor 应用端口号	可选	8000
VITE_BASE_URL	接口域名，即 cloudtop_monitor_server 域名	必填
VITE_SHA1_SALT	cloudtop_monitor 应用 sha1 key	可选	代码指定
CLOUDTOP_MONITOR_SERVER_PORT	cloudtop_monitor_server 应用端口号	可选	3100
CLOUDTOP_SERVER_PORT	cloudtop_server 应用端口号	可选	3000

初始化项目

首次运行项目时执行

全局安装 pm2、typescript
安装项目依赖

bash 复制代码

npm run init

启动项目

bash 复制代码

npm run start

查看日志

bash 复制代码

pm2 log

Docker 部署

支持 Docker 部署，可根据需要修改 Dockerfile 文件。

项目端口号需要在 Dockerfile 中 EXPOSE

四、创建项目

部署完成后，打开 cloudtop_monitor 监控面板应用，新建项目

项目类型：目前仅支持 Web 项目接入
项目标识：接入探针的应用唯一标识，请填写英文字母或者数字，如 cloudtop_monitor
项目名称：接入探针的应用名称

五、安装探针

探针脚本打包

本项目使用 pnpm 包管理工具

bash 复制代码

# 进入到探针项目
cd cloudtop

# 安装依赖
pnpm install

# 打包产物
pnpm build

Script 植入

1.复制探针代码（ cloudtop/packages/cloudtop/dist 路径下的 cloudtop.iife.js 或 cloudtop.umd.js），将生产环境探针代码插入到 head 标签的最顶部

html 复制代码

<head>
  <script>
    var Cloudtop=function()...
  </script>
</head>

2.探针初始化

字段	类型	必填	描述	示例
baseURL	string	必填	日志上报地址	http://localhost:3000
projectId	string	必填	项目标识（项目 CODE，需与监控面板中的项目匹配）	cloudtop_monitor
env	string	必填	项目环境 ProjectEnv	production
reportType	string	可选	上报方式 ReportType	beacon

ProjectEnv 枚举

值	描述
production	生产环境
staging	预发环境
testing	测试环境
development	开发环境

ReportType 枚举，默认 beacon

值	描述
beacon	navigator.sendBeacon
img	图片上报
xhr	XMLHttpRequest

js 复制代码

window.cloudtop = new Cloudtop({
  baseURL: 'http://localhost:3000',
  projectId: 'cloudtop_monitor',
  env: 'production', // 上报环境
  reportType: 'beacon', // 上报方式
})

3.对于单页应用，路由变化需要调用 routeChange 方法，触发 PV 上报

js 复制代码

// pathname 推荐使用页面路径，可自定义
window.cloudtop.routeChange(pathname)

4.部分日志服务可能不支持获取客户端 ID，需要前端调用接口获取后上报

日志服务支持获取客户端 IP，可忽略
根据项目需要客户端 IP 可选上报

上报示例如下

js 复制代码

/**
 * 获取客户端IP，用于性能监控
 */
const getClientIp = async () => {
  const { status, data } = await axios.get('https://api.ip.sb/geoip')
  if (status === 200) {
    window.cloudtop.setConfig({ clientIp: data.ip })
  }
}

NPM 接入

1.安装

bash 复制代码

npm install cloudtop --save

2.引入

js 复制代码

import Cloudtop from 'cloudtop'

const cloudtop = new Cloudtop({
  baseURL: 'http://localhost:3000',
  projectId: 'cloudtop-monitor',
  env: 'testing',
  reportType: 'beacon',
})

3.方法调用同 Script 植入

js 复制代码

cloudtop.routeChange(pathname)

js 复制代码

cloudtop.setConfig({ clientIp: data.ip })

六、监控面板截图

首页

概览

健康状况

访问分布图

页面性能