@blueking/open-telemetry 0.0.19 → 0.0.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/bk-rum.global.js +2 -2
- package/dist/bk-rum.global.js.map +1 -1
- package/dist/index.js +733 -725
- package/dist/index.js.map +1 -1
- package/dist/plugins/device.d.ts +4 -3
- package/dist/schema/attributes.d.ts +3 -0
- package/package.json +2 -1
- package/skills/bk-rum-otele/SKILL.md +6 -2
- package/skills/bk-rum-otele/references/architecture.md +1 -1
- package/skills/bk-rum-otele/references/capabilities.md +1 -1
- package/skills/bk-rum-otele/references/configuration.md +2 -2
- package/skills/bk-rum-otele/references/plugins-basic.md +135 -0
- package/skills/bk-rum-otele/references/plugins-error-security.md +86 -0
- package/skills/bk-rum-otele/references/plugins-experience.md +125 -0
- package/skills/bk-rum-otele/references/plugins-network.md +141 -0
- package/skills/bk-rum-otele/references/plugins.md +0 -483
- package/skills/bk-rum-otele/references/privacy.md +1 -1
- package/skills/bk-rum-otele/references/telemetry-reference.md +88 -49
package/dist/plugins/device.d.ts
CHANGED
|
@@ -1,16 +1,17 @@
|
|
|
1
1
|
import type { BkOTPlugin } from '../core/plugin';
|
|
2
|
+
import type { Attributes } from '@opentelemetry/api';
|
|
2
3
|
export interface BkOTDevicePluginOptions {
|
|
3
4
|
/** 是否跨页面持久化匿名设备 ID,默认 false。 */
|
|
4
5
|
persistentId?: boolean;
|
|
5
6
|
storageKey?: string;
|
|
6
7
|
}
|
|
8
|
+
export declare const getDeviceResourceAttributes: () => Attributes;
|
|
7
9
|
/**
|
|
8
|
-
*
|
|
9
|
-
* 让所有 log/span 都自动带上这些维度。
|
|
10
|
+
* 设备元数据采集插件。稳定的设备能力由 SDK 写入 Resource;这里只维护设备 ID 和运行期动态属性。
|
|
10
11
|
*
|
|
11
12
|
* 上报字段:
|
|
12
13
|
* - `device.id`:设备级永久标识,存于 localStorage(默认 key 复用旧 session 插件以保留现网用户)。
|
|
13
|
-
* - `device.
|
|
14
|
+
* - `device.memory_gib` / `device.logical_processor_count`:硬件能力快照,写入 Resource。
|
|
14
15
|
* - `browser.viewport.*` / `browser.screen.*`:视口与屏幕尺寸。
|
|
15
16
|
* - `network.effective_type` / `network.connection_type` / `network.downlink` / `network.rtt` / `network.save_data`:
|
|
16
17
|
* 网络信息。
|
|
@@ -19,6 +19,8 @@ export declare const RUM_ATTRIBUTES: {
|
|
|
19
19
|
readonly browserName: "browser.name";
|
|
20
20
|
readonly browserVersion: "browser.version";
|
|
21
21
|
readonly cacheHit: "resource.cache.hit";
|
|
22
|
+
readonly deviceLogicalProcessorCount: "device.logical_processor_count";
|
|
23
|
+
readonly deviceMemoryGib: "device.memory_gib";
|
|
22
24
|
readonly deviceType: "device.type";
|
|
23
25
|
readonly errorType: "error_type";
|
|
24
26
|
readonly exceptionFingerprint: "exception.fingerprint";
|
|
@@ -35,6 +37,7 @@ export declare const RUM_ATTRIBUTES: {
|
|
|
35
37
|
readonly networkEffectiveType: "network.effective_type";
|
|
36
38
|
readonly nextHopProtocol: "resource.protocol";
|
|
37
39
|
readonly result: "result";
|
|
40
|
+
readonly rumSchemaVersion: "rum.schema.version";
|
|
38
41
|
readonly serviceName: "service.name";
|
|
39
42
|
readonly serviceVersion: "service.version";
|
|
40
43
|
readonly osName: "os.name";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@blueking/open-telemetry",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.21",
|
|
4
4
|
"description": "OpenTelemetry browser SDK for BK RUM",
|
|
5
5
|
"author": "TencentCloud Real User Monitoring",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -14,6 +14,7 @@
|
|
|
14
14
|
"scripts": {
|
|
15
15
|
"prepublishOnly": "pnpm build && pnpm dts && pnpm skill:refs",
|
|
16
16
|
"skill:refs": "node scripts/gen-skill-references.mjs",
|
|
17
|
+
"test:skill-refs": "node --test tests/gen-skill-references.test.mjs",
|
|
17
18
|
"build": "vite build && vite build --mode cdn && pnpm dts",
|
|
18
19
|
"build:cdn": "vite build --mode cdn",
|
|
19
20
|
"build:esm": "vite build",
|
|
@@ -27,7 +27,11 @@ description: 帮助业务方在前端应用里接入、使用和配置蓝鲸 RUM
|
|
|
27
27
|
| 搞懂三类信号、Instrumentation vs Plugin、采样、数据归一、运行时上下文 | `references/concepts.md` |
|
|
28
28
|
| 查配置项、默认值、Endpoint、插件参数和 Hook | `references/configuration.md` |
|
|
29
29
|
| 查 Transport、单信号开关、批量上报、Session 采样和 traceparent 透传 | `references/transport-sampling.md` |
|
|
30
|
-
|
|
|
30
|
+
| 了解插件默认组合、启用规则和能力分类 | `references/plugins.md` |
|
|
31
|
+
| 配置 Session、Device、View、Action | `references/plugins-basic.md` |
|
|
32
|
+
| 配置 Resource、Web Vitals、Blank Screen、Long Task、View Loading Time | `references/plugins-experience.md` |
|
|
33
|
+
| 配置 Error、CSP Violation 和错误上报 | `references/plugins-error-security.md` |
|
|
34
|
+
| 配置 Fetch/XHR Request、HTTP Body、Trace Header、WebSocket | `references/plugins-network.md` |
|
|
31
35
|
| 写自定义插件、接入第三方 OpenTelemetry instrumentation | `references/custom-plugin.md` |
|
|
32
36
|
| 查公开 API(start/flush/shutdown/setUser/setView/reportAction/reportCustomEvent 等) | `references/api.md` |
|
|
33
37
|
| Vue / React / Vue Router / 微前端 集成 | `references/framework-integration.md` |
|
|
@@ -99,7 +103,7 @@ CDN:
|
|
|
99
103
|
|
|
100
104
|
- 基础能力:Session、View;内置采集:`request`、`action`、`resource`、`error`、`webVitals`、`blankScreen`、`device`
|
|
101
105
|
|
|
102
|
-
View Loading Time 默认开启;默认关闭、按需打开:`longTask`、`cspViolation`、`websocket`。关闭默认能力时显式设为 `false
|
|
106
|
+
View Loading Time 默认开启;默认关闭、按需打开:`longTask`、`cspViolation`、`websocket`。关闭默认能力时显式设为 `false`。各插件参数按「任务路由」读取对应 `plugins-*.md`。
|
|
103
107
|
|
|
104
108
|
## 关键易错点
|
|
105
109
|
|
|
@@ -123,7 +123,7 @@ Fetch/XHR 由 `createCommonInstrumentationsPlugin()` 的单一生命周期直接
|
|
|
123
123
|
| 入口 | 作用范围 | 适合用途 |
|
|
124
124
|
| --- | --- | --- |
|
|
125
125
|
| `privacy.redactUrl` | SDK 写入的 URL 类属性 | 删除 query/hash、模板化路径 |
|
|
126
|
-
| `privacy.redactAttributes` |
|
|
126
|
+
| `privacy.redactAttributes` | Resource、通过 SDK `startSpan()`、`emitLog()` 和内置插件显式应用的属性 | 删除敏感业务字段 |
|
|
127
127
|
| `tracking.request.beforeSend` | 单个 Fetch/XHR,带原始 Request/Response/XHR 上下文 | 请求专属补充或丢弃 |
|
|
128
128
|
| Request Body `redact` | 单个请求/响应 Body,必填 | 内容级脱敏;返回 `undefined` 跳过该 Body |
|
|
129
129
|
| `tracking.beforeSend` | Span/Log 进入底层 processor 前 | 最终兜底修改或丢弃;不作用于 Metric |
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
| 手动 Action | `reportAction()` | 可调用 | 业务调用 | `action.custom` | — | — |
|
|
19
19
|
| 自定义事件 | `reportCustomEvent()` | 可调用 | 业务调用 | `custom.<name>` | — | — |
|
|
20
20
|
| 白屏 | `tracking.blankScreen` | 开 | DOM 命中测试、View 活动 | `browser.blank_screen` | `browser.blank_screen.count` | — |
|
|
21
|
-
| 设备 | `tracking.device` | 开 | UA、UA-CH、Screen、Network Information |
|
|
21
|
+
| 设备 | `tracking.device` | 开 | UA、UA-CH、Screen、Network Information | Resource 与运行时公共属性 | — | Resource 与运行时公共属性 |
|
|
22
22
|
| Long Task | `tracking.longTask` | 关 | Long Animation Frames / Long Tasks | `browser.long_task` | 三个聚合指标 | — |
|
|
23
23
|
| WebSocket | `tracking.websocket` | 关 | `WebSocket` Proxy | `websocket.connect` | 四个聚合指标 | error / close |
|
|
24
24
|
| CSP | `tracking.cspViolation` | 关 | `securitypolicyviolation` | `csp.violation` | — | — |
|
|
@@ -38,7 +38,7 @@ const bkOT = new BkOpenTelemetry(options);
|
|
|
38
38
|
| `environment` | `string` | `production` | `deployment.environment.name` |
|
|
39
39
|
| `version` | `string` | 无 | `service.version` |
|
|
40
40
|
|
|
41
|
-
SDK 还会固定写入 `rum.
|
|
41
|
+
SDK 还会固定写入 `rum.schema.version=2`、`telemetry.sdk.name=@blueking/open-telemetry`、`telemetry.sdk.language=webjs` 和当前包版本 `telemetry.sdk.version`。默认启用 `tracking.device` 时,浏览器、OS 和稳定的硬件能力也会写入 Resource。
|
|
42
42
|
|
|
43
43
|
## transport
|
|
44
44
|
|
|
@@ -216,7 +216,7 @@ tracking: {
|
|
|
216
216
|
| --- | --- | --- | --- |
|
|
217
217
|
| `trackingConsent` | `'granted' \| 'not-granted'` | `granted` | 初始化授权状态 |
|
|
218
218
|
| `redactUrl` | `(url) => string` | 删除 username/password/query/hash | SDK URL 属性脱敏 |
|
|
219
|
-
| `redactAttributes` | `(attributes) => Attributes` | 原样返回 | SDK
|
|
219
|
+
| `redactAttributes` | `(attributes) => Attributes` | 原样返回 | Resource、SDK 创建的 Span/Log 和内置插件属性脱敏 |
|
|
220
220
|
|
|
221
221
|
第三方 instrumentation 的自有 Span 属性不保证经过 `redactAttributes`;需要在 `tracking.beforeSend` 做最终兜底。详见[隐私与公共属性](./privacy.md)。
|
|
222
222
|
|
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
<!-- 本文件由 packages/open-telemetry/scripts/gen-skill-references.mjs 从 wikis 自动生成,请勿手改。 -->
|
|
2
|
+
|
|
3
|
+
# 基础采集插件
|
|
4
|
+
|
|
5
|
+
基础插件负责建立 RUM 数据的关联上下文:哪个用户、哪个会话、哪个页面、哪个设备。
|
|
6
|
+
|
|
7
|
+
以下片段聚焦对应的 `session` 或 `tracking` 配置,实际初始化仍需提供必填的 `application.name` 和有效的 `transport` endpoint 配置。
|
|
8
|
+
|
|
9
|
+
## session
|
|
10
|
+
|
|
11
|
+
`session` 维护 `session.id`,并在会话开始和轮换时写入 log。它是所有 RUM 信号的关联边界,获得 Consent 后始终开启,不能关闭;是否导出由 Session 采样决定。
|
|
12
|
+
|
|
13
|
+
默认规则:
|
|
14
|
+
|
|
15
|
+
- 不活跃超过 15 分钟后过期,下一次用户交互时轮换。
|
|
16
|
+
- 会话最长 4 小时。
|
|
17
|
+
- storage key 会按 endpoint host 隔离。
|
|
18
|
+
- 页面重新可见只续期有效会话,不会复活已过期会话。
|
|
19
|
+
- 跨 Tab 共享持久化状态,但已过期的 Tab 需要自身发生用户交互后才接管新会话。
|
|
20
|
+
|
|
21
|
+
```ts
|
|
22
|
+
new BkOpenTelemetry({
|
|
23
|
+
session: {
|
|
24
|
+
storageKey: 'bk-rum-session',
|
|
25
|
+
},
|
|
26
|
+
});
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
超时固定为 15 分钟无活动、4 小时最长生命周期,不开放配置。过期会结束当前 View、刷新旧 session 的待发送数据,并丢弃此后所有不带有效 `session.id` 的 span/log/metric;下一次用户交互续期时,同时创建新的 Session 和 View。Metric 使用 DELTA temporality,避免累计值跨 session 重复上报。
|
|
30
|
+
|
|
31
|
+
**产出遥测**:log `session.start` / `session.rotate`,并维护运行时属性 `session.id`。
|
|
32
|
+
|
|
33
|
+
## device
|
|
34
|
+
|
|
35
|
+
`device` 插件采集设备、浏览器、系统、视口和网络信息。默认开启。
|
|
36
|
+
|
|
37
|
+
```ts
|
|
38
|
+
new BkOpenTelemetry({
|
|
39
|
+
tracking: {
|
|
40
|
+
device: {
|
|
41
|
+
persistentId: true,
|
|
42
|
+
storageKey: 'bk-rum-device',
|
|
43
|
+
},
|
|
44
|
+
},
|
|
45
|
+
});
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
稳定的浏览器、系统和硬件能力写入三类信号共享的 Resource;设备 ID、视口和网络信息保留为运行时属性,后续 span/log 会自动携带,便于按浏览器、系统、网络类型下钻。
|
|
49
|
+
|
|
50
|
+
`device.id` 默认只在当前 SDK 实例内稳定;只有显式设置 `persistentId: true` 才写入 localStorage,并按应用名隔离默认 storage key。
|
|
51
|
+
|
|
52
|
+
**产出遥测**:写入 Resource 属性(如 `browser.name`、`os.name`、`device.type`、`device.memory_gib`)和运行时属性(如 `device.id`、`browser.viewport.*`、`network.effective_type`),本身不单独产生 span/metric/log。
|
|
53
|
+
|
|
54
|
+
## View
|
|
55
|
+
|
|
56
|
+
View 管理器负责初始页面、SPA 路由、手动 View、BFCache 和 Session 续期。它与 Session 一样不可关闭,并维护:
|
|
57
|
+
|
|
58
|
+
- `view.id`
|
|
59
|
+
- `view.name`
|
|
60
|
+
- `view.url`
|
|
61
|
+
- `view.url_path_group`
|
|
62
|
+
- `view.loading_type`
|
|
63
|
+
- `view.loading_time`
|
|
64
|
+
|
|
65
|
+
```ts
|
|
66
|
+
new BkOpenTelemetry({
|
|
67
|
+
tracking: {
|
|
68
|
+
view: {
|
|
69
|
+
tracking: 'auto',
|
|
70
|
+
loadingTime: true,
|
|
71
|
+
excludedActivityUrls: [/\/events\/stream$/],
|
|
72
|
+
getPathGroup: url => {
|
|
73
|
+
const { pathname } = new URL(url, window.location.href);
|
|
74
|
+
return pathname.replace(/\/\d+/g, '/:id');
|
|
75
|
+
},
|
|
76
|
+
},
|
|
77
|
+
},
|
|
78
|
+
});
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
自动模式只在 pathname 或非锚点 hash path 变化时切换 View;query-only 和页内锚点变化不会切换。手动模式使用 `view.tracking: 'manual'`,并调用 `startView({ name, url, attributes })`。
|
|
82
|
+
|
|
83
|
+
```ts
|
|
84
|
+
const bkOT = new BkOpenTelemetry({
|
|
85
|
+
application: { name: 'order-web' },
|
|
86
|
+
autoStart: false,
|
|
87
|
+
transport: { endpoint: 'https://rum-collector.example.com' },
|
|
88
|
+
tracking: { view: { tracking: 'manual' } },
|
|
89
|
+
});
|
|
90
|
+
|
|
91
|
+
await bkOT.start();
|
|
92
|
+
bkOT.startView({
|
|
93
|
+
name: '订单详情',
|
|
94
|
+
url: window.location.href,
|
|
95
|
+
attributes: { 'biz.owner': 'order-team' },
|
|
96
|
+
});
|
|
97
|
+
bkOT.setViewName('订单详情-只读');
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
`view.id` 始终由 SDK 生成,`attributes` 不能覆盖 Session/View 等保留字段。普通 span/log 必须同时带有 `session.id` 和 `view.id` 才会进入导出链路;metric 只保留 `view.url_path_group` 等低基数维度,不携带唯一 `view.id`。手动模式在首次 `startView()` 前不会导出普通 RUM 数据。
|
|
101
|
+
|
|
102
|
+
View Loading Time 默认开启:初始加载取 `loadEventEnd` 与页面活动结束时间的较大值,SPA 路由取 View 创建到页面活动结束的耗时。请求、静态资源和 DOM 变更都属于页面活动,连续 100ms 无活动视为稳定。长轮询或埋点请求应配置到 `view.excludedActivityUrls`;业务也可在真正渲染完成时调用 `setViewLoadingTime()` 覆盖自动结果。
|
|
103
|
+
|
|
104
|
+
**产出遥测**:长 span `browser.view`(包含 `view.loading_time`)与 body 为 `browser.view` 的 create/update/final Snapshot Log,metric `browser.view.loading_time`,并维护 `view.*` 运行时属性。
|
|
105
|
+
|
|
106
|
+
## action
|
|
107
|
+
|
|
108
|
+
`action` 插件默认开启。它自动监听 click,观察交互后的请求、DOM 变更、资源、错误和长任务,在页面活动稳定后生成一个 `action` span。
|
|
109
|
+
|
|
110
|
+
**产出遥测**:span `action.<type>`(如 `action.click`,`span_type=action`)。`reportAction()` 走同一套字段。
|
|
111
|
+
|
|
112
|
+
```ts
|
|
113
|
+
new BkOpenTelemetry({
|
|
114
|
+
tracking: {
|
|
115
|
+
action: {
|
|
116
|
+
actionNameAttribute: 'data-bk-action-name',
|
|
117
|
+
maxDuration: 10000,
|
|
118
|
+
nameCollection: 'explicit',
|
|
119
|
+
},
|
|
120
|
+
},
|
|
121
|
+
});
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
自动命名在默认 `explicit` 模式只向上查找 `data-bk-action-name`;没有显式名称时退回目标元素标签名。设置 `nameCollection: 'text'` 后才会继续读取 label、按钮值、`aria-label`、`alt`、`name`、`title`、`placeholder` 和 DOM 文本,并自行评估隐私风险。
|
|
125
|
+
|
|
126
|
+
对关键业务动作,推荐使用 `reportAction()` 显式上报,字段更稳定。
|
|
127
|
+
|
|
128
|
+
```ts
|
|
129
|
+
bkOT.reportAction({
|
|
130
|
+
name: '立即支付',
|
|
131
|
+
attributes: {
|
|
132
|
+
'biz.order_id': '202605270001',
|
|
133
|
+
},
|
|
134
|
+
});
|
|
135
|
+
```
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
<!-- 本文件由 packages/open-telemetry/scripts/gen-skill-references.mjs 从 wikis 自动生成,请勿手改。 -->
|
|
2
|
+
|
|
3
|
+
# 错误与安全插件
|
|
4
|
+
|
|
5
|
+
以下片段聚焦 `tracking` 配置,实际初始化仍需提供必填的 `application.name` 和有效的 `transport` endpoint 配置。
|
|
6
|
+
|
|
7
|
+
错误类插件帮助定位 JavaScript 异常、Promise 异常、资源加载失败、CSP 违规和空白屏等问题。
|
|
8
|
+
|
|
9
|
+
## error
|
|
10
|
+
|
|
11
|
+
`error` 插件默认开启,监听:
|
|
12
|
+
|
|
13
|
+
- `window.error`
|
|
14
|
+
- `unhandledrejection`
|
|
15
|
+
- 资源加载错误
|
|
16
|
+
|
|
17
|
+
插件会生成 error span,并使用 fingerprint 做窗口内节流,避免相同错误在短时间内刷屏。
|
|
18
|
+
|
|
19
|
+
**产出遥测**:span `browser.error`(JS 错误)、`browser.unhandledrejection`(Promise 异常)、`browser.resource_error`(资源加载失败),均为 `span_type=error`,带异常摘要、`error.source`、`error.window_occurrence_index`;精确总量由 `browser.error.count` 记录。
|
|
20
|
+
|
|
21
|
+
```ts
|
|
22
|
+
new BkOpenTelemetry({
|
|
23
|
+
tracking: {
|
|
24
|
+
error: {
|
|
25
|
+
maxPerWindow: 5,
|
|
26
|
+
windowMs: 60_000,
|
|
27
|
+
},
|
|
28
|
+
},
|
|
29
|
+
});
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
## 手动上报错误事件
|
|
33
|
+
|
|
34
|
+
业务捕获到错误后,可以通过 `reportCustomEvent()` 上报。
|
|
35
|
+
|
|
36
|
+
```ts
|
|
37
|
+
try {
|
|
38
|
+
await submitOrder();
|
|
39
|
+
} catch (error) {
|
|
40
|
+
bkOT.reportCustomEvent({
|
|
41
|
+
name: 'submit_order_failed',
|
|
42
|
+
error: error instanceof Error ? error : new Error(String(error)),
|
|
43
|
+
attributes: {
|
|
44
|
+
'biz.order_id': '202605270001',
|
|
45
|
+
},
|
|
46
|
+
});
|
|
47
|
+
}
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
## cspViolation
|
|
51
|
+
|
|
52
|
+
`cspViolation` 插件默认关闭。开启后监听浏览器 `securitypolicyviolation` 事件,并写入 error span。
|
|
53
|
+
|
|
54
|
+
**产出遥测**:span `csp.violation`(`span_type=error`),带 `csp.*` 字段;完整策略 `csp.original_policy` 仅在节流窗口首条携带。
|
|
55
|
+
|
|
56
|
+
```ts
|
|
57
|
+
new BkOpenTelemetry({
|
|
58
|
+
tracking: {
|
|
59
|
+
cspViolation: true,
|
|
60
|
+
},
|
|
61
|
+
});
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
建议与站点 CSP 响应头一起使用。
|
|
65
|
+
|
|
66
|
+
```http
|
|
67
|
+
Content-Security-Policy: default-src 'self'; report-uri /csp-report
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
## blankScreen 与错误排查
|
|
71
|
+
|
|
72
|
+
空白屏通常是错误、资源失败或首屏渲染失败的结果。建议同时开启 `blankScreen`、`error`、`resource`。
|
|
73
|
+
|
|
74
|
+
```ts
|
|
75
|
+
new BkOpenTelemetry({
|
|
76
|
+
tracking: {
|
|
77
|
+
blankScreen: {
|
|
78
|
+
rootSelector: '#app',
|
|
79
|
+
},
|
|
80
|
+
error: true,
|
|
81
|
+
resource: true,
|
|
82
|
+
},
|
|
83
|
+
});
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
通过 `view.id` 和 `session.id` 可以把空白屏、JS 错误、资源失败关联到同一次页面访问。
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
<!-- 本文件由 packages/open-telemetry/scripts/gen-skill-references.mjs 从 wikis 自动生成,请勿手改。 -->
|
|
2
|
+
|
|
3
|
+
# 体验与性能插件
|
|
4
|
+
|
|
5
|
+
体验类插件关注页面加载、资源、核心 Web 指标、空白屏、主线程阻塞和 SPA 路由切换。
|
|
6
|
+
|
|
7
|
+
以下片段聚焦 `tracking` 配置,实际初始化仍需提供必填的 `application.name` 和有效的 `transport` endpoint 配置。
|
|
8
|
+
|
|
9
|
+
## resource
|
|
10
|
+
|
|
11
|
+
`resource` 插件默认开启,基于 PerformanceObserver 采集静态资源加载 span。
|
|
12
|
+
|
|
13
|
+
```ts
|
|
14
|
+
new BkOpenTelemetry({
|
|
15
|
+
tracking: {
|
|
16
|
+
resource: true,
|
|
17
|
+
},
|
|
18
|
+
});
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
常见字段包括 `resource.type`、`resource.size`、`resource.protocol`、`url.full`、`server.address`。当 Resource Timing 数据可用时,还会上报:
|
|
22
|
+
|
|
23
|
+
- `resource.redirect.*`、`resource.dns.*`、`resource.connect.*`、`resource.ssl.*`
|
|
24
|
+
- `resource.first_byte.*`、`resource.download.*`、`resource.worker.*`
|
|
25
|
+
- `resource.delivery_type`、`resource.render_blocking_status`
|
|
26
|
+
|
|
27
|
+
每个网络阶段同时包含相对资源开始时刻的 `start` 与阶段 `duration`,单位均为 ms。跨域资源没有返回 `Timing-Allow-Origin` 时,浏览器不会暴露完整阶段数据,SDK 会保留资源总耗时,但不生成不可信的阶段字段。
|
|
28
|
+
|
|
29
|
+
**产出遥测**:span `browser.resource`(`span_type=resource`)。
|
|
30
|
+
|
|
31
|
+
## action 与挫败信号
|
|
32
|
+
|
|
33
|
+
`action` 默认开启。它观察点击后的请求、DOM 变更、静态资源、错误和长任务,在活动稳定后计算 `action.loading_time` 和子事件数量。
|
|
34
|
+
|
|
35
|
+
自动点击还会判断三类挫败信号:
|
|
36
|
+
|
|
37
|
+
- `rage_click`:1 秒内在同一元素 100px 范围内连续点击至少三次;滚动或文本选择会中断判定。三次点击合并为一条 action。
|
|
38
|
+
- `dead_click`:点击后没有页面活动、输入、滚动或文本选择;文本输入、链接、select、textarea、canvas、contenteditable 等无法可靠判断的元素会排除。
|
|
39
|
+
- `error_click`:点击活动窗口内产生前端错误。
|
|
40
|
+
|
|
41
|
+
信号写入 `action.frustration.type`(string[])和 `action.frustration.count`。为了完成连续点击判断,action span 最多延迟 1 秒创建;`action.id` 只在真实页面活动窗口内挂到关联事件上,不会因为这个上报等待期延长。
|
|
42
|
+
|
|
43
|
+
## webVitals
|
|
44
|
+
|
|
45
|
+
`webVitals` 插件默认开启,采集 CLS、FCP、INP、LCP、TTFB。FCP/LCP/TTFB 按指标发生时刻归属 View,CLS 使用每个 View 独立的 1 秒间隔/5 秒窗口,INP 使用候选交互的近似 p98,而不是简单最大值。它会同时产生 metric 和 span:metric 用于低基数聚合,span 用于通过 `session.id`、`view.id` 定位具体页面和归因信息。
|
|
46
|
+
|
|
47
|
+
**产出遥测**:metric `browser.web_vital.cls`(unit `1`)、`browser.web_vital.duration`(unit `ms`,FCP/INP/LCP/TTFB 共用)+ span `browser.web_vital`(`span_type=vital`,含 attribution 归因)。
|
|
48
|
+
|
|
49
|
+
```ts
|
|
50
|
+
new BkOpenTelemetry({
|
|
51
|
+
tracking: {
|
|
52
|
+
webVitals: true,
|
|
53
|
+
},
|
|
54
|
+
});
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
## blankScreen
|
|
58
|
+
|
|
59
|
+
`blankScreen` 插件默认开启。它会针对每个 View 等待页面活动稳定后执行九点分层采样;只有两次连续检测都超过阈值才上报。View 切换或页面隐藏会取消旧检测,恢复可见后重新调度。
|
|
60
|
+
|
|
61
|
+
```ts
|
|
62
|
+
new BkOpenTelemetry({
|
|
63
|
+
tracking: {
|
|
64
|
+
blankScreen: {
|
|
65
|
+
rootSelector: '#app',
|
|
66
|
+
checkDelay: 1000,
|
|
67
|
+
confirmationDelay: 200,
|
|
68
|
+
threshold: 0.8,
|
|
69
|
+
ignoreSelectors: ['.global-loading', '.skeleton'],
|
|
70
|
+
},
|
|
71
|
+
},
|
|
72
|
+
});
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
SPA 应用建议配置 `rootSelector`。根节点在确认阶段仍不存在时会以 `missing_root` 原因上报;loading 和骨架屏样本不进入空白比例分母。
|
|
76
|
+
|
|
77
|
+
**产出遥测**(仅判定为白屏时):metric `browser.blank_screen.count` + error span `browser.blank_screen`(`span_type=error`)。
|
|
78
|
+
|
|
79
|
+
## longTask
|
|
80
|
+
|
|
81
|
+
`longTask` 插件默认关闭。开启后优先通过 Long Animation Frames API 采集主线程阻塞;浏览器不支持时自动回退到 Long Tasks API,两种入口不会重复观察。
|
|
82
|
+
|
|
83
|
+
```ts
|
|
84
|
+
new BkOpenTelemetry({
|
|
85
|
+
tracking: {
|
|
86
|
+
longTask: {
|
|
87
|
+
threshold: 50,
|
|
88
|
+
warningThreshold: 100,
|
|
89
|
+
},
|
|
90
|
+
},
|
|
91
|
+
});
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
LoAF 会补充 blocking duration、render/style/layout 阶段、最重脚本归因,并把每个脚本作为 `long_task.script` Span Event。初始化阶段的 buffered entries 延迟到后续宏任务批量处理,避免 SDK 启动自身制造阻塞。不支持 LoAF 和 Long Tasks API 的浏览器会跳过插件。
|
|
95
|
+
|
|
96
|
+
**产出遥测**:metric `browser.long_task.count` / `browser.long_task.duration` / `browser.long_task.blocking_duration`(unit `ms`)+ span `browser.long_task`(`span_type=longtask`)。
|
|
97
|
+
|
|
98
|
+
## View Loading Time
|
|
99
|
+
|
|
100
|
+
View Loading Time 属于 View 管理器,默认启用,基于页面活动结束时间计算。
|
|
101
|
+
|
|
102
|
+
自动计算规则:
|
|
103
|
+
|
|
104
|
+
- 初始加载:取 `navigationStart → loadEventEnd` 与 `navigationStart → 页面活动结束` 的较大值。
|
|
105
|
+
- SPA 路由:取 View 创建到页面活动结束的耗时。
|
|
106
|
+
- Fetch/XHR 进行中、静态资源完成和 DOM Mutation 都属于活动;连续 100ms 无活动视为稳定。
|
|
107
|
+
- SDK 自身上报、`view.excludedActivityUrls` 命中的请求,以及 `data-bk-excluded-activity-mutations` 节点下的 DOM 变更不参与计算。
|
|
108
|
+
|
|
109
|
+
```ts
|
|
110
|
+
new BkOpenTelemetry({
|
|
111
|
+
tracking: {
|
|
112
|
+
view: {
|
|
113
|
+
loadingTime: true,
|
|
114
|
+
excludedActivityUrls: [/\/events\/stream$/, '/analytics'],
|
|
115
|
+
},
|
|
116
|
+
},
|
|
117
|
+
});
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
如果业务有明确的异步渲染完成点,可覆盖自动结果:
|
|
121
|
+
|
|
122
|
+
```ts
|
|
123
|
+
await loadAlarmDetail();
|
|
124
|
+
bkOT.setViewLoadingTime();
|
|
125
|
+
```
|
|
@@ -0,0 +1,141 @@
|
|
|
1
|
+
<!-- 本文件由 packages/open-telemetry/scripts/gen-skill-references.mjs 从 wikis 自动生成,请勿手改。 -->
|
|
2
|
+
|
|
3
|
+
# 网络与扩展插件
|
|
4
|
+
|
|
5
|
+
网络能力覆盖 Fetch/XHR 与 WebSocket。两者都会 patch 浏览器全局 API,同一页面只应运行一个 SDK 实例。
|
|
6
|
+
|
|
7
|
+
以下片段聚焦 `tracking`,实际初始化仍需提供 `application.name` 和有效 Transport。
|
|
8
|
+
|
|
9
|
+
## Fetch/XHR request
|
|
10
|
+
|
|
11
|
+
`tracking.request` 默认开启。当前实现由 SDK 自己统一 patch `window.fetch` 与 `XMLHttpRequest.prototype.open/send`,不使用官方 Fetch/XHR instrumentation,也不会为同一请求叠加两套生命周期。
|
|
12
|
+
|
|
13
|
+
### 请求生命周期
|
|
14
|
+
|
|
15
|
+
一次请求按以下顺序处理:
|
|
16
|
+
|
|
17
|
+
1. 转成绝对 URL,检查 SDK 自身 OTLP Endpoint 与 `excludedUrls`。
|
|
18
|
+
2. 创建名为 `browser.resource`、kind 为 `CLIENT` 的 Span。
|
|
19
|
+
3. 记录 View/Action 页面活动;`view.excludedActivityUrls` 可只排除活动等待,不丢弃 Span。
|
|
20
|
+
4. `allowedTracingUrls` 命中且 Trace 开启时进入传播 Header 注入分支;默认 W3C propagator 注入 `traceparent`,宿主已有全局 propagator 时以实际实现为准。
|
|
21
|
+
5. 请求完成后写入状态、结果、错误和 `request.beforeSend` 属性。
|
|
22
|
+
6. 等待最多 200ms 匹配 Resource Timing,把网络阶段补回同一 Span。
|
|
23
|
+
7. 如已配置 Body 且 Log 开启,异步生成关联原 `trace.id` / `span.id` 的诊断 Log。
|
|
24
|
+
|
|
25
|
+
**产出遥测**:Span `browser.resource`,`span_type=resource`、`resource.type=fetch|xhr`,常用属性包括 `http.request.method`、`http.response.status_code`、`url.full`、`server.address`、网络阶段与响应体积。
|
|
26
|
+
|
|
27
|
+
```ts
|
|
28
|
+
new BkOpenTelemetry({
|
|
29
|
+
application: { name: 'request-demo' },
|
|
30
|
+
transport: { endpoint: 'https://collector.example.com' },
|
|
31
|
+
tracking: {
|
|
32
|
+
request: {
|
|
33
|
+
excludedUrls: [/\/health(?:\?|$)/],
|
|
34
|
+
beforeSend(event, context) {
|
|
35
|
+
event.attributes['request.transport'] = context.type;
|
|
36
|
+
return event.resource.statusCode !== 404;
|
|
37
|
+
},
|
|
38
|
+
},
|
|
39
|
+
},
|
|
40
|
+
});
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
`request.beforeSend` 在请求完成后执行,可修改 Span attributes;返回 `false` 会标记该 Span 在最终 processor 中丢弃,并立即跳过该请求的 Body Log。Hook 抛错不会中断业务请求,`debug: true` 时输出 warning。
|
|
44
|
+
|
|
45
|
+
### excludedUrls 与 excludedActivityUrls
|
|
46
|
+
|
|
47
|
+
| 配置 | 是否创建 Span | 是否计入 View/Action 活动 | 适用场景 |
|
|
48
|
+
| --- | --- | --- | --- |
|
|
49
|
+
| `tracking.request.excludedUrls` | 否 | 否 | 探活、埋点、无需采集的请求 |
|
|
50
|
+
| `tracking.view.excludedActivityUrls` | 是 | 否 | 长轮询、SSE、流式接口,不应阻塞页面稳定 |
|
|
51
|
+
|
|
52
|
+
两者都支持字符串包含、RegExp 和函数 matcher。
|
|
53
|
+
|
|
54
|
+
### traceparent 注入条件
|
|
55
|
+
|
|
56
|
+
只有 `allowedTracingUrls` 命中且 Trace 信号开启时才进入传播 Header 注入分支;默认 W3C propagator 会注入 `traceparent`,同源请求也不隐式放行。
|
|
57
|
+
|
|
58
|
+
```ts
|
|
59
|
+
tracking: {
|
|
60
|
+
request: {
|
|
61
|
+
allowedTracingUrls: [
|
|
62
|
+
url => new URL(url).origin === 'https://api.example.com',
|
|
63
|
+
/^https:\/\/[^/]+\.internal\.example\.com\//,
|
|
64
|
+
],
|
|
65
|
+
},
|
|
66
|
+
}
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
字符串 matcher 使用包含匹配,例如 `'https://api.example.com'` 也会命中 `https://api.example.com.evil/`,不适合作为安全 origin 边界。需要精确控制时使用上面的 URL-aware 函数或带 `/` 边界的正则。
|
|
70
|
+
|
|
71
|
+
跨域注入会触发 CORS 预检,目标服务必须在 `Access-Control-Allow-Headers` 放行实际使用的 Trace Header。SDK 成功注册自己的默认 W3C propagator 时通常注入 `traceparent`,并可能透传已有 `tracestate`;如果宿主已注册全局 propagator,实际 Header 由该 propagator 决定,可能还包含其他传播字段。
|
|
72
|
+
|
|
73
|
+
### Resource Timing
|
|
74
|
+
|
|
75
|
+
Fetch/XHR 与静态资源共用一个 Resource PerformanceObserver:
|
|
76
|
+
|
|
77
|
+
- `initiatorType=fetch|xmlhttprequest` 的 entry 只用于匹配请求 Span,不再创建静态资源 Span。
|
|
78
|
+
- 通过 URL 与时间窗口匹配;找不到 entry 时请求 Span 仍正常结束。
|
|
79
|
+
- 跨域接口缺少 `Timing-Allow-Origin` 时,浏览器不会提供完整阶段字段。
|
|
80
|
+
- Trace 关闭时跳过 timing 等待,因为不存在可导出的请求 Span。
|
|
81
|
+
|
|
82
|
+
### 请求/响应 Body
|
|
83
|
+
|
|
84
|
+
Body 默认关闭。开启时必须提供 `redact`,默认只采集状态未知、0 或 `>=400` 的请求:
|
|
85
|
+
|
|
86
|
+
```ts
|
|
87
|
+
tracking: {
|
|
88
|
+
request: {
|
|
89
|
+
body: {
|
|
90
|
+
capture: 'errors',
|
|
91
|
+
maxSize: 10 * 1024,
|
|
92
|
+
allowedContentTypes: ['application/json', /^text\//],
|
|
93
|
+
redact({ body, kind }) {
|
|
94
|
+
if (kind === 'request') {
|
|
95
|
+
return body.replace(/("(?:password|token)"\s*:\s*)"[^"]*"/g, '$1"***"');
|
|
96
|
+
}
|
|
97
|
+
return body;
|
|
98
|
+
},
|
|
99
|
+
},
|
|
100
|
+
},
|
|
101
|
+
}
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
**产出遥测**:Log `browser.request.body`,错误请求为 ERROR,`capture: 'all'` 下成功请求为 INFO。
|
|
105
|
+
|
|
106
|
+
- Fetch 的 Request/Response 通过 clone 限量读取,不消费业务原始流。
|
|
107
|
+
- XHR 支持文本与 JSON 响应。
|
|
108
|
+
- string、URLSearchParams、Blob 等可文本化请求可读取;FormData、ArrayBuffer 和二进制响应跳过。
|
|
109
|
+
- 默认 Content-Type:`text/*`、包含 `json`、`application/x-www-form-urlencoded`、`application/graphql`。
|
|
110
|
+
- `redact` 返回 `undefined` 时只跳过当前 request 或 response Body。
|
|
111
|
+
- Log 信号关闭时 Body 配置不生效。
|
|
112
|
+
|
|
113
|
+
## websocket
|
|
114
|
+
|
|
115
|
+
`tracking.websocket` 默认关闭。开启后用 Proxy 包装 `window.WebSocket`,保留静态常量、`instanceof` 与子类化行为。
|
|
116
|
+
|
|
117
|
+
```ts
|
|
118
|
+
new BkOpenTelemetry({
|
|
119
|
+
application: { name: 'realtime-demo' },
|
|
120
|
+
transport: { endpoint: 'https://collector.example.com' },
|
|
121
|
+
tracking: { websocket: true },
|
|
122
|
+
});
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
**产出遥测**:
|
|
126
|
+
|
|
127
|
+
- Span `websocket.connect`:只覆盖建连阶段,成功/失败后结束,不用长 Span 覆盖整个连接。
|
|
128
|
+
- Metric `browser.websocket.message.count`、`browser.websocket.message.bytes`:按 `in/out` 分组。
|
|
129
|
+
- Metric `browser.websocket.error.count`:按 `connect/runtime` 分组。
|
|
130
|
+
- Metric `browser.websocket.connect.duration`:只记录成功建连耗时。
|
|
131
|
+
- Log `websocket.error`、`websocket.close`:记录错误阶段和关闭详情。
|
|
132
|
+
|
|
133
|
+
插件不读取消息内容,只计算数量和字节数。超过 64KB 的字符串使用 `string.length` 近似字节数,避免编码开销;CJK/emoji 会低估。相同 URL 的错误 Log 在 60 秒内最多 5 条,Error Counter 不受节流影响。
|
|
134
|
+
|
|
135
|
+
SDK shutdown 后新建连接不再采集;已存在连接上的包装会保留,但回调立即返回。若其他库后来替换了 `window.WebSocket`,shutdown 不会强行覆盖后来者。
|
|
136
|
+
|
|
137
|
+
## 与额外 instrumentation 的关系
|
|
138
|
+
|
|
139
|
+
`extensions.instrumentations` 适合已有标准 OpenTelemetry instrumentation。不要再注册覆盖 Fetch/XHR 或用户交互的 instrumentation,否则可能与内置 request/action 重复 patch、重复 Span。
|
|
140
|
+
|
|
141
|
+
需要 Session/View、`emitLog()`、页面活动或 RUM 归一字段时,优先写自定义插件,见[内置采集与扩展](./concepts.md)与[自定义插件](./custom-plugin.md)。
|