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

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

背景说明

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

采集数据分类及过滤

数据分类

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

数据过滤思路

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

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

通过「观测云控制台」-「用户访问监测」-「查看器」-「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 的其他所有数据。

import { datafluxRum } from '@cloudcare/browser-rum';
datafluxRum.init({
    applicationId: 'ruoyi_web',
    datakitOrigin: '<DATAKIT ORIGIN>', // 协议（包括：//），域名（或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% 的数据：

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
}

效果展示

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