Web 应用接入¶
更新日志
2022.9.29:初始化参数新增 isIntakeUrl
配置,用于根据请求资源 url 判断是否需要采集对应资源数据,默认都采集。
2022.3.10:
- 新增
traceType
配置链路追踪工具类型,如果不配置,默认为ddtrace
。目前支持 6 种数据类型:ddtrace
、zipkin
、skywalking_v3
、jaeger
、zipkin_single_header
、w3c_traceparent
。 - 新增
allowedTracingOrigins
允许注入 trace 采集器所需 header 头部的所有请求列表。可以是请求的 origin,也可以是正则。 - 原配置项
allowedDDTracingOrigins
与新增配置项allowedTracingOrigins
属于同一个功能配置。两者可以任取其一配置,如果两者都配置,则allowedTracingOrigins
的权重高于allowedDDTracingOrigins
。
2021.5.20:
- 配合 V2 版本指标数据变更,需要升级 DataKit 1.1.7-rc0之后的版本。更多详情,可参考 DataKit 配置。
- SDK 升级 V2 版本,CDN 地址变更为
https://static.guance.com/browser-sdk/v2/dataflux-rum.js
。 - 删除
rum_web_page_performance
、rum_web_resource_performance
、js_error
、page
指标数据收集,新增view
,action
,long_task
,error
指标数据采集。 - 初始化新增
trackInteractions
配置,用于开启 Action(用户行为数据)采集,默认为关闭状态。
观测云应用监测能够通过收集各个 Web 应用的指标数据,以可视化的方式分析各个 Web 应用端的性能。
前置条件¶
- 安装 DataKit;
- 配置 RUM 采集器;
- DataKit 配置为公网可访问,并且安装 IP 地理信息库。
应用接入¶
登录观测云控制台,进入用户访问监测页面,点击左上角 新建应用,即可开始创建一个新的应用。
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 ORIGIN>', // 协议(包括://),域名(或IP地址)[和端口号]
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 ORIGIN>', // 协议(包括://),域名(或IP地址)[和端口号]
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 ORIGIN>', //协议(包括://),域名(或IP地址)[和端口号]
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。 |
|
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 |
同一个域名下面的子域名共享缓存。 |
traceType |
Enum | 否 | ddtrace |
配置链路追踪工具类型,如果不配置默认为 ddtrace 。目前支持 ddtrace 、zipkin 、skywalking_v3 、jaeger 、zipkin_single_header 、w3c_traceparent 6 种数据类型。1. opentelemetry 支持 zipkin_single_header 、w3c_traceparent 、zipkin 、jaeger 4 种类型。2. 该配置的生效需依赖 allowedTracingOrigins 配置项。3. 配置相应类型的 traceType 需要对相应的 API 服务。关于设置不同的 Access-Control-Allow-Headers ,可参考 APM 如何关联 RUM 。 |
traceId128Bit |
Boolean | 否 | false |
是否以 128 字节的方式生成 traceID ,与 traceType 对应,目前支持类型 zipkin 、jaeger 。 |
allowedDDTracingOrigins |
Array | 否 | [] |
【不建议使用】允许注入 trace 采集器所需 header 头部的所有请求列表。可以是请求的 origin,也可以是正则,origin:协议(包括://),域名(或IP地址)[和端口号] 。例如:["https://api.example.com", /https:\\/\\/.*\\.my-api-domain\\.com/] 。 |
allowedTracingOrigins |
Array | 否 | [] |
允许注入 trace 采集器所需 header 头部的所有请求列表。可以是请求的 origin,也可以是正则,origin: 协议(包括://),域名(或IP地址)[和端口号] 。例如:["https://api.example.com", /https:\\/\\/.*\\.my-api-domain\\.com/] 。 |
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 指标 |
isIntakeUrl |
Function | 否 | function(url) {return false} |
自定义方法根据请求资源 url 判断是否需要采集对应资源数据,默认都采集。 返回:false 表示要采集,true 表示不需要采集。 1. 该参数方法返回结果必须为 Boolean 类型,否则认为是无效参数。 2. 版本要求为 v2.1.5 及以上。 |
FAQ¶
产生 Script error¶
在使用观测云 Web Rum Sdk 进行 Web 端错误收集的时候,经常会在 js_error
中看到 Script error。这样的错误信息并没有包含任何详细信息。
可能出现上面问题的原因:
- 用户使用的浏览器不支持错误的捕获 (概率极小)。
- 出错的脚本文件是跨域加载到页面的。
对于用户浏览器不支持的情况,这种我们是无法处理的;这里主要解决跨域脚本错误无法收集的原因和解决方案。
一般情况下脚本文件是使用 <script>
标签加载,对于同源脚本出错,在使用浏览器的 GlobalEventHandlers API
时,收集到的错误信息会包含详细的错误信息;当不同源脚本出错时,收集到的错误信息只有 Script error.
文本,这是由浏览器的同源策略控制的,也是正常的情况。对于非同源脚本我们只需要进行非同源资源共享(也称 HTTP访问控制 / CORS)的操作即可。
解决方法:
脚本文件直接存放在服务器:
在服务器上静态文件输出时添加 Header:
在非同源脚本所在的 Script 标签上添加属 crossorigin="anonymous":
脚本文件存放 CDN 上:
在 CDN 设置中添加 Header:
在非同源脚本所在的 Script 标签上添加属 crossorigin="anonymous":
脚本文件从第三方加载:
在非同源脚本所在的 Script 标签上添加属 crossorigin="anonymous":
资源数据收集不完整¶
资源数据包含ssl、tcp、dns、trans、ttfb。在数据上报过程中,部分资源 timing 数据有可能收集不完整。比如 tcp、dns 数据没有收集上报。
可能出现上面问题的原因:
- 比如 dns 数据没有收集到,有可能是您应用的这个资源请求是以
keep-alive
保持链接的,这种情况只有在您第一次请求的时候,会有创建链接的过程,之后的请求都会保持同一连接,不会再重新创建 tcp 连接。所以会出现 dns 数据没有的情况,或者数据为0
。 - 应用的资源是以跨域的形式加载到页面的,和您的网站并非同源(主要原因)。
- 浏览器不支持
Performance API
(极少数情况)。
跨域资源¶
资源文件直接存放在服务器:
在服务器上资源文件输出时添加 Header:
资源文件存放 CDN 上:
在 CDN 设置中添加 Header: