You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
// 3. 对所有接口增加 跨域资源共享(CORS)配置// Enable CORS for all routesapp.use((req,res,next)=>{res.header("Access-Control-Allow-Origin","*");// Allow any originres.header("Access-Control-Allow-Headers","Origin, X-Requested-With, Content-Type, Accept");// Allow these headersif(req.method==='OPTIONS'){res.header("Access-Control-Allow-Methods","POST");// Allow POST methodreturnres.sendStatus(200);}next();});// 2. 新建一个自定义计数指标webVitalsRatingCounter// https://www.npmjs.com/package/prom-client#:~:text=()%3B-,Custom%20Metrics,-All%20metric%20typesconstwebVitalsRatingCounter=newclient.Counter({name: 'webVitalsRatingCounter',help: 'counter to store web-vitals rating data',registers: [register],labelNames: ['name','rating'],});// 1. 增加一个POST方法的接口app.post('/post-web-vitals',function(req,res){console.log(`req.body=${req.body}`)constlabels=req.body.labelswebVitalsRatingCounter.inc(labels)constmessage=`Get web-vitals: labels=${JSON.stringify(labels)}`console.log(message)res.status(200).json({ message });});
分别对应我们调用 prom-client 的 new Counter API 时传入的name,labelNames字段:
constwebVitalsRatingCounter=newclient.Counter({name: 'webVitalsRatingCounter',help: 'counter to store web-vitals rating data',registers: [register],labelNames: ['name','rating'],});
上一节:《你做的前端优化都错了!《现代前端工程体验优化》前言 && 第一章 数据驱动》
3. 用户体验数据收集与可视化:基于 Prometheus 及 Grafana 的实现简介
有了获取用户体验指标数据的工具,还需要进一步大量收集、细致分析这些数据,以便了解现状、确定优化方向。
笔者推荐一套经过实践检验、开发体验较好的开源工具:Prometheus 和 Grafana。
1. Prometheus 及 Grafana 简介
Prometheus 是一款开源的数据监控解决方案,包括针对各种编程语言的数据采集SDK(例如面向 Node.js 的NPM包客户端:prom-client)、接收数据上报的后端服务器应用、基于时间序的数据库、以及基础的数据可视化前端应用,具有强大的拓展能力,可以方便快速地融合进已有的项目中,作为数据监控的中台工具。
Grafana 是一款开源的数据可视化工具,主要包括兼容 Prometheus 在内各种数据库的数据查询工具、内置各种图表模板的数据可视化前端应用,并且支持免费的私有化部署。
将 Prometheus 与 Grafana 整合进我们的项目中就能方便地实现强大的数据收集、可视化能力。
下面我们以
Node.js
为例,演示如何接入这2款工具。2. 接入演示
我们将基于:
prom-client
演示如何从本地环境收集 web-vitals 数据,并上传到 Grafana,最终创建出数据可视化图表。
首先我们注册并登录 Grafana 官方的云端应用:https://grafana.com/get/?pg=graf&plcmt=hero-btn-1 ,每个账户都有足够的免费试用额度供我们测试。
完成注册后,我们就会进入 Grafana 的看板页面,这里是我们管理数据可视化图表、接入数据源的主要工作区域。
但因为此时我们还没有接入数据,所以内容还是一片空白。接下来我们启动一个基于 prom-client 的 Node.js 服务器作为我们的数据收集应用。
首先我们从左侧侧边栏访问 Connection > Connect data 目录,搜索 node.js 即可找到官方推荐的 Node.js 应用接入基础设施:
点击进入 Node.js Infrastructure 后,接下来我们按照官方文档首先检查必要准备:
安装 Grafana Agent 应用用于收集、转发本地的Prometheus数据:
选择对应系统,输入 API key 的备注名,点击 Generate API token 生成接口令牌,随后会提示生成已完成:
Your API token has been generated below.
接下来我们要运行官方提供的命令行从而下载、安装并配置 Grafana Agent 应用,下载和安装可能需要一定时间并克服网络限制:
命令执行完成后,点击左下角的 Test agent connection 即可验证安装是否完成。
验证通过、安装完成后,就可以在本地通过Node.js应用收集并上报数据了,让我们新建一个空白 Node.js 项目:
npm init
初始化生成package.json
,并添加启动脚本:"start": "node app.js"
npm install express prom-client
app.js
,将官方的代码示例复制粘贴下来运行
npm run start
后,prom-client
就会自动开始采集一批默认的 Node.js 应用数据。最后,让我们把预置的可视化图表,添加到我们的看板中,点击下图中的安装 Install 按钮:
安装后,一套监控 Node.js 应用内存用量、CPU使用率等指标的可视化看板就被添加到我们的看板中了:
我们的目标不只是监控这些基础指标,下面让我们试试如何增加自定义指标来。
3. 增加自定义指标上报并创建可视化图表
为了将前端利用 web-vitals 收集的数据,发送到 Grafana,后端服务需要基于 prom-client 的能力,增加一批自定义指标。
让我继续在 app.js 中添加以下代码:
通过这段代码,我们:
/post-web-vitals
,用于接收前端发送来的 web-vitals 数据;webVitalsRatingCounter
,用于收到 web-vitals 数据计数、统计数据名称(name
)、评分(rating
);https://localhost:4001/post-web-vitals
接口;基于这段代码我们就可以从前端应用中通过HTTP 异步请求发送 web-vitals 数据到这个后端服务,并借助 prom-client 的自定义计数指标
webVitalsRatingCounter
将数据上报到 Grafana 供我们查询、创建可视化图表。接下来我们基于之前的《获取web-vitals数据 DEMO》: https://output.jsbin.com/bizanep 增加上报数据到 Node.js 后端的逻辑:
我们的改动主要是:
sendDataToBackend
方法,用于接受到web-vitals库的数据后发送HTTP请求到后端接口,并把name, rating
这2个字段作为请求体;onGetWebVitalsData
方法中增加sendDataToBackend(data)
方法的调用,将指标数据作为参数传入;运行这些新增改动后,我们将能在开发中工具的Network面板中看发送数据的HTTP请求,以及后端的响应信息:
有了这样一套前后端逻辑,我们的web-vitals数据就成功的发送到了 Grafana,接下来我们试着基于这些数据创建几张可视化图表。
4. 创建 Grafana 可视化图表指南
下面我们一起来试着创建一张 Grafana 的可视化图表,主要有以下几步:
1. 访问仪表盘(Dashboard)页面,点击新建仪表盘(New Dashboard)按钮
2. 点击增加可视化(Add visualization)
3. 选择(或确认)数据源
4. 输入查询语录
Grafana 中不同的数据源对应不同的查询器面板及语法,我们以前文示例的 Prometheus 数据源为例,其主要有 交互界面选择查询语句(Builder)和 直接输入查询语句文本(Code)2种模式。
推荐使用对新用户更为友好的Builder模式,可以看到包含以下各选项:
分别对应我们调用 prom-client 的
new Counter
API 时传入的name
,labelNames
字段:我们分别输入并选择
webVitalsRatingCounter
,name=FCP
,rating=good
三项后,点击刷新仪表盘(Refresh Dashboard)即可看到我们刚刚上传的数据,将对应时段有多少次
name=FCP
,rating=good
在可视化图表中展示出来:5. 调整样式、配置等细节
有了数据后,我们就可以进一步完善可视化图表的细节,常用的功能主要有:
图表类型:常用的有折线图、柱状图,纯文本;
标题和描述
提示(Tooltip)和图例(Legend):设置何时显示提示、图例的样式和内容;
度量选项(Standard Options):设置当前查询的值是什么单位,常用的有:
时间间隔:设置将多久的时间间隔内的所有数据,聚合数据为可视化图中的一个数据点。例如截图中
5m
即表示将5分钟内的数据统一计入可视化图中的一个点。例如下图中时间范围(Time Range)选择最近15分钟(Last 15 minutes),对应折线图就有3个点。覆盖配置:设置查询语句显示名称、颜色等特殊配置
以上各项配置是个人总结较为常用的配置项,可以随意尝试调整,观察效果。
6. 分别保存图表和仪表盘
先后点击:
至此,我们就创建了第一张可视化图表,后续可以在实践中逐步熟悉 Grafana 的强大功能。这只是我们的第一步,接下来我会分享实践中遇到的问题和解决方案。
5. 堆叠百分比图优点及示例说明
从 web-vitals 获得的数据中比较有统计意义的是:
'good'
),待提升('needs-improvement'
),差('poor'
)三类值,可用于对数据进行标准化处理;例如这条从
onFCP
API获取的LCP数据:笔者更推荐使用评分字段作为可视化图表的主要指标。
原因是直接使用值经常会有异常波动,经常在前端项目没有任何变更的情况下,观察到值产生了显著的变化。
使用评分作为指标,相当于对观测的值做了一次标准化处理,将一定范围内的值处理成统一的评分,有助于规避个别极端值导致的异常波动。
笔者最初基于 web-vitals 制作数据可视化图时,用的就是值字段,计算了FCP等指标的平均值,观察一段时间后发现即使前后端项目没有上线变更,各指标的平均值也会有10%以上的波动,这显然是不符合预期的,这种波动将会降低我们评估优化效果的准确性。
后来改成基于评分字段制作各评分占比变化图后,数据波动问题就不再出现了,各评分的占比平均值在长时间内都能保持不超过5%的波动。当我们主动进行一些用户优化后就能观察到更客观,更有说服力的指标变化。
下面分享一套基于模拟数据的“堆叠百分比图”示例及配置源码,各位读者可以根据需要复制后粘贴到自己的仪表盘内,并替换为真实数据,从而得到客观稳定的优化效果评估数据。
堆叠百分比图配置源码
通过创建多张针对不同指标的堆叠百分比图,我们就能对生产环境的
web-vitals
各项指标有稳定、客观、可量化的监控,从而:《前端工程体验优化》全书现已发布到掘金小册,欢迎各位朋友交流学习
The text was updated successfully, but these errors were encountered: