云舟观测:集成开源Grafana Faro构建前端页面性能监控平台
在当今互联网时代,面对纷乱繁杂的网上资源,用户的耐心和注意力是极为宝贵的资源,当用户访问一个网站或应用时,他们期望的是快速且无缝的体验,任何加载延迟或功能故障都可能导致用户流失,影响品牌体验。因此,前端页面性能监控成为了确保网页应用高效运行的重要手段。
01
前端页面性能监控
前端页面性能监控是指通过监测和分析前端网页或应用程序的加载速度、渲染效率以及用户交互响应时间等指标,以提供优化建议和改进前端体验的过程。一般会在前端页面嵌入JS,或者在前端项目中集成SDK来监测和收集数据,对收集上来的数据进行解析,分析和组织,最后进行可视化展示。这些数据主要有:
用户的访问指标:包括PV、会话、IP、访问页面等;
页面性能指标:包括LCP(Largest Contentful Paint, 最大内容绘制时间),FID(First Input Delay, 用户首次与网页互动时的延迟时间),CLS(Cumulative Layout Shift, 计算网页载入时的内容是否会因动态加载而页面移动,0表示没有变化)等。
页面错误:包括页面错误率,错误类型,错误详细信息等;
02
监控平台
Grafana Faro Web SDK 是一个高度可配置的开源 JavaScript代理,可以轻松嵌入到 Web 应用程序中来收集真实用户监控 (RUM) 数据:性能指标、日志、异常、事件和追踪。
如图所示,在前端项目中集成Grafana Faro提供的SDK,配置云舟观测的网关地址以及应用名称,就可以将前端的指标、日志、事件、异常数据上报,在云舟观测网关内部经过解析和组织后进行存储,同时提供可视化页面进行展示。
收集到的事件(event)数据:
http_client_ip - 发起HTTP请求的客户端IP地址,用于标识请求来源。
http_origin - HTTP请求的来源域名,有助于理解跨域请求的情况。
http_referer - HTTP请求头中的Referer字段,显示了请求是从哪个页面链接过来的。
sdk_version - 使用的软件开发工具包(SDK)版本号。
app_name - 应用程序的名称。
app_version - 应用程序的版本号。
view_name - 当前视图或页面的名称。
browser_name - 用户使用的浏览器名称。
browser_version - 浏览器的版本号。
browser_os - 运行浏览器的操作系统。
browser_useragent - 用户代理字符串,包含了浏览器、操作系统及其他设备信息。
browser_mobile - 标记该请求是否来自移动设备。
page_url - 请求页面的完整URL地址。
session_id - 用户会话的唯一标识符。
session_previous - 指上一次会话的信息或ID。
timestamp - 事件发生的时间戳。
event_name - 发生的事件名称。
event_domain - 事件所属的领域或范围。
event_data_name - 事件数据的名称或标识符。
event_data_duration - 事件的持续时间。
event_data_tcphandshaketime - TCP握手所花费的时间。
event_data_dnslookuptime - DNS查找所花费的时间。
event_data_tlsnegotiationtime - TLS/SSL协商所花费的时间。
event_data_responsestatus - HTTP响应的状态码。
event_data_redirecttime - 重定向过程所花费的时间。
event_data_requesttime - 发送请求所花费的时间。
event_data_responsetime - 接收到响应所花费的时间。
event_data_fetchtime - 完成整个获取操作所花费的时间。
event_data_serviceworkertime - Service Worker处理请求所花费的时间。
event_data_decodedbodysize - 解码后的body大小。
event_data_encodedbodysize - 编码后的body大小。
event_data_cachehitstatus - 缓存命中状态,指示是否从缓存中获取了资源。
event_data_renderblockingstatus - 渲染阻塞状态,描述了哪些资源可能阻止了页面渲染。
event_data_protocol - 使用的协议,如HTTP/1.1或HTTP/2。
event_data_initiatortype - 初始化请求的类型,如script、image等。
event_data_visibilitystate - 页面的可见性状态,如visible、hidden或prerender。
event_data_fromview - 事件发生的初始视图。
event_data_toview - 事件发生的最终视图。
event_data_type - 事件的类型,如navigation、reload等。
event_data_ttfb - 时间到第一个字节(Time To First Byte),即服务器开始响应的时间。
event_data_onloadtime - onload事件触发的时间。
event_data_pageloadtime - 页面加载完成的时间。
event_data_documentparsingtime - 解析文档所花费的时间。
event_data_domprocessingtime - DOM处理所花费的时间。
event_data_domcontentloadhandler - DOMContentLoaded事件处理所花费的时间。
收集到的指标(measurement)数据:
timestamp - 发生的时间戳。
lcp - (Largest Contentful Paint) 最大内容绘制时间
fid - (First Input Delay) 首次输入延迟
ttfb - (Time To First Byte) 从浏览器发送请求到接收到第一个字节的响应之间的时间
fcp - (First Contentful Paint) 首次内容绘制时间
cls - (Cumulative Layout Shift) 累计布局偏移
收集到的日志(log)数据:
timestamp - 发生的时间戳。
level - 日志级别
message - 具体日志
收集到的异常(exception)数据:
timestamp - 发生的时间戳。
type - 异常类型
value - 具体异常信息
03
可视化分析
页面访问:展示当前应用在所选时间范围内的PV、会话数、IP数、浏览器分布、操作系统分布,以及访问量Top10的页面,帮助用户了解当前网站的流量及核心页面分布。
页面性能:展示页面性能的5个核心指标平均值以及p75时间趋势值,帮助用户了解当前网站的整体性能。
页面错误:展示页面错误的统计数据,包括错误数量,Top10的错误信息,发生错误的页面分布以及浏览器分布,帮助用户快速定位页面资源错误。
04
展望
前端页面性能监控作为RUM(真实用户体验)的一部分,是云舟观测产品全景拼图的一部分,后续将在页面加载、资源加载、用户行为、Ajax请求、链路监控方面持续进行迭代优化,并且和链路追踪(服务端性能监控)打通,提供端到端的性能监控和诊断服务。
关于云舟观测
云舟观测是由360智汇云推出的一款一站式数据采集与监控观测产品,可以对基础设施、应用性能,以及云原生下业务指标和日志进行全面的监控和观测,构建全链路的可观测性服务,帮助用户及时发现和解决系统及应用性能问题,提高系统的稳定性和可靠性。
更多技术和产品文章,请关注👆360智汇云是以"汇聚数据价值,助力智能未来"为目标的企业应用开放服务平台,融合360丰富的产品、技术力量,为客户提供平台服务。
目前,智汇云提供数据库、中间件、存储、大数据、人工智能、计算、网络、视联物联与通信等多种产品服务以及一站式解决方案,助力客户降本增效,累计服务业务1000+。
智汇云致力于为各行各业的业务及应用提供强有力的产品、技术服务,帮助企业和业务实现更大的商业价值。
官网:https://zyun.360.cn
客服电话:4000052360
相关文章:

