跳转至

Web 应用接入


观测云应用监测能够通过收集各个 Web 应用的指标数据,以可视化的方式分析各个 Web 应用端的性能。

前置条件

注意:若您开通了 RUM Headless 服务,前置条件已自动帮您配置完成,直接接入应用即可。

应用接入

登录观测云控制台,进入用户访问监测页面,点击左上角 新建应用,即可开始创建一个新的应用。

  • 观测云提供公网 DataWay直接接收 RUM 数据,无需安装 DataKit 采集器。配置 siteclientToken 参数即可。支持在控制台中直接上传 SourceMap,可以基于不同的版本和环境上传多个文件。

  • 观测云同时支持本地环境部署接收 RUM 数据,该方式需满足前置条件。

Web 应用接入的有三种方式:NPM 接入、同步载入和异步载入。

接入方式 简介
NPM 通过把 SDK 代码一起打包到前端项目中,此方式可以确保对前端页面的性能不会有任何影响,不过可能会错过 SDK 初始化之前的的请求、错误的收集。
CDN 异步加载 通过 CDN 加速缓存,以异步脚本引入的方式,引入 SDK 脚本,此方式可以确保 SDK 脚本的下载不会影响页面的加载性能,不过可能会错过 SDK 初始化之前的的请求、错误的收集。
CDN 同步加载 通过 CDN 加速缓存,以同步脚本引入的方式,引入 SDK 脚本,此方式可以确保能够收集到所有的错误,资源,请求,性能指标。不过可能会影响页面的加载性能。
import { datafluxRum } from '@cloudcare/browser-rum'

datafluxRum.init({
  applicationId: 'guance',
  datakitOrigin: '<DataKit的域名或IP>', // DK方式接入时需要配置
  clientToken: 'clientToken', // 公网 OpenWay 接入时,需要填写
  site: '公网 OpenWay 地址', // 公网 OpenWay 接入时,需要填写
  env: 'production',
  version: '1.0.0',
  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,也可以是正则
})
<script>
 (function (h, o, u, n, d) {
    h = h[d] = h[d] || {
      q: [],
      onReady: function (c) {
        h.q.push(c)
      }
    }
    d = o.createElement(u)
    d.async = 1
    d.src = n
    n = o.getElementsByTagName(u)[0]
    n.parentNode.insertBefore(d, n)
  })(
    window,
    document,
    'script',
    'https://static.guance.com/browser-sdk/v3/dataflux-rum.js',
    'DATAFLUX_RUM'
  )
  DATAFLUX_RUM.onReady(function () {
    DATAFLUX_RUM.init({
      applicationId: 'guance',
      datakitOrigin: '<DataKit的域名或IP>', // DK方式接入时需要配置
      clientToken: 'clientToken', // 公网 OpenWay 接入时,需要填写
      site: '公网 OpenWay 地址', // 公网 OpenWay 接入时,需要填写
      env: 'production',
      version: '1.0.0',
      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,也可以是正则
    })
  })
</script>
<script src="https://static.guance.com/browser-sdk/v3/dataflux-rum.js" type="text/javascript"></script>
<script>
  window.DATAFLUX_RUM &&
    window.DATAFLUX_RUM.init({
      applicationId: 'guance',
      datakitOrigin: '<DataKit的域名或IP>', // DK方式接入时需要配置
      clientToken: 'clientToken', // 公网 OpenWay 接入时,需要填写
      site: '公网 OpenWay 地址', // 公网 OpenWay 接入时,需要填写
      env: 'production',
      version: '1.0.0',
      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,也可以是正则
    })
</script>

开始配置

初始化参数

