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

头像
欧西里斯的天秤
     上海
    阅读 4 分钟

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

    Github 地址：

    https://github.com/zhedh/cloudtop

    一、项目介绍

    .
├── 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 前端性能监控数据大盘

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

    主要功能：

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

    二、系统整体框架图

    image.png

    三、项目部署

    环境要求

    nodejs + typescript + pm2
    • Node >= 16

    下载(clone)项目源码

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

    环境变量配置

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

    环境变量说明如下：

    变量描述必填默认值
    CLOUDTOP_ELASTIC_NODEElastic 连接必填-
    CLOUDTOP_ELASTIC_USERNAMEElastic 账号必填-
    CLOUDTOP_ELASTIC_PASSWORDElastic 密码必填-
    CLOUDTOP_ELASTIC_INDEXElastic 索引必填-
    CLOUDTOP_ELASTIC_TYPEElastic 类型必填-
    CLOUDTOP_DATABASE_HOSTMysql 主机必填-
    CLOUDTOP_DATABASE_PORTMysql 端口号必填-
    CLOUDTOP_DATABASE_USERMysql 账号必填-
    CLOUDTOP_DATABASE_PASSWORDMysql 密码必填-
    CLOUDTOP_DATABASE_DATABASEMysql 数据库名必填-
    VITE_PORTcloudtop_monitor 应用端口号可选8000
    VITE_BASE_URL接口域名 ，即 cloudtop_monitor_server 域名必填
    VITE_SHA1_SALTcloudtop_monitor 应用 sha1 key可选代码指定
    CLOUDTOP_MONITOR_SERVER_PORTcloudtop_monitor_server 应用端口号可选3100
    CLOUDTOP_SERVER_PORTcloudtop_server 应用端口号可选3000

    初始化项目

    首次运行项目时执行

    • 全局安装 pm2、typescript
    • 安装项目依赖
    npm run init

    启动项目

    npm run start

    查看日志

    pm2 log

    Docker 部署

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

    • 项目端口号需要在 Dockerfile 中 EXPOSE

    四、创建项目

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

    image.png

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

    五、安装探针

    探针脚本打包

    本项目使用 pnpm 包管理工具

    # 进入到探针项目
cd cloudtop

# 安装依赖
pnpm install

# 打包产物
pnpm build

    Script 植入

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

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

    2.探针初始化

    字段类型必填描述示例
    baseURLstring必填日志上报地址http://localhost:3000
    projectIdstring必填项目标识（项目 CODE，需与监控面板中的项目匹配）cloudtop_monitor
    envstring必填项目环境 ProjectEnvproduction
    reportTypestring可选上报方式 ReportTypebeacon

    ProjectEnv 枚举

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

    ReportType 枚举，默认 beacon

    值描述
    beaconnavigator.sendBeacon
    img图片上报
    xhrXMLHttpRequest
    window.cloudtop = new Cloudtop({
  baseURL: 'http://localhost:3000',
  projectId: 'cloudtop_monitor',
  env: 'production', // 上报环境
  reportType: 'beacon', // 上报方式
})

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

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

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

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

    上报示例如下

    /**
 * 获取客户端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.安装

    npm install cloudtop --save

    2.引入

    import Cloudtop from 'cloudtop'

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

    3.方法调用同 Script 植入

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

    六、监控面板截图

    首页

    image.png

    概览

    image.png

    健康状况

    image.png

    访问分布图

    image.png

    页面性能

    image.png

    Microsoftjavascripttypescriptnode.jspm2
    欧西里斯的天秤
    999 声望29 粉丝

    前端大杂烩，等你来爆炒！

    下一篇 »
    Cloudtop 开源前端性能监控系统设计与开发二（日志数据字段设计）

    引用和评论

    推荐阅读
    头像
    微信小程序实现双人音视频对话

    欧西里斯的天秤阅读 705

    头像
    前端如何入门 Go 语言

    robin赞 28阅读 8.4k评论 9

    头像
    100个React最佳实践小技巧

    夕水赞 26阅读 6.6k评论 4

    头像
    前端开发工具

    寒青赞 19阅读 5.2k

    头像
    开发插件集合

    寒青赞 14阅读 3.5k

    头像
    JS校验身份证号

    寒青赞 10阅读 4.5k评论 2

    头像
    Jerry和您聊聊Chrome开发者工具

    注销赞 9阅读 4.8k评论 3

    0 条评论
    得票最新