博客 / 詳情

返回

Cloudtop 開源前端性能監控系統設計與開發二（日誌數據字段設計）

本文主要描述 Cloudtop 前端性能監控日誌字段的含義，用於檢索和排查問題。

代碼完全開源，支持二次開發；如有錯漏，歡迎指出。

Github 開源項目地址：

https://github.com/zhedh/cloudtop

公共字段

字段 類型 示例 説明
pid string cloudtop_admin 應用 ID 或應用標識，應用唯一值
type LogType pv 日誌類型
report_time number 1711540240461 日誌上報時間（毫秒）
date number 1711540240461 默認取 reportTime，其次取服務器時間
env LogEnv production 環境
ct string 4g 網絡類型
http_referer string https://example.com 頁面 Referer
http_user_agent string Mozilla/5.0***605.1.15 瀏覽器 UserAgent
browser string safari 瀏覽器類型
browser_version string 14.1.1 瀏覽器版本
device string mac 設備類型
engine string webkit 瀏覽器引擎
engine_version string 605.1.15 瀏覽器引擎版本
os string macos 操作系統
os_version string 10.15.7 操作系統版本
device_type string pc 設備類型 pc、mobile
sid string pv Session ID
sr string 400*892 屏幕分辨率
vp string 400*813 屏幕分辨率
src string http://www.example.com 被監控目標地址
pv_id string bkkR****2R2Xp PV ID
uid string e023f1****3de48 系統生成
page string /testing 頁面、頁面 path
login_id string 123****987 用户登錄賬號、用於匹配用户、自定義
ext string '{"a":1,"b":2}' 擴展字段，不要超過 100 個字符

日誌類型（LogType）枚舉：

值 説明
pv PV 日誌
error JS 錯誤日誌
resource_error 資源引用錯誤日誌
perf 性能日誌
api 接口日誌

日誌環境（LogEnv）枚舉：

值 説明
production 生產環境
staging 預發佈環境
testing 測試環境
development 開發環境

PV 日誌

字段 類型 示例 説明
dt string cloudtop 性能監控面板 文檔標題
dr string https://example.com 文檔 Referrer
de string utf-8 文檔編碼類型
dpr string 1 屏幕像素比
lang string en 文檔語言
url string https://example.com/tools 頁面鏈接

上報數據示例：

{
  "pid": "cloud***_admin",
  "type": "pv",
  "env": "production",
  "report_time": 1711609330415,
  "date": 1711609330415,
  "ct": "4g",
  "http_referer": "https://www.****.com/",
  "http_user_agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36 NetType/WIFI MicroMessenger/7.0.20.1781(0x6700143B) WindowsWechat(0x6309092b) XWEB/9079 Flue",
  "browser": "WeChat",
  "browser_version": "7.0.20.1781",
  "device": "",
  "engine": "Blink",
  "engine_version": "116.0.0.0",
  "os": "Windows",
  "os_version": "10",
  "device_type": "pc",
  "ip_isp": "移動",
  "ip_country": "中國",
  "ip_country_id": "CN",
  "ip_region": "重慶",
  "ip_region_id": "50",
  "ip_region_name": "重慶市",
  "ip_city": "重慶城區",
  "ip_city_id": "5001",
  "ip_city_name": "重慶城區",
  "remote_addr": "183.230.119.132",
  "sid": "",
  "pv_id": "eb157b0c-f557-47a8-8a90-88a86950e312",
  "page": "/data/trade",
  "src": "https://www.***.com/data/trade",
  "sr": "1280*800",
  "vp": "1280*719",
  "uid": "ae3525b0-0181-4aab-97d5-eca564e7a87e",
  "login_id": "138***",
  "dt": "品牌雲店",
  "dr": "https://login.***.com/",
  "de": "UTF-8",
  "dpr": "1.5",
  "lang": "en",
  "url": "https://www.***.com/data/trade"
}

Error 日誌

