@cloudcare/browser-rum

DataFlux RUM Web 端数据指标监控（V2版本）

简介

DataFlux RUM 能够通过收集各个应用的指标数据，以可视化的方式分析各个应用端的性能

你可以从下面几种方式中选择一种接入到你的 Web 应用中

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

NPM

import { datafluxRum } from '@cloudcare/browser-rum'

datafluxRum.init({
  applicationId: '<DATAFLUX_APPLICATION_ID>',
  datakitOrigin: '<DATAKIT ORIGIN>',
  //  env: 'production',
  //  version: '1.0.0',
})

CDN 异步加载

<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.dataflux.cn/browser-sdk/v2/dataflux-rum.js',
    'DATAFLUX_RUM'
  )
  DATAFLUX_RUM.onReady(function () {
    DATAFLUX_RUM.init({
      applicationId: '<DATAFLUX_APPLICATION_ID>',
      datakitOrigin: '<DATAKIT ORIGIN>',
      //  env: 'production',
      //  version: '1.0.0',
    })
  })
</script>

CDN 同步加载

<script
  src="https://static.dataflux.cn/browser-sdk/v2/dataflux-rum.js" 
  type="text/javascript"
></script>
<script>
  window.DATAFLUX_RUM &&
    window.DATAFLUX_RUM.init({
      applicationId: '<DATAFLUX_APPLICATION_ID>',
      datakitOrigin: '<DATAKIT ORIGIN>',
      //  env: 'production',
      //  version: '1.0.0',
    })
</script>

配置

初始化参数