云舟观测:集成开源Grafana Faro构建前端页面性能监控平台
在当今互联网时代,面对纷乱繁杂的网上资源,用户的耐心和注意力是极为宝贵的资源,当用户访问一个网站或应用时,他们期望的是快速且无缝的体验,任何加载延迟或功能故障都可能导致用户流失,影响品牌体验。因此…...

c# 子类继承父类接口问题
在C#中,子类并不直接“继承”父类继承的接口,但子类的确会继承父类对接口的实现(如果父类实现了该接口)。这里有一些关键的概念需要澄清: 接口继承:当一个类实现了某个接口时,它必须实现接口中…...
Vue 中自定义指令的探索与实践
文章目录 一、Vue 自定义指令简介二、基本语法三、指令的值四、封装v-loading指令五、总结 在 Vue 开发中,自定义指令为我们提供了一种强大的方式来操作 DOM 元素,实现特定的交互效果和功能增强。本文将深入探讨 Vue 中自定义指令的基本语法、指令的值的…...
Vue3通过$emit实现子向父传递数据
引言 子组件通过$emit触发事件,并传递数据,父组件在使用子组件时就可以绑定子组件事件,在事件处理函数中拿到子组件传来的数据 子组件传递数据 函数声明:$emit(事件名, 传递的数据 . . .) 子组件传递的数据会依次传递给父组件的…...

