@cloudcare/browser-rum v3.2.26

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

简介

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

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

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>

配置

初始化参数

问题

产生 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