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

头像
欧西里斯的天秤
     上海
    阅读 11 分钟
    1
    头图

    本文主要描述 Cloudtop 前端性能监控日志字段的含义，用于检索和排查问题。

    代码完全开源，支持二次开发；如有错漏，欢迎指出。

    Github 开源项目地址：

    https://github.com/zhedh/cloudtop

    公共字段

    字段类型示例说明
    pidstringcloudtop_admin应用 ID 或应用标识，应用唯一值
    typeLogTypepv日志类型
    report_timenumber1711540240461日志上报时间（毫秒）
    datenumber1711540240461默认取 reportTime，其次取服务器时间
    envLogEnvproduction环境
    ctstring4g网络类型
    http_refererstringhttps://example.com页面 Referer
    http_user_agentstringMozilla/5.0***605.1.15浏览器 UserAgent
    browserstringsafari浏览器类型
    browser_versionstring14.1.1浏览器版本
    devicestringmac设备类型
    enginestringwebkit浏览器引擎
    engine_versionstring605.1.15浏览器引擎版本
    osstringmacos操作系统
    os_versionstring10.15.7操作系统版本
    device_typestringpc设备类型 pc、mobile
    sidstringpvSession ID
    srstring400*892屏幕分辨率
    vpstring400*813屏幕分辨率
    srcstringhttp://www.example.com被监控目标地址
    pv_idstringbkkR****2R2XpPV ID
    uidstringe023f1****3de48系统生成
    pagestring/testing页面、页面 path
    login_idstring123****987用户登录账号、用于匹配用户、自定义
    extstring'{"a":1,"b":2}'扩展字段，不要超过 100 个字符

    日志类型（LogType）枚举：

    值说明
    pvPV 日志
    errorJS 错误日志
    resource_error资源引用错误日志
    perf性能日志
    api接口日志

    日志环境（LogEnv）枚举：

    值说明
    production生产环境
    staging预发布环境
    testing测试环境
    development开发环境

    PV 日志

    字段类型示例说明
    dtstringcloudtop 性能监控面板文档标题
    drstringhttps://example.com文档 Referrer
    destringutf-8文档编码类型
    dprstring1屏幕像素比
    langstringen文档语言
    urlstringhttps://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 日志

    字段类型示例说明
    categorystringReferenceError错误分类，默认为 CustomError
    msgstringhttps://example.com错误消息，最大支持 1000 个字符
    errorstring-错误详情
    stackstring-错误堆栈信息，最大支持 1000 个字符
    filestringhttps://example.com/assets/index.040f44f5.js:60:1844报错 JS 所属文件
    linestring60报错发生行
    colstring1844报错发生列

    上报数据示例：

    {
  "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 日志

    字段类型示例说明
    srcstringhttp://example.com/suv4/rMainB.bundle.js资源地址
    node_namestringSCRIPT发生错误的 HTML 节点类型
    xpathstringhtml.body.script发生错误位置
    res_typestringscript错误资源类型
    res_namestring/suv4/rMainB.bundle.js错误资源名称
    domainstringexample.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 日志

    字段类型示例说明
    dnsnumber12DNS 连接耗时
    tcpnumber29TCP 连接耗时
    sslnumber19SSL 连接耗时
    ttfbnumber280网络请求耗时。等待接收响应的第一个字节所花费的时间
    transnumber2数据传输耗时
    domnumber681DOM 解析耗时
    resnumber1资源加载耗时。DOM 解析完成后到页面完全加载完所用的时间
    firstbytenumber309First Byte 时间
    fptnumber634首次渲染时间。白屏时间
    ttinumber677首次可操作时间
    readynumber837HTML 加载完成时间，即 DOM Ready 时间
    loadnumber838从开始加载到完全加载时间
    lcpnumber1418最大内容绘制时间

    上报数据示例：

    {
  "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 日志

    字段类型示例说明
    apistringhttps://www.example.com/v1/brandAPI 地址时
    successnumber1请求是否成功 1：成功 0：失败时
    statusnumber200请求返回状态码时
    msgstring 返回的消息体
    timenumber2API 耗时，单位为 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
}
    Microsoft前端typescriptnode.jspm2elasticsearch
    欧西里斯的天秤
    999 声望29 粉丝

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

    « 上一篇
    Cloudtop 开源前端性能监控系统设计与开发一（简述）
    下一篇 »
    HTTP 知识整理

    引用和评论

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

    欧西里斯的天秤阅读 596

    头像
    CSS团队协作规范

    寒青赞 36阅读 3.9k

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

    夕水赞 17阅读 2.6k评论 4

    头像
    不使用 JS 纯 CSS 获取屏幕宽高

    南城FE赞 15阅读 2.1k评论 3

    头像
    前端开发工具

    寒青赞 15阅读 4.7k

    头像
    开发插件集合

    寒青赞 12阅读 3.1k

    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 12阅读 2.5k

    0 条评论
    得票最新