代码随想录算法训练营第十四天|递归 226.翻转二叉树 101. 对称二叉树 104.二叉树的最大深度 111.二叉树的最小深度
226.翻转二叉树 翻转一棵二叉树。 思路: 在这里需要注意的是,在递归的时候唯独中序遍历是不可用的,这是因为先对左子树进行了反转,又对自身进行了反转,对自身反转后原本的左子树变成了右子树,如果此时又轮…...
Spark 任务与 Spark Streaming 任务的差异详解
Spark 任务与 Spark Streaming 任务的主要差异源自于两者的应用场景不同:Spark 主要处理静态的大数据集,而 Spark Streaming 处理的是实时流数据。这些差异体现在任务的调度、执行、容错、数据处理模式等方面。 接下来,我们将从底层原理和源…...
Git提示信息 Pulling is not possible because you have unmerged files.
git [fatal] hint: Pulling is not possible because you have unmerged files.hint: Fix them up in the … error: Pulling is not possible because you have unmerged files. 错误:无法提取,因为您有未合并的文件。 hint: Fix them up in the work tree, and t…...

python编程开发“人机猜拳”游戏
👨💻个人主页:开发者-曼亿点 👨💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 👨💻 本文由 曼亿点 原创 👨💻 收录于专栏:…...

丹摩智算平台部署 Llama 3.1:实践与体验
文章目录 前言部署前的准备创建实例 部署与配置 Llama 3.1使用心得总结 前言 在最近的开发工作中,我有机会体验了丹摩智算平台,部署并使用了 Llama 3.1 模型。在人工智能和大模型领域,Meta 推出的 Llama 3.1 已经成为了目前最受瞩目的开源模…...

SpringCloud 2023各依赖版本选择、核心功能与组件、创建项目(注意事项、依赖)
目录 1. 各依赖版本选择2. 核心功能与组件3. 创建项目3.1 注意事项3.2 依赖 1. 各依赖版本选择 SpringCloud: 2023.0.1SpringBoot: 3.2.4。参考Spring Cloud Train Reference Documentation选择版本 SpringCloud Alibaba: 2023.0.1.0*: 参考Spring Cloud Alibaba选择版本。同时…...

串行化执行、并行化执行
文章目录 1、串行化执行2、并行化测试(多线程环境)3、任务的执行是异步的,但主程序的继续执行是同步的 可以将多个任务编排为并行和串行化执行。 也可以处理编排的多个任务的异常,也可以返回兜底数据。 1、串行化执行 顺序执行、…...
二叉搜索树(c++版)
前言 在前面我们介绍过二叉树这个数据结构,今天我们更进一步来介绍二叉树的一种在实现中运用的场景——二叉搜索树。二叉搜索树顾名思义其在“搜索”这个场景下有不俗的表现,之所以会这样是因为它在二叉树的基础上添加了一些属性。下面我们就来简单的介…...

