网站监控系统最佳实践之静态资源采样上报

作者 观测云 产品服务部门 深圳团队 朱端畅

背景说明

通过 RUM 采集前端数据时，若采集的数据过多，可能会导致占用过多的网络带宽以及其他资源。特别是刚进入首页加载数据时，可能会调用几十次甚至更多次 v1/write/rum?precision=ms数据采集接口。在这种情况下，一种优化思路是对前端资源采集进行筛选和过滤。

采集数据分类及过滤

数据分类

「观测云控制台」-「用户访问监测」-「查看器」，可以展示以下几种采集数据的分类：

查看器类型	概述
Session（会话）	查看用户访问的一系列详情，包括用户访问时间、访问页面路径、访问操作数、访问路径和出现的错误信息等。
View（页面）	查看用户访问环境、回溯用户的操作路径、分解用户操作的响应时间以及了解用户操作导致后端应用一系列调用链的性能指标情况。
Resource（资源）	查看网页上加载的各种资源信息，包括状态码、请求方式、资源地址，加载耗时等。
Action（操作）	查看用户在使用应用期间的操作交互，包括操作类型，页面操作详情，操作耗时等。
Long Task（长任务）	查看用户在使用应用期间，阻塞主线程超过 50ms 的长任务，包括页面地址、任务耗时等。
Error（错误）	查看用户在使用应用期间，浏览器发出的前端错误，包括错误类型、错误内容等。

数据过滤思路

如上大部分数据对于用户访问、性能分析都是非常有帮助的，比如 View 页面资源、Session 会话重放、Error 帮助分析前端错误等。因此，不建议过滤这些数据。

Resource（资源）包含的种类也非常多，其中一部分数据为静态资源数据，大致可以分为：

资源名称	描述
HTML（超文本标记语言）	HTML是网页的基础构建块，用于定义网页的结构和内容。
CSS（层叠样式表）	CSS用于定义网页的样式和布局，包括颜色、字体、布局等。
JavaScript（JS）	JavaScript是一种脚本语言，用于在网页中实现交互和动态功能，例如表单验证、页面操作等。
图像（Images）	图像文件，如JPEG、PNG、GIF等格式的图片，用于在网页中显示静态或动态图像。
字体（Fonts）	用于定义网页文本样式的字体文件，如TrueType（TTF）和可缩放矢量图形（SVG）字体。
样式表（Stylesheets）	除了CSS外，还包括其他类型的样式表，如Sass、Less等预处理器生成的样式表。
多媒体（Media）	音频和视频文件，如MP3、MP4等格式的音频和视频，用于在网页中嵌入音频和视频内容。
数据文件（Data Files）	用于存储网页或应用程序需要的数据的文件，如JSON、XML、CSV等格式的数据文件。
AJAX 请求（XHR/Fetch）	使用XMLHttpRequest或Fetch API发送的异步请求，用于从服务器获取数据或与后端进行交互。
矢量图形（Vector Graphics）	矢量图形文件，如SVG（可缩放矢量图形）格式的图形，用于在网页中显示可伸缩的矢量图形。
框架（Frameworks）	前端框架或库的文件，如React、Vue、Angular等的源代码文件。

通过「观测云控制台」-「用户访问监测」-「查看器」-「Resource」的可视化面板，也会展示这些不同的资源类型：

在 Resource（资源）中， xhr/fetch 的数据属于 Http 请求后端数据，需要与 View 页面及 APM 做关联，因此，不建议过滤这部分数据。而其他的资源数据，如 js、image、css、font 数据重要性相对较低，可以随机过滤。

配置方式

前置条件

• 安装 DataKit
• 开启 RUM 采集

数据过滤方式

在前端开发中，beforeSend 函数通常用于处理在发送网络请求之前的预处理逻辑。它是用于在请求发送之前进行一些操作的回调函数。

• event：表示正在发送的请求对象（如 XHR 对象或 AJAX 对象），可以用于操作请求的相关属性或执行相关操作。
• domainContext：表示请求的上下文环境，可能包含一些与请求相关的上下文信息。

下面以 NPM 接入 web 应用 SDK 为例，展示在 datafluxRum.init 中加入 beforeSend 方法，过滤掉 Resource（资源）中除了 xhr/fetch 的其他所有数据。

php

复制代码

import { datafluxRum } from '@cloudcare/browser-rum'; datafluxRum.init({ applicationId: 'ruoyi_web', datakitOrigin: '', // 协议（包括：//），域名（或IP地址）[和端口号] env: 'production', version: '1.0.0', service: 'browser', sessionSampleRate: 100, sessionReplaySampleRate: 70, trackInteractions: true, traceType: 'ddtrace', // 非必填，默认为ddtrace，目前支持 ddtrace、zipkin、skywalking_v3、jaeger、zipkin_single_header、w3c_traceparent 6种类型 allowedTracingOrigins: ['https://api.example.com',/https://.*.my-api-domain.com/], // 非必填，允许注入trace采集器所需header头部的所有请求列表。可以是请求的origin，也可以是是正则 //新增beforeSend函数过滤相应的资源数据 beforeSend: function (event, domainContext) { if (event && event.type === 'resource') { if ( event.resource && ['xhr', 'fetch'].indexOf(event.resource.type) > -1 ) { return true } return false } return true } })

如果需要在此基础上再随机采样，可以使用 Math.random()（该方法的取值范围为 0-1）方式随机过滤。如下展示的是随机采集 10% 的数据：

csharp

复制代码

beforeSend: function (event, domainContext) { if (event && event.type === 'resource') { if ( event.resource && ['xhr', 'fetch'].indexOf(event.resource.type) > -1 ) { return true } if(Math.random()<0.1){ return true } return false } return true }

效果展示

过滤掉一些静态资源之后，数据采集接口请求只有两个，效果如下图所示，十分明显。