字段 類型 示例 説明
category string ReferenceError 錯誤分類，默認為 CustomError
msg string https://example.com 錯誤消息，最大支持 1000 個字符
error string - 錯誤詳情
stack string - 錯誤堆棧信息，最大支持 1000 個字符
file string https://example.com/assets/index.040f44f5.js:60:1844 報錯 JS 所屬文件
line string 60 報錯發生行
col string 1844 報錯發生列

上報數據示例：

{
  "pid": "cloud***_admin",
  "type": "error",
  "env": "production",
  "report_time": 1711608515413,
  "date": 1711608515413,
  "ct": "4g",
  "http_referer": "https://www.***.com/",
  "http_user_agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36",
  "browser": "Chrome",
  "browser_version": "122.0.0.0",
  "device": "",
  "engine": "Blink",
  "engine_version": "122.0.0.0",
  "os": "Windows",
  "os_version": "10",
  "device_type": "pc",
  "ip_isp": "聯通",
  "ip_country": "中國",
  "ip_country_id": "CN",
  "ip_region": "上海",
  "ip_region_id": "31",
  "ip_region_name": "上海市",
  "ip_city": "上海",
  "ip_city_id": "3101",
  "ip_city_name": "上海市",
  "remote_addr": "210.13.84.10",
  "sid": "",
  "pv_id": "e895589f-5f52-4e28-8dce-9b534626d43c",
  "page": "/commission/commissionlist/commissionadd",
  "src": "https://www.***.com/commission/commissionlist/commissionadd",
  "sr": "1536*864",
  "vp": "1536*714",
  "uid": "4b6468be-fb87-4157-b31b-2d121bd36edc",
  "login_id": "136****",
  "category": "TypeError",
  "msg": "Cannot read properties of null (reading 'bizType')",
  "stack": "TypeError: Cannot read properties of null (reading 'bizType')\n    at Z (https://www.***.com/assets/index.040f44f5.js:60:1844)",
  "file": "",
  "line": 60,
  "col": 1844,
  "error": {
    "name": "TypeError",
    "message": "Cannot read properties of null (reading 'bizType')",
    "stack": "TypeError: Cannot read properties of null (reading 'bizType')\n    at Z (https://www.***.com/assets/index.040f44f5.js:60:1844)"
  }
}

ResourceError 日誌

字段 類型 示例 説明
src string http://example.com/suv4/rMainB.bundle.js 資源地址
node_name string SCRIPT 發生錯誤的 HTML 節點類型
xpath string html.body.script 發生錯誤位置
res_type string script 錯誤資源類型
res_name string /suv4/rMainB.bundle.js 錯誤資源名稱
domain string example.com 錯誤資源域名

上報數據示例：

{
  "pid": "cloudshop_admin",
  "type": "resource_error",
  "env": "production",
  "report_time": 1711413678276,
  "date": 1711413678276,
  "ct": "4g",
  "http_referer": "https://www.example.com/",
  "http_user_agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Safari/537.36",
  "browser": "Chrome",
  "browser_version": "117.0.0.0",
  "device": "",
  "engine": "Blink",
  "engine_version": "117.0.0.0",
  "os": "Windows",
  "os_version": "10",
  "device_type": "pc",
  "ip_isp": "內網IP",
  "ip_country": "",
  "ip_country_id": "",
  "ip_region": "",
  "ip_region_id": "",
  "ip_city": "",
  "ip_city_id": "",
  "remote_addr": "172.**.**.135",
  "sid": "",
  "pv_id": "0c41ee34-cd54-45df-95b9-f1b4e6a0404b",
  "page": "/",
  "src": "https://www.example.com/suv4/rMainB.bundle.js?md5=bc82bf95c5d2dd6abc9dec6fb91f48be",
  "sr": "1280*720",
  "vp": "1280*581",
  "uid": "237b4fd4-2ad0-47ed-af72-4f3ed9bc5059",
  "login_id": "138***",
  "node_name": "SCRIPT",
  "xpath": "html.body.script",
  "res_type": "script",
  "res_name": "/suv4/rMainB.bundle.js?md5=bc82bf95c5d2dd6abc9dec6fb91f48be",
  "domain": "www.example.com"
}

Perf 日誌