每日1题-7
...
简单实现log记录保存到文本和数据库
简单保存记录到txt,sqlite数据库,以及console监控记录 using System; using System.Collections.Generic; using System.ComponentModel; using System.Text; using System.Data.SQLite; using System.IO;namespace NlogFrame {public enum LogType{Tr…...

敏感字段加密 - 华为OD统一考试(E卷)
2024华为OD机试(E卷+D卷+C卷)最新题库【超值优惠】Java/Python/C++合集 题目描述 【敏感字段加密】给定一个由多个命令字组成的命令字符串: 1、字符串长度小于等于127字节,只包含大小写字母,数字,下划线和偶数个双引号; 2、命令字之间以一个或多个下划线 进行分割; 3、可…...
go 安装三方库
go版本 go versiongo version go1.23.1 darwin/arm64安装 redis 库 cd $GOPATH说明: 这里可以改 GOPATH的值 将如下 export 语句写入 ~/.bash_profile 文件中 export GOPATH/Users/goproject然后使其生效 source ~/.bash_profile初始化生成 go.mod 文件 go mod…...
Java 中的 volatile和synchronized和 ReentrantLock区别讲解和案例示范
在 Java 的并发编程中,volatile、synchronized 和 ReentrantLock 是三种常用的同步机制。每种机制都有其独特的特性、优缺点和适用场景。理解它们之间的区别以及在何种情况下使用哪种机制,对提高程序的性能和可靠性至关重要。本文将详细探讨这三种机制的…...
从GDAL中 读取遥感影像的信息
从GDAL提供的实用程序来看,很多程序的后缀都是 .py ,这充分地说明了Python语言在GDAL的开发中得到了广泛的应用。 1. 打开已有的GeoTIF文件 下面我们试着读取一个GeoTiff文件的信息。第一步就是打开一个数据集。 >>> from osgeo import gdal…...

算法闭关修炼百题计划(一)
多看优秀的代码一定没有错,此篇博客属于个人学习记录 1.两数之和2.前k个高频元素3.只出现一次的数字4.数组的度5.最佳观光组合6.整数反转7.缺失的第一个正数8.字符串中最多数目的子序列9.k个一组翻转链表10.反转链表II11. 公司命名12.合并区间13.快速排序14.数字中的…...

vue3实现打字机的效果,可以换行
之前看了很多文章,效果是实现了,就是没有自动换行的效果,参考了文章写了一个,先上个效果图,卡顿是因为模仿了卡顿的效果,还是很丝滑的 目录 效果图:代码如下 效果图: 
2021-03-15 iview一些问题
1.iview 在使用tree组件时,发现没有set类的方法,只有get,那么要改变tree值,只能遍历treeData,递归修改treeData的checked,发现无法更改,原因在于check模式下,子元素的勾选状态跟父节…...
Java 加密常用的各种算法及其选择
在数字化时代,数据安全至关重要,Java 作为广泛应用的编程语言,提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景,有助于开发者在不同的业务需求中做出正确的选择。 一、对称加密算法…...

QT: `long long` 类型转换为 `QString` 2025.6.5
在 Qt 中,将 long long 类型转换为 QString 可以通过以下两种常用方法实现: 方法 1:使用 QString::number() 直接调用 QString 的静态方法 number(),将数值转换为字符串: long long value 1234567890123456789LL; …...

DingDing机器人群消息推送
文章目录 1 新建机器人2 API文档说明3 代码编写 1 新建机器人 点击群设置 下滑到群管理的机器人,点击进入 添加机器人 选择自定义Webhook服务 点击添加 设置安全设置,详见说明文档 成功后,记录Webhook 2 API文档说明 点击设置说明 查看自…...

计算机基础知识解析:从应用到架构的全面拆解
目录 前言 1、 计算机的应用领域:无处不在的数字助手 2、 计算机的进化史:从算盘到量子计算 3、计算机的分类:不止 “台式机和笔记本” 4、计算机的组件:硬件与软件的协同 4.1 硬件:五大核心部件 4.2 软件&#…...

【Linux手册】探秘系统世界:从用户交互到硬件底层的全链路工作之旅
目录 前言 操作系统与驱动程序 是什么,为什么 怎么做 system call 用户操作接口 总结 前言 日常生活中,我们在使用电子设备时,我们所输入执行的每一条指令最终大多都会作用到硬件上,比如下载一款软件最终会下载到硬盘上&am…...

保姆级【快数学会Android端“动画“】+ 实现补间动画和逐帧动画!!!
目录 补间动画 1.创建资源文件夹 2.设置文件夹类型 3.创建.xml文件 4.样式设计 5.动画设置 6.动画的实现 内容拓展 7.在原基础上继续添加.xml文件 8.xml代码编写 (1)rotate_anim (2)scale_anim (3)translate_anim 9.MainActivity.java代码汇总 10.效果展示 逐帧…...
用神经网络读懂你的“心情”:揭秘情绪识别系统背后的AI魔法
用神经网络读懂你的“心情”:揭秘情绪识别系统背后的AI魔法 大家好,我是Echo_Wish。最近刷短视频、看直播,有没有发现,越来越多的应用都开始“懂你”了——它们能感知你的情绪,推荐更合适的内容,甚至帮客服识别用户情绪,提升服务体验。这背后,神经网络在悄悄发力,撑起…...

基于谷歌ADK的 智能产品推荐系统(2): 模块功能详解
在我的上一篇博客:基于谷歌ADK的 智能产品推荐系统(1): 功能简介-CSDN博客 中我们介绍了个性化购物 Agent 项目,该项目展示了一个强大的框架,旨在模拟和实现在线购物环境中的智能导购。它不仅仅是一个简单的聊天机器人,更是一个集…...