参数
类型
是否必须
默认值
描述
applicationId String 从观测云创建的应用 ID。
datakitOrigin String DataKit 数据上报 Origin 注释:
协议(包括://),域名(或IP地址)[和端口号]
例如:
https://www.datakit.com
http://100.20.34.3:8088
clientToken String 以 openway 方式上报数据令牌,从观测云控制台获取,必填(公共 openway 方式接入)。
site String 以 公共 openway 方式上报数据地址,从观测云控制台获取,必填(公共 openway 方式接入)。
env String Web 应用当前环境,如 prod:线上环境;gray:灰度环境;pre:预发布环境;common:日常环境;local:本地环境。
version String Web 应用的版本号。
service String 当前应用的服务名称,默认为 browser,支持自定义配置。
sessionSampleRate Number 100 指标数据收集百分比:
100 表示全收集;0 表示不收集。
sessionReplaySampleRate Number 100 Session Replay 数据采集百分比:
100 表示全收集;0 表示不收集。
trackSessionAcrossSubdomains Boolean false 同一个域名下面的子域名共享缓存。
usePartitionedCrossSiteSessionCookie Boolean false 是否开启分区安全跨站点会话 cookie 详情
useSecureSessionCookie Boolean false 使用安全会话 cookie。这将禁用在不安全(非 HTTPS)连接上发送的 RUM 事件
traceType Enum ddtrace 配置链路追踪工具类型,如果不配置默认为 ddtrace。目前支持 ddtracezipkinskywalking_v3jaegerzipkin_single_headerw3c_traceparent 6 种数据类型。

⚠
1. opentelemetry 支持 zipkin_single_headerw3c_traceparentzipkinjaeger 4 种类型。
2. 该配置的生效需依赖 allowedTracingOrigins 配置项。
3. 配置相应类型的 traceType 需要对相应的 API 服务。关于设置不同的 Access-Control-Allow-Headers,可参考 APM 如何关联 RUM
traceId128Bit Boolean false 是否以 128 字节的方式生成 traceID,与 traceType 对应,目前支持类型 zipkinjaeger
allowedTracingOrigins Array [] 允许注入 trace 采集器所需 header 头部的所有请求列表。可以是请求的 origin,也可以是正则,origin: 协议(包括://),域名(或IP地址)[和端口号]。_例如:
["https://api.example.com", /https:\\/\\/._\\.my-api-domain\\.com/]。*
allowedTracingUrls Array [] 与 Apm 关联请求的 Url 匹配列表。可以是请求的 url,也可以是正则,或者是 match function 例如:["https://api.example.com/xxx", /https:\/\/.*\.my-api-domain\.com\/xxx/, function(url) {if (url === 'xxx') { return false} else { return true }}] 该参数是 allowedTracingOrigins 配置的扩展,两者配置其一即可。
trackUserInteractions Boolean false 是否开启用户行为采集。
actionNameAttribute String 版本要求:>3.1.2。 为元素添加自定义属性来指定操作的名称。具体使用方式,详情参考
beforeSend Function(event, context):Boolean 版本要求:>3.1.2。 数据拦截以及数据修改,详情参考
storeContextsToLocal Boolean 版本要求:>3.1.2。是否把用户自定义数据缓存到本地 localstorage,例如: setUser, addGlobalContext api 添加的自定义数据。
storeContextsKey String 版本要求:>3.1.18。定义存储到 localstorage 的 key ,默认不填,自动生成, 该参数主要是为了区分在同一个域名下,不同子路径共用 store 的问题
compressIntakeRequests Boolean 压缩 RUM 数据请求内容,以减少发送大量数据时的带宽使用量,同时能够减少发送数据的请求数量。压缩在 WebWorker 线程中完成。关于 csp 安全策略可参考 csp 安全。SDK 版本要求>= 3.2.0。 datakit 版本要求 >=1.60。部署版要求 >= 1.96.178
workerUrl Sring sessionReplay 和 compressIntakeRequests 数据压缩都是在 webwork 线程中完成,所以默认情况下,在开启 csp 安全访问的情况下,需要允许 worker-src blob:; 该配置允许添加自行托管 worker 地址。关于 csp 安全策略可参考 csp 安全。SDK 版本要求>= 3.2.0

文档评价

文档内容是否对您有帮助? ×