字段 類型 示例 説明
dns number 12 DNS 連接耗時
tcp number 29 TCP 連接耗時
ssl number 19 SSL 連接耗時
ttfb number 280 網絡請求耗時。等待接收響應的第一個字節所花費的時間
trans number 2 數據傳輸耗時
dom number 681 DOM 解析耗時
res number 1 資源加載耗時。DOM 解析完成後到頁面完全加載完所用的時間
firstbyte number 309 First Byte 時間
fpt number 634 首次渲染時間。白屏時間
tti number 677 首次可操作時間
ready number 837 HTML 加載完成時間，即 DOM Ready 時間
load number 838 從開始加載到完全加載時間
lcp number 1418 最大內容繪製時間

上報數據示例：

{
  "pid": "cloud***",
  "type": "perf",
  "env": "production",
  "report_time": 1711949380452,
  "date": 1711949380452,
  "ct": "4g",
  "http_referer": "https://www.example.com/",
  "http_user_agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36",
  "browser": "Chrome",
  "browser_version": "123.0.0.0",
  "device": "",
  "engine": "Blink",
  "engine_version": "123.0.0.0",
  "os": "Windows",
  "os_version": "10",
  "device_type": "pc",
  "ip_isp": "內網IP",
  "ip_country": "",
  "ip_country_id": "",
  "ip_region": "",
  "ip_region_id": "",
  "ip_city": "",
  "ip_city_id": "",
  "remote_addr": "172.**.**.155",
  "sid": "",
  "pv_id": "2d3ff32a-1b3d-4b39-b370-7af536957ddc",
  "page": "/data/trade",
  "src": "https://www.example.com/data/trade",
  "sr": "1366*768",
  "vp": "1366*641",
  "uid": "dd3bb22c-e220-4c60-9ac8-cb472fe14004",
  "login_id": "***",
  "dns": 0,
  "tcp": 29,
  "ssl": 19.299999952316284,
  "ttfb": 279.7999999523163,
  "trans": 1.5,
  "dom": 680.7999999523163,
  "res": 0.6000001430511475,
  "firstbyte": 309,
  "fpt": 633.5999999046326,
  "tti": 676.8999998569489,
  "ready": 837.0999999046326,
  "load": 837.7000000476837,
  "lcp": 1418
}

Api 日誌

字段 類型 示例 説明
api string https://www.example.com/v1/brand API 地址時
success number 1 請求是否成功 1：成功 0：失敗時
status number 200 請求返回狀態碼時
msg string 返回的消息體
time number 2 API 耗時，單位為 ms

上報數據示例：

{
  "pid": "cloudshop***",
  "type": "api",
  "env": "production",
  "report_time": 1711953796402,
  "date": 1711953796402,
  "ct": "4g",
  "http_referer": "https://www.example.com/",
  "http_user_agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36 Edg/122.0.0.0",
  "browser": "Edge",
  "browser_version": "122.0.0.0",
  "device": "",
  "engine": "Blink",
  "engine_version": "122.0.0.0",
  "os": "Windows",
  "os_version": "10",
  "device_type": "pc",
  "ip_isp": "聯通",
  "ip_country": "中國",
  "ip_country_id": "CN",
  "ip_region": "上海",
  "ip_region_id": "31",
  "ip_region_name": "上海市",
  "ip_city": "上海",
  "ip_city_id": "3101",
  "ip_city_name": "上海市",
  "remote_addr": "210.**.**.10",
  "sid": "",
  "pv_id": "672fd630-1793-4516-8267-a8f647e5fd58",
  "page": "/task/tasklist/taskadd",
  "src": "https://www.example.com/task/tasklist/taskadd",
  "sr": "1536*864",
  "vp": "1488*726",
  "uid": "029b6c1b-f83f-475f-987c-78f43c96dfd1",
  "login_id": "183***",
  "api": "https://www.example.com/tiger/buttonLimit",
  "success": 1,
  "status": 200,
  "msg": "",
  "time": 230
}
elasticsearch , node.js , pm2 , typescript , 前端
user avatar
0 位用戶收藏了這個故事！

發佈 評論

Some HTML is okay.