参数	类型	是否必须	默认值	描述
applicationId	String	是		从 dataflux 创建的应用 ID
datakitOrigin	String	是		datakit 数据上报 Origin 注释: 协议（包括：//），域名（或IP地址）[和端口号] 例如：https://www.datakit.com, http://100.20.34.3:8088
env	String	是		web 应用当前环境， 如 prod：线上环境；gray：灰度环境；pre：预发布环境 common：日常环境；local：本地环
service	String	否		web 应用对应的服务名称，可以用于关联APM 服务相关tag
version	String	是		web 应用的版本号
sessionSampleRate	Number	否	100	指标数据收集百分比: 100表示全收集，0表示不收集
trackSessionAcrossSubdomains	Boolean	否	false	同一个域名下面的子域名共享缓存
traceType $\color{#FF0000}{新增}$	Enum	否	ddtrace	与 APM 采集工具连接的请求header类型，目前兼容的类型包括：ddtrace、zipkin、skywalking_v3、jaeger、zipkin_single_header、w3c_traceparent。注： opentelemetry 支持 zipkin_single_header,w3c_traceparent,zipkin三种类型
traceId128Bit $\color{#FF0000}{新增}$	Boolean	否	false	是否以128位的方式生成 traceID，与traceType 对应，目前支持类型 zipkin、jaeger
allowedDDTracingOrigins $\color{#FF0000}{废弃}$	Array	否	[]	允许注入ddtrace 采集器所需header头部的所有请求列表。可以是请求的origin，也可以是是正则，origin: 协议（包括：//），域名（或IP地址）[和端口号] 例如：["https://api.example.com", /https:\/\/.*\.my-api-domain\.com/] 该参数 旧的配置在新版本中做了兼容， 推荐使用allowedTracingOrigins
allowedTracingOrigins $\color{#FF0000}{新增}$	Array	否	[]	允许注入 trace 采集器所需header头部的所有请求列表。可以是请求的origin，也可以是是正则，origin: 协议（包括：//），域名（或IP地址）[和端口号] 例如：["https://api.example.com", /https:\/\/.*\.my-api-domain\.com/]
tracingSampleRate	Number	否	100	链路数据收集百分比: 100表示全收集，0表示不收集
trackInteractions	Boolean	否	false	是否开启用户行为采集
isServerError	Function	否	function(request) {return false}	默认情况下，请求如果 status code>= 500 则定义为错误请求，会相应的采集为 error 指标数据。为满足部分场景可能并非是通过 status code 来判断业务请求的错误情况，提供可通过用户自定义的方式来判断请求是否为 error 请求，callback 参数为请求对应的相关返回参数： { isAborted: false, method:"get",response: "{...}",status: 200,url: "xxxx" }, 如果方法返回为true，则该请求相关数据会被采集为 error 指标， 该参数 方法返回结果必须为 Boolean 类型， 否则认为是无效参数
isIntakeUrl	Function	否	function(url) {return false}	自定义方法根据请求资源 url 判断是否需要采集对应资源数据，默认都采集。 返回：false 表示要采集，true 表示不需要采集 该参数 方法返回结果必须为 Boolean 类型， 否则认为是无效参数

问题

产生 Script error 消息的原因

在使用 DataFlux Web Rum Sdk 进行 Web 端错误收集的时候，经常会在js_error中看到 Script error. 这样的错误信息，同时并没有包含任何详细信息。

可能出现上面问题的原因

1. 用户使用的浏览器不支持错误的捕获 (概率极小)。
2. 出错的脚本文件是跨域加载到页面的。 对于用户浏览器不支持的情况，这种我们是无法处理的；这里主要解决跨域脚本错误无法收集的原因和解决方案。

原因

一般情况下脚本文件是使用 <script> 标签加载，对于同源脚本出错，在使用浏览器的 GlobalEventHandlers API 时，收集到的错误信息会包含详细的错误信息；当不同源脚本出错时，收集到的错误信息只有 Script error. 文本，这是由浏览器的同源策略控制的，也是正常的情况。对于非同源脚本我们只需要进行非同源资源共享（也称 HTTP访问控制 / CORS）的操作即可。

解决方法

1.脚本文件直接存放在服务器

在服务器上静态文件输出时添加 Header

Access-Control-Allow-Origin: *

在非同源脚本所在的 Script 标签上添加属 crossorigin="anonymous"

<script type="text/javascript" src="path/to/your/script.js" crossorigin="anonymous"></script>

2.脚本文件存放 CDN 上

在 CDN 设置中添加 Header

Access-Control-Allow-Origin: *

在非同源脚本所在的 Script 标签上添加属 crossorigin="anonymous"

<script type="text/javascript" src="path/to/your/script.js" crossorigin="anonymous"></script>

3. 脚本文件从第三方加载

在非同源脚本所在的 Script 标签上添加属 crossorigin="anonymous"

<script type="text/javascript" src="path/to/your/script.js" crossorigin="anonymous"></script>

参考及扩展阅读

GlobalEventHandlers.onerror

Cross-Origin Resource Sharing (CORS)

The Script element

CORS settings attributes

资源数据(ssl, tcp, dns, trans,ttfb)收集不完整问题

在数据上报过程中，部分资源timing数据有可能收集不完整。比如tcp，dns数据没有收集上报。

出现上面问题原因

1. 比如dns数据没有收集到，有可能是您应用的这个资源请求是以keep-alive保持链接的，这种情况只有在你第一次请求的时候，会有创建链接的过程，之后的请求都会保持同一连接，不会再重新创建tcp连接。所以会出现dns数据没有的情况，或者数据为0。
2. 应用的资源是以跨域的形式加载到页面的，和你的网站并非是同源（主要原因）。
3. 浏览器不支持Performance API(极少数情况)

针对跨域资源的问题

1.资源文件直接存放在服务器

在服务器上资源文件输出时添加 Header

Timing-Allow-Origin: *

2.资源文件存放 CDN 上

在 CDN 设置中添加 Header

Timing-Allow-Origin: *

参考以及拓展

Coping_with_CORS

Resource Timing Standard; W3C Editor's Draft

Resource Timing practical tips; Steve Souders

Measuring network performance with Resource Timing API