往期文章（包含部分掘金上榜文章）
《谷歌教你如何说服老板为用户体验掏钱(1)- 电商品牌的最佳实践》
正文
上个月玩了两张前端数据的监控展示图如下
能直接看到一周会话统计，环比； 一周uv统计环比及趋势； 一周LCP趋势及环比； 一周报错趋势及环比； 一周卡顿汇总及趋势； 配置文件如下
{
"dashboardBindSet": [],
"dashboardExtend": {},
"dashboardMapping": [],
"dashboardOwnerType": "node",
"dashboardType": "CUSTOM",
"iconSet": {},
"main": {
"charts": [
{
"extend": {
"fixedTime": {
"key": "7d",
"text": "最近7天"
},
"settings": {
"bgColor": "#E8EDCC",
"colors": [],
"compareTitle": "环比",
"compareType": "circleCompare",
"currentChartType": "singlestat",
"downsample": "last",
"fixedTime": "7d",
"fontColor": "#2D8CF0",
"isTimeInterval": false,
"levels": [],
"lineColor": "#3AB8FF",
"mappings": [],
"openCompare": true,
"precision": "2",
"showFieldMapping": false,
"showLine": true,
"showLineAxis": false,
"showTitle": true,
"timeInterval": "default",
"titleDesc": "",
"units": []
}
},
"group": {
"name": null
},
"name": "一周会话统计",
"pos": {
"h": 12,
"w": 13,
"x": 0,
"y": 0
},
"queries": [
{
"color": "",
"datasource": "dataflux",
"name": "",
"qtype": "dql",
"query": {
"alias": "",
"code": "A",
"dataSource": "session",
"field": "*",
"fieldFunc": "count",
"fieldType": "",
"fill": "",
"filters": [],
"funcList": [],
"groupBy": [
"userid"
],
"groupByTime": "",
"namespace": "rum",
"q": "R::`session`:(COUNT(`*`)) BY `userid`",
"queryFuncs": [],
"search": "",
"type": "simple"
},
"type": "singlestat",
"unit": ""
}
],
"type": "singlestat"
},
{
"extend": {
"fixedTime": {
"key": "7d",
"text": "最近7天"
},
"settings": {
"bgColor": "#EEEBDE",
"colors": [],
"compareTitle": "环比",
"compareType": "circleCompare",
"currentChartType": "singlestat",
"downsample": "last",
"fixedTime": "7d",
"fontColor": "#CD8282",
"isTimeInterval": false,
"levels": [],
"lineColor": "#3AB8FF",
"mappings": [],
"openCompare": true,
"precision": "2",
"showFieldMapping": false,
"showLine": true,
"showLineAxis": false,
"showTitle": true,
"timeInterval": "default",
"titleDesc": "",
"units": []
}
},
"group": {
"name": null
},
"name": "一周UV统计及趋势",
"pos": {
"h": 12,
"w": 11,
"x": 13,
"y": 0
},
"queries": [
{
"color": "",
"datasource": "dataflux",
"name": "",
"qtype": "dql",
"query": {
"alias": "UV",
"code": "A",
"dataSource": "view",
"field": "userid",
"fieldFunc": "count",
"fieldType": "keyword",
"fill": null,
"fillNum": null,
"filters": [],
"funcList": [],
"groupBy": [],
"groupByTime": "",
"namespace": "rum",
"q": "R::`view`:(COUNT(`userid`) AS `UV`)",
"queryFuncs": [],
"type": "simple",
"withLabels": []
},
"type": "singlestat",
"unit": ""
}
],
"type": "singlestat"
},
{
"extend": {
"fixedTime": {
"key": "7d",
"text": "最近7天"
},
"settings": {
"bgColor": "#FFFFFF",
"colors": [],
"compareTitle": "环比",
"compareType": "circleCompare",
"currentChartType": "singlestat",
"downsample": "last",
"fixedTime": "7d",
"fontColor": "#F40F57",
"isTimeInterval": false,
"levels": [],
"lineColor": "#E81457",
"mappings": [],
"openCompare": true,
"precision": "2",
"showFieldMapping": false,
"showLine": true,
"showLineAxis": false,
"showTitle": true,
"timeInterval": "default",
"titleDesc": "",
"units": []
}
},
"group": {
"name": null
},
"name": "一周报错统计及趋势",
"pos": {
"h": 10,
"w": 13,
"x": 0,
"y": 23
},
"queries": [
{
"color": "",
"datasource": "dataflux",
"name": "",
"qtype": "dql",
"query": {
"alias": "",
"code": "A",
"dataSource": "error",
"field": "error_handling",
"fieldFunc": "count",
"fieldType": "keyword",
"fill": "",
"filters": [],
"funcList": [],
"groupBy": [],
"groupByTime": "",
"namespace": "rum",
"q": "R::`error`:(COUNT(`error_handling`))",
"queryFuncs": [],
"search": "",
"type": "simple"
},
"type": "singlestat",
"unit": ""
}
],
"type": "singlestat"
},
{
"extend": {
"fixedTime": {
"key": "7d",
"text": "最近7天"
},
"settings": {
"bgColor": "",
"colors": [],
"compareTitle": "环比",
"compareType": "circleCompare",
"currentChartType": "singlestat",
"downsample": "last",
"fixedTime": "7d",
"fontColor": "#A6A0A0",
"isTimeInterval": false,
"levels": [],
"lineColor": "#8B8585",
"mappings": [],
"openCompare": true,
"precision": "2",
"showFieldMapping": false,
"showLine": true,
"showLineAxis": false,
"showTitle": true,
"timeInterval": "default",
"titleDesc": "",
"units": []
}
},
"group": {
"name": null
},
"name": "一周卡顿汇总及趋势",
"pos": {
"h": 10,
"w": 13,
"x": 0,
"y": 33
},
"queries": [
{
"color": "",
"datasource": "dataflux",
"name": "",
"qtype": "dql",
"query": {
"alias": "",
"code": "A",
"dataSource": "long_task",
"field": "*",
"fieldFunc": "count",
"fieldType": "",
"fill": "",
"filters": [],
"funcList": [],
"groupBy": [],
"groupByTime": "",
"namespace": "rum",
"q": "R::`long_task`:(COUNT(`*`))",
"queryFuncs": [],
"search": "",
"type": "simple"
},
"type": "singlestat",
"unit": ""
}
],
"type": "singlestat"
},
{
"extend": {
"fixedTime": {
"key": "7d",
"text": "最近7天"
},
"links": [
{
"alias": "跳转到 [性能分析]",
"open": "curWin",
"type": "custom",
"url": "/rum/detail/#{V.appid}?time=#{TR}&tabKey=性能分析&variable={\"appid\":\"#{V.appid}\",\"env\":\"#{V.env}\",\"version\":\"#{V.version}\",\"view_loading_type\":\"re(`.*`)\",\"view_path_group\":\"re(`.*`)\",\"browser\":\"re(`.*`)\",\"country\":\"re(`.*`)\"}"
}
],
"settings": {
"chartType": "areaLine",
"colors": [],
"compareTitle": "环比",
"compareType": "circleCompare",
"currentChartType": "sequence",
"density": "lower",
"fixedTime": "7d",
"isPercent": false,
"isTimeInterval": true,
"levels": [
{
"bgColor": "#F10D31",
"title": "页面基线",
"value": 2000000000
}
],
"openCompare": true,
"openStack": false,
"showFieldMapping": true,
"showLine": false,
"showTitle": true,
"stackType": "time",
"tableSortMetricName": "P75(LCP)",
"timeInterval": "default",
"titleDesc": "页面渲染",
"units": [
{
"key": "last(first_contentful_paint)",
"name": "last(first_contentful_paint)",
"unit": "",
"units": [
"time",
"ns"
]
}
],
"xAxisShowType": "time"
}
},
"group": {
"name": null
},
"name": "一周LCP趋势统计及环比",
"pos": {
"h": 11,
"w": 13,
"x": 0,
"y": 12
},
"queries": [
{
"color": "",
"datasource": "dataflux",
"disabled": false,
"name": "",
"qtype": "dql",
"query": {
"alias": "",
"code": "A",
"dataSource": "view",
"field": "first_contentful_paint",
"fieldFunc": "last",
"fieldType": "float",
"fill": null,
"fillNum": null,
"filters": [],
"funcList": [],
"groupBy": [
"app_id"
],
"groupByTime": "",
"namespace": "rum",
"q": "R::`view`:(LAST(`first_contentful_paint`)) BY `app_id`",
"queryFuncs": [],
"type": "simple",
"withLabels": []
},
"type": "sequence",
"unit": ""
}
],
"type": "sequence"
},
{
"extend": {
"fixedGroupByTime": null,
"fixedTime": {
"key": "7d",
"text": "最近 7 天"
},
"isRefresh": false,
"settings": {
"alias": [],
"chartType": "line",
"colors": [],
"compareTitle": "",
"compareType": "",
"currentChartType": "sequence",
"density": "medium",
"fixedTime": "7d",
"isPercent": false,
"isTimeInterval": true,
"legendPostion": "none",
"legendValues": "",
"levels": [],
"openCompare": false,
"openStack": false,
"showFieldMapping": false,
"showLine": false,
"showTitle": true,
"stackType": "time",
"timeInterval": "default",
"titleDesc": "",
"units": [],
"xAxisShowType": "time"
}
},
"group": {
"name": null
},
"name": "应用点击趋势图",
"pos": {
"h": 10,
"w": 13,
"x": 0,
"y": 43
},
"queries": [
{
"color": "",
"datasource": "dataflux",
"name": "",
"qtype": "dql",
"query": {
"alias": "",
"code": "A",
"dataSource": "action",
"field": "*",
"fieldFunc": "count",
"fieldType": "",
"fill": "",
"filters": [],
"funcList": [],
"groupBy": [
"action_name",
"app_id"
],
"groupByTime": "",
"namespace": "rum",
"q": "R::`action`:(COUNT(`*`)) BY `action_name`, `app_id`",
"queryFuncs": [],
"search": "",
"type": "simple"
},
"type": "sequence",
"unit": ""
}
],
"type": "sequence"
},
{
"extend": {
"fixedTime": {
"key": "30d",
"text": "最近 30 天"
},
"settings": {
"alias": [],
"bar": {
"direction": "horizontal",
"xAxisShowType": "groupBy"
},
"chartType": "bar",
"color": "#498BFE",
"colors": [
{
"color": "#498BFE",
"key": "last(resource_size){\"resource_url\": \"https://mcs.volceapplog.com/list\"}",
"name": "last(resource_size){\"resource_url\": \"https://mcs.volceapplog.com/list\"}"
}
],
"compareTitle": "",
"compareType": "",
"fixedTime": "30d",
"isTimeInterval": false,
"levels": [],
"openCompare": false,
"showFieldMapping": false,
"showTableHead": true,
"showTitle": true,
"showTopSize": true,
"table": {
"queryMode": "toGroupColumn"
},
"tableSortMetricName": "",
"tableSortType": "top",
"timeInterval": "default",
"titleDesc": "",
"topSize": 10,
"units": []
}
},
"group": {
"name": null
},
"name": "资源加载排行榜",
"pos": {
"h": 21,
"w": 11,
"x": 13,
"y": 12
},
"queries": [
{
"color": "",
"datasource": "dataflux",
"name": "",
"qtype": "dql",
"query": {
"code": "A",
"dataSource": "resource",
"field": "resource_size",
"fieldFunc": "last",
"fill": null,
"fillNum": null,
"filters": [],
"funcList": [
"last",
"top:10"
],
"groupBy": [
"resource_url"
],
"groupByTime": "",
"namespace": "rum",
"q": "R::`resource`:(LAST(`resource_size`)) BY `resource_url`",
"queryFuncs": [],
"type": "dql",
"withLabels": []
},
"type": "toplist",
"unit": ""
}
],
"type": "toplist"
},
{
"extend": {
"fixedTime": {
"key": "7d",
"text": "最近 7 天"
},
"settings": {
"alias": [],
"bar": {
"direction": "horizontal",
"xAxisShowType": "groupBy"
},
"chartType": "bar",
"color": "#498BFE",
"colors": [
{
"color": "#498BFE",
"key": "count(action_long_task_count){\"action_name\": \"红潭酱酒 1 瓶\", \"action_type\": \"click\", \"view_url\": \"https://sts.test.tanjiu.cn/portal/stock/stockDetail?tabName=%E8%BF%9B%E8%B4%A7\"}",
"name": "count(action_long_task_count){\"action_name\": \"红潭酱酒 1 瓶\", \"action_type\": \"click\", \"view_url\": \"https://sts.test.tanjiu.cn/portal/stock/stockDetail?tabName=%E8%BF%9B%E8%B4%A7\"}"
}
],
"compareTitle": "",
"compareType": "",
"fixedTime": "7d",
"isTimeInterval": false,
"levels": [],
"openCompare": false,
"showFieldMapping": false,
"showTableHead": true,
"showTitle": true,
"showTopSize": true,
"table": {
"queryMode": "toGroupColumn"
},
"tableSortMetricName": "",
"tableSortType": "top",
"timeInterval": "default",
"titleDesc": "",
"topSize": 10,
"units": []
}
},
"group": {
"name": null
},
"name": "页面动作和长耗时排行榜",
"pos": {
"h": 19,
"w": 11,
"x": 13,
"y": 33
},
"queries": [
{
"color": "",
"datasource": "dataflux",
"name": "",
"qtype": "dql",
"query": {
"alias": "",
"code": "A",
"dataSource": "action",
"field": "action_long_task_count",
"fieldFunc": "count",
"fieldType": "float",
"fill": null,
"fillNum": null,
"filters": [],
"funcList": [
"last",
"top:10"
],
"groupBy": [
"action_name",
"view_url",
"action_type"
],
"groupByTime": "",
"namespace": "rum",
"q": "R::`action`:(COUNT(`action_long_task_count`)) BY `action_name`, `view_url`, `action_type`",
"queryFuncs": [],
"type": "simple",
"withLabels": []
},
"type": "toplist",
"unit": ""
}
],
"type": "toplist"
}
],
"groups": [],
"type": "template",
"vars": []
},
"summary": "",
"tagInfo": [],
"tags": [],
"thumbnail": "",
"title": "前端监控周报"
}
