Cloudtop 前端監控系統是一套集流量監控、錯誤監控、性能監控、接口監控於一體的監控平台；目前支持 Web 端接入。
Github 地址：
https://github.com/zhedh/cloudtop
一、項目介紹
.
├── Dockerfile
├── README.md
├── cloudtop
├── cloudtop_monitor
├── cloudtop_monitor_server
├── cloudtop_server
├── init.sh
├── package.json
└── start.shcloudtop 前端性能監控探針
用於收集和分析網頁或 Web 應用在前端運行時的性能數據。通過對這些數據的分析，開發人員可以識別性能瓶頸，優化用户體驗，提高網頁加載速度和交互效率。
前端性能監控探針會蒐集下面幾個方面的數據信息：
- 頁面加載時間：監控頁面從開始加載到完全加載所需的時間，包括 DNS 查詢、TCP 連接、請求和響應時間等。
- 資源加載：跟蹤 HTML、CSS、JavaScript、圖片等資源的加載時間，瞭解哪些資源耗時較長。
- 渲染時間：測量頁面渲染的時間，包括首屏時間、白屏時間等。
- 用户交互響應：收集用户與頁面交互時的響應時間，如點擊按鈕、輸入數據等。
- 錯誤監控：捕獲 JavaScript 錯誤、網絡請求失敗等異常情況。
cloudtop_server 前端性能日誌接收服務
用於接收、處理和存儲前端應用發送的日誌數據的服務。負責對前端發送的日誌進行有效的管理。
主要功能：
- 提供的 API 接口，用於接收前端發送的日誌數據。
- 對接收到的日誌數據進行解析，以便於後續處理。
- 將解析後的日誌數據存儲到數據庫或日誌文件系統中。
cloudtop_monitor_server 前端性能監控數據檢索服務
提供用户查詢和分析前端性能監控數據的服務。
主要功能：
- 提供 API，允許用户查詢性能數據。
- 用於分析性能數據，生成報告和可視化圖表。
- 根據性能數據設置閾值，當性能指標超過閾值時發送告警通知。
- 用户權限管理。
cloudtop_monitor 前端性能監控數據大盤
前端監控綜合性的數據展示界面，彙總並可視化前端性能監控的關鍵指標和數據，以便於開發者和運維團隊快速瞭解前端應用的性能狀況。
主要功能：
- 實時性能指標：顯示當前應用的實時性能數據，如頁面加載時間、響應時間、錯誤率等。
- 歷史性能趨勢：展示性能指標隨時間變化的趨勢圖，幫助用户發現性能變化的趨勢和週期性波動。
- 地域分佈：顯示不同地區用户的性能體驗，幫助識別地域性性能問題。
- 設備類型分佈：展示不同設備類型（如桌面、移動設備）的性能數據，以便優化特定設備的用户體驗。
- 頁面性能分佈：顯示不同頁面或視圖的性能數據，幫助識別性能瓶頸所在的頁面。
- 錯誤統計：統計不同類型的錯誤發生次數和頻率，幫助定位和解決前端錯誤。
- 用户行為分析：分析用户在前端應用中的行為模式，如頁面停留時間、點擊熱力圖等。
- 性能閾值告警：設置性能指標的閾值，當指標超過閾值時發出告警，以便及時處理性能問題。
二、系統整體框架圖
三、項目部署
環境要求
nodejs + typescript + pm2
- Node >= 16
下載(clone)項目源碼
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
- 安裝項目依賴
npm run init啓動項目
npm run start查看日誌
pm2 logDocker 部署
支持 Docker 部署，可根據需要修改 Dockerfile 文件。
- 項目端口號需要在 Dockerfile 中 EXPOSE
四、創建項目
部署完成後，打開 cloudtop_monitor 監控面板應用，新建項目
- 項目類型：目前僅支持 Web 項目接入
- 項目標識：接入探針的應用唯一標識，請填寫英文字母或者數字，如 cloudtop_monitor
- 項目名稱：接入探針的應用名稱
五、安裝探針
探針腳本打包
本項目使用 pnpm 包管理工具
# 進入到探針項目
cd cloudtop
# 安裝依賴
pnpm install
# 打包產物
pnpm buildScript 植入
1.複製探針代碼（ cloudtop/packages/cloudtop/dist 路徑下的 cloudtop.iife.js 或 cloudtop.umd.js），將生產環境探針代碼插入到 head 標籤的最頂部
<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 |
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 --save2.引入
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 })六、監控面板截圖
首頁
概覽
健康狀況
訪問分佈圖
頁面性能
