@blueking/open-telemetry 0.0.14 → 0.0.16
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 +96 -641
- package/dist/bk-rum.global.js +9 -9
- package/dist/bk-rum.global.js.map +1 -1
- package/dist/core/action-activity.d.ts +28 -0
- package/dist/core/config.d.ts +113 -93
- package/dist/core/page-activity.d.ts +14 -0
- package/dist/core/plugin.d.ts +23 -6
- package/dist/core/processor.d.ts +25 -4
- package/dist/core/request-timing.d.ts +5 -0
- package/dist/core/runtime-context.d.ts +51 -3
- package/dist/core/sampling.d.ts +5 -1
- package/dist/core/sdk.d.ts +29 -10
- package/dist/core/url.d.ts +4 -1
- package/dist/index.d.ts +12 -14
- package/dist/index.js +2184 -1175
- package/dist/index.js.map +1 -1
- package/dist/plugins/action.d.ts +6 -2
- package/dist/plugins/activity.d.ts +6 -0
- package/dist/plugins/blank-screen.d.ts +17 -0
- package/dist/plugins/common.d.ts +11 -3
- package/dist/plugins/device.d.ts +2 -0
- package/dist/plugins/long-task.d.ts +3 -12
- package/dist/plugins/page-view.d.ts +1 -0
- package/dist/plugins/request-body.d.ts +14 -0
- package/dist/plugins/resource.d.ts +17 -1
- package/dist/plugins/session-state.d.ts +18 -0
- package/dist/plugins/session.d.ts +4 -4
- package/dist/plugins/web-vitals.d.ts +74 -0
- package/dist/schema/attributes.d.ts +31 -10
- package/dist/schema/span.d.ts +4 -12
- package/package.json +3 -7
- package/skills/bk-rum-otele/SKILL.md +39 -33
- package/skills/bk-rum-otele/evals/evals.json +3 -3
- package/skills/bk-rum-otele/references/api.md +247 -114
- package/skills/bk-rum-otele/references/architecture.md +141 -0
- package/skills/bk-rum-otele/references/capabilities.md +100 -0
- package/skills/bk-rum-otele/references/concepts.md +40 -111
- package/skills/bk-rum-otele/references/configuration.md +202 -254
- package/skills/bk-rum-otele/references/custom-plugin.md +22 -7
- package/skills/bk-rum-otele/references/data-model.md +17 -10
- package/skills/bk-rum-otele/references/framework-integration.md +25 -17
- package/skills/bk-rum-otele/references/getting-started.md +42 -86
- package/skills/bk-rum-otele/references/plugins.md +232 -138
- package/skills/bk-rum-otele/references/privacy.md +47 -34
- package/skills/bk-rum-otele/references/telemetry-reference.md +74 -45
- package/skills/bk-rum-otele/references/transport-sampling.md +79 -0
- package/skills/bk-rum-otele/references/troubleshooting.md +71 -37
- package/dist/plugins/http-body.d.ts +0 -3
- package/dist/plugins/route-timing.d.ts +0 -2
package/README.md
CHANGED
|
@@ -1,710 +1,165 @@
|
|
|
1
1
|
# @blueking/open-telemetry
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
面向浏览器真实用户监控(RUM)的 OpenTelemetry SDK。它把 Session、View、Fetch/XHR、静态资源、错误、Web Vitals、用户操作、白屏、Long Task、WebSocket、CSP 和设备信息统一为 Trace、Metric、Log,并通过 OTLP HTTP 上报。
|
|
4
4
|
|
|
5
|
-
##
|
|
6
|
-
|
|
7
|
-
### npm 使用
|
|
5
|
+
## 快速接入
|
|
8
6
|
|
|
9
7
|
```bash
|
|
10
8
|
npm install @blueking/open-telemetry
|
|
11
9
|
```
|
|
12
10
|
|
|
13
|
-
```
|
|
11
|
+
```ts
|
|
14
12
|
import { BkOpenTelemetry } from '@blueking/open-telemetry';
|
|
15
13
|
|
|
16
|
-
const bkOT = new BkOpenTelemetry({
|
|
17
|
-
|
|
18
|
-
name: '
|
|
14
|
+
export const bkOT = new BkOpenTelemetry({
|
|
15
|
+
application: {
|
|
16
|
+
name: 'order-center',
|
|
19
17
|
environment: 'production',
|
|
20
|
-
version: '1.
|
|
18
|
+
version: '1.2.0',
|
|
21
19
|
},
|
|
22
20
|
transport: {
|
|
23
|
-
endpoint: 'https://
|
|
24
|
-
token: '
|
|
21
|
+
endpoint: 'https://rum-collector.example.com',
|
|
22
|
+
token: 'report-token',
|
|
25
23
|
},
|
|
26
|
-
|
|
27
|
-
|
|
24
|
+
session: {
|
|
25
|
+
sampleRate: 0.2,
|
|
28
26
|
},
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
### CDN 使用
|
|
33
|
-
|
|
34
|
-
```html
|
|
35
|
-
<script src="https://unpkg.com/@blueking/open-telemetry/dist/bk-rum.global.js"></script>
|
|
36
|
-
<script>
|
|
37
|
-
window.bkOT = new window.BkOpenTelemetry({
|
|
38
|
-
app: {
|
|
39
|
-
name: 'demo-app',
|
|
40
|
-
environment: 'production',
|
|
41
|
-
version: '1.0.0',
|
|
42
|
-
},
|
|
43
|
-
transport: {
|
|
44
|
-
endpoint: 'https://your-otlp-collector',
|
|
45
|
-
token: 'your-report-token',
|
|
27
|
+
tracking: {
|
|
28
|
+
view: {
|
|
29
|
+
getPathGroup: url => new URL(url, location.href).pathname.replace(/\/orders\/[^/]+/, '/orders/:id'),
|
|
46
30
|
},
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
},
|
|
50
|
-
});
|
|
51
|
-
</script>
|
|
31
|
+
},
|
|
32
|
+
});
|
|
52
33
|
```
|
|
53
34
|
|
|
54
|
-
`
|
|
55
|
-
|
|
56
|
-
`transport.endpoint` 填上报根地址(不含路径前缀),SDK 会自动拼出三类上报地址:
|
|
57
|
-
|
|
58
|
-
- traces: `endpoint/v1/rum`
|
|
59
|
-
- metrics: `endpoint/v1/metrics`
|
|
60
|
-
- logs: `endpoint/v1/logs`
|
|
35
|
+
`application.name` 与 `transport` 必填。根 `transport.endpoint` 会生成三个上报地址:
|
|
61
36
|
|
|
62
|
-
|
|
37
|
+
| 信号 | 默认地址 | 主要用途 |
|
|
38
|
+
| --- | --- | --- |
|
|
39
|
+
| Trace | `<endpoint>/v1/rum` | View、请求、资源、错误、性能、Action |
|
|
40
|
+
| Metric | `<endpoint>/v1/metrics` | Web Vitals、View Loading、白屏、Long Task、WebSocket 聚合 |
|
|
41
|
+
| Log | `<endpoint>/v1/logs` | Session 生命周期、View Snapshot、请求 Body、WebSocket 事件 |
|
|
63
42
|
|
|
64
|
-
`transport.
|
|
43
|
+
也可以为 `transport.signals.traces|metrics|logs.endpoint` 分别提供完整 URL,或把不需要的信号设为 `false`。至少要启用一种信号。
|
|
65
44
|
|
|
66
|
-
##
|
|
45
|
+
## 默认能力
|
|
67
46
|
|
|
68
|
-
|
|
47
|
+
只提供最小配置时,SDK 会自动启动并建立 Session 与 View。
|
|
69
48
|
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
49
|
+
| 能力 | 默认 | 产出 |
|
|
50
|
+
| --- | --- | --- |
|
|
51
|
+
| Session / View | 开启且不可关闭 | `session.*` Log、`browser.view` Span/Log/Metric、运行时关联字段 |
|
|
52
|
+
| Fetch / XHR | 开启 | `browser.resource` CLIENT Span,可选 `traceparent` 与 Body Log |
|
|
53
|
+
| 静态资源 | 开启 | `browser.resource` Span、网络阶段属性 |
|
|
54
|
+
| Error | 开启 | JS、Promise、资源加载错误 Span |
|
|
55
|
+
| Web Vitals | 开启 | CLS/FCP/INP/LCP/TTFB Span 与 Metric |
|
|
56
|
+
| Action | 开启 | 点击活动、耗时、关联计数和挫败信号 Span |
|
|
57
|
+
| Blank Screen | 开启 | 白屏 Span 与 Counter |
|
|
58
|
+
| Device | 开启 | 浏览器、OS、屏幕、网络运行时属性 |
|
|
59
|
+
| Long Task / WebSocket / CSP | 关闭 | 按需通过 `tracking` 开启 |
|
|
81
60
|
|
|
82
|
-
|
|
61
|
+
完整的浏览器 API、默认值、配置入口和遥测产出见[能力矩阵](./wikis/capabilities.md)。
|
|
83
62
|
|
|
84
|
-
|
|
85
|
-
- `httpBody`: 接口异常时采集请求和响应 body。
|
|
86
|
-
- `longTask`: 主线程 Long Task。
|
|
87
|
-
- `routeTiming`: SPA 路由切换耗时。
|
|
88
|
-
- `cspViolation`: CSP 违规事件。
|
|
89
|
-
- `websocket`: WebSocket 连接、消息、错误指标。
|
|
63
|
+
## 生产配置基线
|
|
90
64
|
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
```javascript
|
|
94
|
-
new BkOpenTelemetry({
|
|
95
|
-
transport: {
|
|
96
|
-
endpoint: 'https://your-otlp-collector',
|
|
97
|
-
},
|
|
98
|
-
instrumentations: {
|
|
99
|
-
fetch: false,
|
|
100
|
-
xhr: false,
|
|
101
|
-
userInteraction: false,
|
|
102
|
-
},
|
|
103
|
-
plugins: {
|
|
104
|
-
webVitals: false,
|
|
105
|
-
blankScreen: false,
|
|
106
|
-
session: false,
|
|
107
|
-
},
|
|
108
|
-
});
|
|
109
|
-
```
|
|
110
|
-
|
|
111
|
-
## 3. 给数据加上应用、用户和路由
|
|
112
|
-
|
|
113
|
-
建议先补齐应用标识、用户 ID 和路由归类。这样后续排查问题时,可以按应用、版本、用户、页面聚合。
|
|
114
|
-
|
|
115
|
-
```javascript
|
|
65
|
+
```ts
|
|
116
66
|
const bkOT = new BkOpenTelemetry({
|
|
117
|
-
|
|
67
|
+
application: {
|
|
118
68
|
name: 'order-center',
|
|
119
69
|
environment: 'production',
|
|
120
70
|
version: '1.2.0',
|
|
121
71
|
},
|
|
122
72
|
transport: {
|
|
123
|
-
endpoint: 'https://
|
|
124
|
-
token: '
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
const { pathname } = new URL(url, location.href);
|
|
132
|
-
return pathname.replace(/\/user\/\d+/, '/user/:id');
|
|
73
|
+
endpoint: 'https://rum-collector.example.com',
|
|
74
|
+
token: 'report-token',
|
|
75
|
+
signals: {
|
|
76
|
+
traces: {
|
|
77
|
+
processor: 'batch',
|
|
78
|
+
batch: { maxQueueSize: 2048, maxExportBatchSize: 512 },
|
|
79
|
+
},
|
|
80
|
+
metrics: { intervalMillis: 60_000 },
|
|
133
81
|
},
|
|
134
82
|
},
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
- `app.name`: 应用名,会写入 `service.name`,默认 `unknown_service`。
|
|
141
|
-
- `app.environment`: 环境名,会写入 `deployment.environment.name`,默认 `production`。
|
|
142
|
-
- `app.version`: 应用版本,会写入 `service.version`。
|
|
143
|
-
- `user.id`: 用户 ID,会写入 `user.id`。SDK 原样透传,不做 hash 和脱敏。
|
|
144
|
-
- `route.getPathGroup`: 把高基数 URL 归类成低基数路由,例如 `/user/123` 归类成 `/user/:id`。
|
|
145
|
-
|
|
146
|
-
运行中也可以更新用户和当前 View:
|
|
147
|
-
|
|
148
|
-
```javascript
|
|
149
|
-
bkOT.setUser({ id: 'user-001' });
|
|
150
|
-
|
|
151
|
-
bkOT.setView({
|
|
152
|
-
id: 'view-001',
|
|
153
|
-
url: location.href,
|
|
154
|
-
urlPathGroup: '/order/:id',
|
|
155
|
-
loadingType: 'route_change',
|
|
156
|
-
});
|
|
157
|
-
```
|
|
158
|
-
|
|
159
|
-
`setUser` 和 `setView` 会更新运行期公共属性,后续 span、metric、log 都会自动带上这些字段。
|
|
160
|
-
|
|
161
|
-
## 4. 按需打开接口、资源和路由能力
|
|
162
|
-
|
|
163
|
-
多数 Web 应用可以从这一组配置开始:
|
|
164
|
-
|
|
165
|
-
```javascript
|
|
166
|
-
new BkOpenTelemetry({
|
|
167
|
-
app: {
|
|
168
|
-
name: 'demo-app',
|
|
169
|
-
version: '1.0.0',
|
|
170
|
-
},
|
|
171
|
-
transport: {
|
|
172
|
-
endpoint: 'https://your-otlp-collector',
|
|
173
|
-
token: 'your-report-token',
|
|
174
|
-
},
|
|
175
|
-
route: {
|
|
176
|
-
getPathGroup: url => new URL(url, location.href).pathname,
|
|
177
|
-
},
|
|
178
|
-
plugins: {
|
|
179
|
-
routeTiming: true,
|
|
180
|
-
longTask: { threshold: 80 },
|
|
181
|
-
},
|
|
182
|
-
});
|
|
183
|
-
```
|
|
184
|
-
|
|
185
|
-
- `fetch` / `xhr`: 默认开启,采集接口耗时、状态码、请求方法、URL 归类等。
|
|
186
|
-
- `resource`: 默认开启,采集 img、script、css 等静态资源耗时、大小、缓存命中和协议。
|
|
187
|
-
- `pageView`: 默认开启,监听 `pushState`、`replaceState`、`popstate`、`hashchange`。
|
|
188
|
-
- `routeTiming`: 默认关闭,估算 SPA 路由切换到下一帧渲染完成的耗时。
|
|
189
|
-
- `longTask`: 默认关闭,采集主线程长任务。`threshold` 默认 `50` ms。
|
|
190
|
-
|
|
191
|
-
SDK 会自动忽略指向自身 OTLP 上报地址的请求,避免上报请求被再次采集导致循环放大。
|
|
192
|
-
|
|
193
|
-
## 5. 配置错误、白屏和 CSP
|
|
194
|
-
|
|
195
|
-
```javascript
|
|
196
|
-
new BkOpenTelemetry({
|
|
197
|
-
transport: {
|
|
198
|
-
endpoint: 'https://your-otlp-collector',
|
|
199
|
-
},
|
|
200
|
-
plugins: {
|
|
201
|
-
error: {
|
|
202
|
-
windowMs: 60 * 1000,
|
|
203
|
-
maxPerWindow: 5,
|
|
83
|
+
session: { sampleRate: 0.2 },
|
|
84
|
+
tracking: {
|
|
85
|
+
view: {
|
|
86
|
+
getPathGroup: url => new URL(url, location.href).pathname.replace(/\/orders\/[^/]+/, '/orders/:id'),
|
|
87
|
+
excludedActivityUrls: [/\/events\/stream(?:\?|$)/],
|
|
204
88
|
},
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
threshold: 0.8,
|
|
209
|
-
ignoreSelectors: ['.app-loading', '.page-skeleton'],
|
|
89
|
+
request: {
|
|
90
|
+
allowedTracingUrls: [url => new URL(url).origin === 'https://api.example.com'],
|
|
91
|
+
excludedUrls: [/\/health(?:\?|$)/],
|
|
210
92
|
},
|
|
211
|
-
|
|
93
|
+
blankScreen: { rootSelector: '#app' },
|
|
212
94
|
},
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
- `error`: 默认开启,采集 `window.error`、`unhandledrejection`、资源加载失败。
|
|
219
|
-
- `error.windowMs`: 同类错误节流窗口,默认 `60000` ms。
|
|
220
|
-
- `error.maxPerWindow`: 同类错误在窗口内最多上报条数,默认 `5`。
|
|
221
|
-
- `cspViolation`: 默认关闭,监听 `securitypolicyviolation` 事件。适合有 CSP 策略的站点开启。
|
|
222
|
-
|
|
223
|
-
白屏检测说明:
|
|
224
|
-
|
|
225
|
-
- `blankScreen`: 默认开启,只在判定为白屏时上报。
|
|
226
|
-
- `blankScreen.rootSelector`: 应用挂载点。Vue / React 项目建议配置为 `#app` 或 `#root`。
|
|
227
|
-
- `blankScreen.checkDelay`: DOM ready 后延迟多久检测,默认 `3000` ms。
|
|
228
|
-
- `blankScreen.threshold`: 空白采样点比例阈值,范围 `0 - 1`,默认 `0.8`。
|
|
229
|
-
- `blankScreen.ignoreSelectors`: 追加 loading、骨架屏等忽略选择器,命中后不计入空白比例。
|
|
230
|
-
|
|
231
|
-
## 6. 配置用户操作和 WebSocket
|
|
232
|
-
|
|
233
|
-
```javascript
|
|
234
|
-
new BkOpenTelemetry({
|
|
235
|
-
transport: {
|
|
236
|
-
endpoint: 'https://your-otlp-collector',
|
|
237
|
-
},
|
|
238
|
-
plugins: {
|
|
239
|
-
action: {
|
|
240
|
-
eventNames: ['click', 'submit', 'keydown'],
|
|
241
|
-
},
|
|
242
|
-
websocket: true,
|
|
243
|
-
},
|
|
244
|
-
});
|
|
245
|
-
```
|
|
246
|
-
|
|
247
|
-
`action` 用于上报轻量用户操作:
|
|
248
|
-
|
|
249
|
-
- `action: true`: 采集 `click`、`submit`、`keydown`。
|
|
250
|
-
- `action.eventNames`: 自定义采集事件,支持 `click`、`input`、`keydown`、`pointerdown`、`scroll`、`submit`。
|
|
251
|
-
- 上报时会截取元素文本、标签名,并写入 `action.type`、`target.text_short`、`target.tag`。
|
|
252
|
-
|
|
253
|
-
`websocket` 用于采集 WebSocket:
|
|
254
|
-
|
|
255
|
-
- 连接成功耗时:`browser.websocket.connect.duration`。
|
|
256
|
-
- 收发消息数:`browser.websocket.message.count`。
|
|
257
|
-
- 收发字节数:`browser.websocket.message.bytes`。
|
|
258
|
-
- 错误数:`browser.websocket.error.count`。
|
|
259
|
-
|
|
260
|
-
SDK 会忽略指向自身上报地址的 WebSocket URL。
|
|
261
|
-
|
|
262
|
-
## 7. 采集异常接口 body
|
|
263
|
-
|
|
264
|
-
`httpBody` 默认关闭。它会 patch `fetch` 和 `XMLHttpRequest`,只在请求失败、请求抛错或状态码 `>= 400` 时上报 body。
|
|
265
|
-
|
|
266
|
-
```javascript
|
|
267
|
-
new BkOpenTelemetry({
|
|
268
|
-
transport: {
|
|
269
|
-
endpoint: 'https://your-otlp-collector',
|
|
270
|
-
},
|
|
271
|
-
plugins: {
|
|
272
|
-
httpBody: {
|
|
273
|
-
maxBodySize: 4 * 1024,
|
|
274
|
-
redact: ({ body, type, url, status, truncated }) => {
|
|
275
|
-
return body.replace(/password=[^&]+/g, 'password=***').replace(/token=[^&]+/g, 'token=***');
|
|
276
|
-
},
|
|
95
|
+
context: {
|
|
96
|
+
user: { id: window.USER_ID },
|
|
97
|
+
attributes: {
|
|
98
|
+
page: () => ({ 'biz.module': 'order' }),
|
|
99
|
+
metric: () => ({ 'biz.app': 'order-center' }),
|
|
277
100
|
},
|
|
278
101
|
},
|
|
279
|
-
});
|
|
280
|
-
```
|
|
281
|
-
|
|
282
|
-
配置项:
|
|
283
|
-
|
|
284
|
-
- `httpBody: true`: 使用默认配置开启。
|
|
285
|
-
- `httpBody.maxBodySize`: 单个请求或响应 body 最大采集长度,默认 `10 * 1024` 字符。
|
|
286
|
-
- `httpBody.redact`: body 上报前的脱敏函数,必须返回字符串。
|
|
287
|
-
|
|
288
|
-
`redact` 入参:
|
|
289
|
-
|
|
290
|
-
- `body`: 已截断后的 body 字符串。
|
|
291
|
-
- `type`: `request` 或 `response`。
|
|
292
|
-
- `url`: 请求 URL。
|
|
293
|
-
- `method`: 请求方法。
|
|
294
|
-
- `status`: 响应状态码,网络错误时可能为空。
|
|
295
|
-
- `contentType`: body 的 content-type。
|
|
296
|
-
- `truncated`: 是否被 `maxBodySize` 截断。
|
|
297
|
-
|
|
298
|
-
建议只在排障需要时开启 `httpBody`,并务必处理密码、token、手机号等敏感信息。
|
|
299
|
-
|
|
300
|
-
## 8. 加公共属性和脱敏
|
|
301
|
-
|
|
302
|
-
公共属性适合放业务线、模块、页面类型等每条数据都想带上的信息。
|
|
303
|
-
|
|
304
|
-
```javascript
|
|
305
|
-
new BkOpenTelemetry({
|
|
306
|
-
transport: {
|
|
307
|
-
endpoint: 'https://your-otlp-collector',
|
|
308
|
-
},
|
|
309
|
-
attributes: {
|
|
310
|
-
page: () => ({
|
|
311
|
-
'biz.module': 'order',
|
|
312
|
-
'rum.page.host': location.host,
|
|
313
|
-
'rum.page.path': location.pathname,
|
|
314
|
-
}),
|
|
315
|
-
metric: () => ({
|
|
316
|
-
'biz.metric_source': 'rum',
|
|
317
|
-
}),
|
|
318
|
-
error: () => ({
|
|
319
|
-
'biz.error_source': 'browser',
|
|
320
|
-
}),
|
|
321
|
-
custom: () => ({
|
|
322
|
-
'biz.team': 'demo',
|
|
323
|
-
}),
|
|
324
|
-
},
|
|
325
102
|
privacy: {
|
|
326
|
-
|
|
327
|
-
redactAttributes: attributes => {
|
|
103
|
+
redactAttributes(attributes) {
|
|
328
104
|
const next = { ...attributes };
|
|
329
|
-
|
|
330
|
-
if (typeof next[key] === 'string') {
|
|
331
|
-
next[key] = next[key].replace(/\b\d{11}\b/g, '***');
|
|
332
|
-
}
|
|
333
|
-
}
|
|
105
|
+
delete next['biz.secret'];
|
|
334
106
|
return next;
|
|
335
107
|
},
|
|
336
108
|
},
|
|
337
109
|
});
|
|
338
110
|
```
|
|
339
111
|
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
- `attributes.page`: 页面、接口、资源、错误等 RUM 数据都会带上。
|
|
343
|
-
- `attributes.metric`: Web Vitals、Long Task、Route Timing、WebSocket 等 metric 会带上。
|
|
344
|
-
- `attributes.error`: JS 错误、白屏、CSP 等错误类数据会带上。
|
|
345
|
-
- `attributes.custom`: `reportCustomEvent` 上报的自定义事件会带上。
|
|
346
|
-
|
|
347
|
-
`privacy` 配置项:
|
|
348
|
-
|
|
349
|
-
- `privacy.redactUrl`: 处理 URL,例如 `url.full`、`document.referrer`、资源 URL。
|
|
350
|
-
- `privacy.redactAttributes`: 处理 span 和 log 属性。适合兜底清理敏感字段。
|
|
351
|
-
- `plugins.httpBody.redact`: 只处理请求和响应 body。
|
|
352
|
-
|
|
353
|
-
脱敏顺序可以简单理解为:URL 先走 `redactUrl`,属性整体再走 `redactAttributes`。
|
|
354
|
-
|
|
355
|
-
## 9. 配置设备和会话
|
|
356
|
-
|
|
357
|
-
`device` 和 `session` 默认开启,一般不需要配置。多应用共用同一域名时,可以自定义 storage key。
|
|
358
|
-
|
|
359
|
-
```javascript
|
|
360
|
-
new BkOpenTelemetry({
|
|
361
|
-
transport: {
|
|
362
|
-
endpoint: 'https://your-otlp-collector',
|
|
363
|
-
},
|
|
364
|
-
plugins: {
|
|
365
|
-
device: {
|
|
366
|
-
storageKey: 'DEMO_DEVICE_ID',
|
|
367
|
-
},
|
|
368
|
-
session: {
|
|
369
|
-
storageKey: 'DEMO_SESSION',
|
|
370
|
-
inactivityMs: 30 * 60 * 1000,
|
|
371
|
-
maxLifetimeMs: 24 * 60 * 60 * 1000,
|
|
372
|
-
},
|
|
373
|
-
},
|
|
374
|
-
});
|
|
375
|
-
```
|
|
376
|
-
|
|
377
|
-
`device` 配置项:
|
|
378
|
-
|
|
379
|
-
- `device: true`: 使用默认设备配置。
|
|
380
|
-
- `device.storageKey`: 设备 ID 的 localStorage key,默认 `BK_RUM_DEVICE_ID`。
|
|
381
|
-
- 设备 ID 跨会话持久,会写入 `device.id`。
|
|
382
|
-
|
|
383
|
-
`session` 配置项:
|
|
384
|
-
|
|
385
|
-
- `session: true`: 使用默认会话配置。
|
|
386
|
-
- `session.storageKey`: 会话 storage key。默认会按上报 endpoint host 自动生成隔离后缀。
|
|
387
|
-
- `session.inactivityMs`: 用户不活跃多久后创建新会话,默认 `30` 分钟。
|
|
388
|
-
- `session.maxLifetimeMs`: 会话最长持续时间,默认 `24` 小时。
|
|
112
|
+
生产接入至少确认以下事项:
|
|
389
113
|
|
|
390
|
-
|
|
114
|
+
1. `getPathGroup` 已把动态 ID 转成低基数路由模板。
|
|
115
|
+
2. 跨域 Trace Header 白名单足够精确,服务端 CORS 已放行 `traceparent`。
|
|
116
|
+
3. `user.id`、URL、错误和业务属性满足隐私要求;HTTP Body 默认保持关闭。
|
|
117
|
+
4. SPA 的 `blankScreen.rootSelector` 指向真实挂载节点。
|
|
118
|
+
5. 同一页面只运行一个实例,避免重复 patch Fetch/XHR/WebSocket。
|
|
391
119
|
|
|
392
|
-
##
|
|
120
|
+
## 手动事件与 View
|
|
393
121
|
|
|
394
|
-
|
|
122
|
+
```ts
|
|
123
|
+
bkOT.setUser({ id: 'user-001' });
|
|
395
124
|
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
attributes: {
|
|
400
|
-
'biz.order_id': 'O20260527001',
|
|
401
|
-
'biz.order_amount': 199,
|
|
402
|
-
},
|
|
125
|
+
bkOT.reportAction({
|
|
126
|
+
name: '立即购买',
|
|
127
|
+
attributes: { 'biz.order_id': 'O20260716001' },
|
|
403
128
|
});
|
|
404
|
-
```
|
|
405
|
-
|
|
406
|
-
### 自定义失败事件
|
|
407
129
|
|
|
408
|
-
```javascript
|
|
409
130
|
bkOT.reportCustomEvent({
|
|
410
131
|
name: 'order.checkout',
|
|
411
|
-
attributes: {
|
|
412
|
-
'biz.order_id': 'O20260527001',
|
|
413
|
-
},
|
|
414
|
-
error: new Error('库存不足'),
|
|
415
|
-
});
|
|
416
|
-
```
|
|
417
|
-
|
|
418
|
-
### 手动上报用户操作
|
|
419
|
-
|
|
420
|
-
```javascript
|
|
421
|
-
bkOT.reportAction({
|
|
422
|
-
type: 'click',
|
|
423
|
-
targetText: '立即购买',
|
|
424
|
-
targetTag: 'button',
|
|
425
|
-
attributes: {
|
|
426
|
-
'biz.order_id': 'O20260527001',
|
|
427
|
-
},
|
|
428
|
-
});
|
|
429
|
-
```
|
|
430
|
-
|
|
431
|
-
说明:
|
|
432
|
-
|
|
433
|
-
- `reportCustomEvent.name`: 事件名,会生成 `custom.${name}` span。
|
|
434
|
-
- `reportCustomEvent.attributes`: 业务属性,会和 `attributes.custom` 合并。
|
|
435
|
-
- `reportCustomEvent.error`: 传入后事件结果会标记为 error,并记录 exception。
|
|
436
|
-
- `reportAction.type`: 操作类型,会生成 `action.${type}` span。
|
|
437
|
-
- 未命中采样时,手动上报事件会被静默丢弃;`debug: true` 时会打印提示。
|
|
438
|
-
|
|
439
|
-
## 11. 控制采样、调试和上报
|
|
440
|
-
|
|
441
|
-
```javascript
|
|
442
|
-
new BkOpenTelemetry({
|
|
443
|
-
debug: true,
|
|
444
|
-
enabled: true,
|
|
445
|
-
sampling: {
|
|
446
|
-
rate: 0.2,
|
|
447
|
-
},
|
|
448
|
-
spanProcessor: 'batch',
|
|
449
|
-
spanBatch: {
|
|
450
|
-
maxQueueSize: 2048,
|
|
451
|
-
maxExportBatchSize: 512,
|
|
452
|
-
scheduledDelayMillis: 5000,
|
|
453
|
-
exportTimeoutMillis: 30000,
|
|
454
|
-
},
|
|
455
|
-
transport: {
|
|
456
|
-
endpoint: 'https://your-otlp-collector',
|
|
457
|
-
token: 'your-report-token',
|
|
458
|
-
headers: {
|
|
459
|
-
'X-Biz-ID': 'demo',
|
|
460
|
-
},
|
|
461
|
-
signals: {
|
|
462
|
-
traces: {
|
|
463
|
-
timeoutMillis: 10000,
|
|
464
|
-
},
|
|
465
|
-
metrics: {
|
|
466
|
-
concurrencyLimit: 2,
|
|
467
|
-
},
|
|
468
|
-
},
|
|
469
|
-
},
|
|
470
|
-
});
|
|
471
|
-
```
|
|
472
|
-
|
|
473
|
-
常用控制项:
|
|
474
|
-
|
|
475
|
-
- `enabled`: 是否启用 SDK,默认 `true`。设为 `false` 后不会启动采集和上报。
|
|
476
|
-
- `debug`: 是否在控制台输出 exporter 数据和插件异常,默认 `false`。
|
|
477
|
-
- `sampling.rate`: 采样率,范围 `0 - 1`,默认 `1`。
|
|
478
|
-
- `spanProcessor`: trace processor 模式,默认 `batch`。本地调试可用 `simple`。
|
|
479
|
-
- `spanBatch`: `batch` 模式的批量上报配置。
|
|
480
|
-
- `transport.endpoint`: 上报根地址(不含路径前缀),默认 `http://localhost:4318`。SDK 会追加 `/v1/rum`、`/v1/metrics`、`/v1/logs`。单信号自定义 URL 时不再拼接。
|
|
481
|
-
- `transport.token`: 默认鉴权 token。
|
|
482
|
-
- `transport.headers`: 所有信号共用请求头。
|
|
483
|
-
- `transport.signals.traces/metrics/logs`: 分别配置某一类信号。
|
|
484
|
-
|
|
485
|
-
采样结果会在一次浏览器会话中保持稳定。`rate < 1` 时,SDK 会把采样结果写入 `sessionStorage`;不可用时降级到内存缓存。
|
|
486
|
-
|
|
487
|
-
如果三类信号要发到不同地址:
|
|
488
|
-
|
|
489
|
-
```javascript
|
|
490
|
-
new BkOpenTelemetry({
|
|
491
|
-
transport: {
|
|
492
|
-
endpoint: 'https://your-otlp-collector',
|
|
493
|
-
token: 'your-report-token',
|
|
494
|
-
signals: {
|
|
495
|
-
endpoints: {
|
|
496
|
-
traces: 'https://trace.example.com/v1/rum',
|
|
497
|
-
metrics: 'https://metric.example.com/v1/metrics',
|
|
498
|
-
logs: 'https://log.example.com/v1/logs',
|
|
499
|
-
},
|
|
500
|
-
},
|
|
501
|
-
},
|
|
502
|
-
});
|
|
503
|
-
```
|
|
504
|
-
|
|
505
|
-
请求头优先级为:`transport.token` 默认头 < `transport.headers` < 单信号 `headers`。
|
|
506
|
-
|
|
507
|
-
## 12. 控制启动和生命周期
|
|
508
|
-
|
|
509
|
-
默认 `autoStart: true`。如果要先注册自定义插件或 instrumentation,再启动 SDK,可以关闭自动启动。
|
|
510
|
-
|
|
511
|
-
```javascript
|
|
512
|
-
const bkOT = new BkOpenTelemetry({
|
|
513
|
-
autoStart: false,
|
|
514
|
-
transport: {
|
|
515
|
-
endpoint: 'https://your-otlp-collector',
|
|
516
|
-
},
|
|
517
|
-
});
|
|
518
|
-
|
|
519
|
-
await bkOT.start();
|
|
520
|
-
```
|
|
521
|
-
|
|
522
|
-
生命周期方法:
|
|
523
|
-
|
|
524
|
-
```javascript
|
|
525
|
-
await bkOT.flush();
|
|
526
|
-
await bkOT.shutdown();
|
|
527
|
-
```
|
|
528
|
-
|
|
529
|
-
- `start`: 启动 provider、instrumentation 和插件。重复调用会直接返回。
|
|
530
|
-
- `flush`: 立即刷新插件、trace、metric、log。
|
|
531
|
-
- `shutdown`: 先刷新,再卸载插件、事件监听和 instrumentation。关闭后不能再次启动同一个实例。
|
|
532
|
-
|
|
533
|
-
## 13. 扩展插件
|
|
534
|
-
|
|
535
|
-
普通接入方通常不需要扩展插件。只有默认采集不满足时,再使用插件能力。
|
|
536
|
-
|
|
537
|
-
```javascript
|
|
538
|
-
import { BkOpenTelemetry, createPlugin } from '@blueking/open-telemetry';
|
|
539
|
-
|
|
540
|
-
const plugin = createPlugin({
|
|
541
|
-
name: 'demo-plugin',
|
|
542
|
-
init(context) {
|
|
543
|
-
context.setRuntimeAttributes({
|
|
544
|
-
'biz.plugin_enabled': true,
|
|
545
|
-
});
|
|
546
|
-
|
|
547
|
-
const span = context.startSpan('demo.plugin_ready', {
|
|
548
|
-
'biz.plugin': 'demo',
|
|
549
|
-
});
|
|
550
|
-
span.end();
|
|
551
|
-
},
|
|
552
|
-
});
|
|
553
|
-
|
|
554
|
-
const bkOT = new BkOpenTelemetry({
|
|
555
|
-
autoStart: false,
|
|
556
|
-
plugins: {
|
|
557
|
-
custom: [plugin],
|
|
558
|
-
},
|
|
559
|
-
transport: {
|
|
560
|
-
endpoint: 'https://your-otlp-collector',
|
|
561
|
-
},
|
|
132
|
+
attributes: { 'biz.order_amount': 199 },
|
|
562
133
|
});
|
|
563
|
-
|
|
564
|
-
await bkOT.start();
|
|
565
|
-
```
|
|
566
|
-
|
|
567
|
-
也可以在 `start()` 前链式注册:
|
|
568
|
-
|
|
569
|
-
```javascript
|
|
570
|
-
bkOT.use(plugin);
|
|
571
134
|
```
|
|
572
135
|
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
- `context.startSpan`: 创建 span。
|
|
576
|
-
- `context.emitLog`: 上报 log,并自动带上运行期公共属性和脱敏。
|
|
577
|
-
- `context.meter`: 创建 metric。
|
|
578
|
-
- `context.setRuntimeAttributes`: 更新后续数据都会携带的公共属性。
|
|
579
|
-
- `context.getRuntimeAttributes`: 获取当前公共属性快照。
|
|
580
|
-
- `context.setUser`: 更新用户上下文。
|
|
581
|
-
- `context.setView`: 更新 View 上下文。
|
|
582
|
-
|
|
583
|
-
## 14. 接入原生 OpenTelemetry Instrumentation
|
|
584
|
-
|
|
585
|
-
```javascript
|
|
586
|
-
import { BkOpenTelemetry } from '@blueking/open-telemetry';
|
|
587
|
-
import { MyCustomInstrumentation } from './my-custom-instrumentation';
|
|
136
|
+
手动 View 最稳妥的接入方式是在 SDK 启动并建立 Session 后创建:
|
|
588
137
|
|
|
138
|
+
```ts
|
|
589
139
|
const bkOT = new BkOpenTelemetry({
|
|
140
|
+
application: { name: 'manual-view-app' },
|
|
590
141
|
autoStart: false,
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
},
|
|
594
|
-
transport: {
|
|
595
|
-
endpoint: 'https://your-otlp-collector',
|
|
596
|
-
},
|
|
142
|
+
transport: { endpoint: 'https://rum-collector.example.com' },
|
|
143
|
+
tracking: { view: { tracking: 'manual' } },
|
|
597
144
|
});
|
|
598
145
|
|
|
599
146
|
await bkOT.start();
|
|
147
|
+
bkOT.startView({ name: '订单详情', url: location.href });
|
|
600
148
|
```
|
|
601
149
|
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
```javascript
|
|
605
|
-
bkOT.useInstrumentation(new MyCustomInstrumentation());
|
|
606
|
-
```
|
|
607
|
-
|
|
608
|
-
注意:`use` 和 `useInstrumentation` 必须在 `start()` 前调用。如果使用默认自动启动,请改成 `autoStart: false`。
|
|
609
|
-
|
|
610
|
-
## 15. 完整配置速查
|
|
611
|
-
|
|
612
|
-
```javascript
|
|
613
|
-
new BkOpenTelemetry({
|
|
614
|
-
app: {
|
|
615
|
-
name: 'demo-app',
|
|
616
|
-
environment: 'production',
|
|
617
|
-
version: '1.0.0',
|
|
618
|
-
},
|
|
619
|
-
user: {
|
|
620
|
-
id: 'user-001',
|
|
621
|
-
},
|
|
622
|
-
transport: {
|
|
623
|
-
endpoint: 'https://your-otlp-collector',
|
|
624
|
-
token: 'your-report-token',
|
|
625
|
-
headers: {},
|
|
626
|
-
signals: {
|
|
627
|
-
endpoints: {
|
|
628
|
-
traces: 'https://your-otlp-collector/v1/rum',
|
|
629
|
-
metrics: 'https://your-otlp-collector/v1/metrics',
|
|
630
|
-
logs: 'https://your-otlp-collector/v1/logs',
|
|
631
|
-
},
|
|
632
|
-
traces: {
|
|
633
|
-
headers: {},
|
|
634
|
-
timeoutMillis: 10000,
|
|
635
|
-
concurrencyLimit: 2,
|
|
636
|
-
},
|
|
637
|
-
metrics: {},
|
|
638
|
-
logs: {},
|
|
639
|
-
},
|
|
640
|
-
},
|
|
641
|
-
enabled: true,
|
|
642
|
-
autoStart: true,
|
|
643
|
-
debug: false,
|
|
644
|
-
sampling: {
|
|
645
|
-
rate: 1,
|
|
646
|
-
},
|
|
647
|
-
spanProcessor: 'batch',
|
|
648
|
-
spanBatch: {
|
|
649
|
-
maxQueueSize: 2048,
|
|
650
|
-
maxExportBatchSize: 512,
|
|
651
|
-
scheduledDelayMillis: 5000,
|
|
652
|
-
exportTimeoutMillis: 30000,
|
|
653
|
-
},
|
|
654
|
-
route: {
|
|
655
|
-
getPathGroup: url => new URL(url, location.href).pathname,
|
|
656
|
-
},
|
|
657
|
-
attributes: {
|
|
658
|
-
page: () => ({}),
|
|
659
|
-
metric: () => ({}),
|
|
660
|
-
error: () => ({}),
|
|
661
|
-
custom: () => ({}),
|
|
662
|
-
},
|
|
663
|
-
privacy: {
|
|
664
|
-
redactUrl: url => url,
|
|
665
|
-
redactAttributes: attributes => attributes,
|
|
666
|
-
},
|
|
667
|
-
instrumentations: {
|
|
668
|
-
documentLoad: true,
|
|
669
|
-
fetch: true,
|
|
670
|
-
xhr: true,
|
|
671
|
-
userInteraction: true,
|
|
672
|
-
},
|
|
673
|
-
plugins: {
|
|
674
|
-
pageView: true,
|
|
675
|
-
resource: true,
|
|
676
|
-
error: true,
|
|
677
|
-
webVitals: true,
|
|
678
|
-
blankScreen: true,
|
|
679
|
-
device: true,
|
|
680
|
-
session: true,
|
|
681
|
-
action: false,
|
|
682
|
-
httpBody: false,
|
|
683
|
-
longTask: false,
|
|
684
|
-
routeTiming: false,
|
|
685
|
-
cspViolation: false,
|
|
686
|
-
websocket: false,
|
|
687
|
-
},
|
|
688
|
-
});
|
|
689
|
-
```
|
|
690
|
-
|
|
691
|
-
配置默认值:
|
|
692
|
-
|
|
693
|
-
- `autoStart`: 默认 `true`。
|
|
694
|
-
- `enabled`: 默认 `true`。
|
|
695
|
-
- `debug`: 默认 `false`。
|
|
696
|
-
- `sampling.rate`: 默认 `1`。
|
|
697
|
-
- `spanProcessor`: 默认 `batch`。
|
|
698
|
-
- `transport.endpoint`: 默认 `http://localhost:4318`。
|
|
699
|
-
- `app.environment`: 默认 `production`。
|
|
700
|
-
- `app.name`: 默认 `unknown_service`。
|
|
150
|
+
`reportAction()`、`reportCustomEvent()` 和 View 控制方法均受 Session 采样/有效状态约束。调试时先使用 `session.sampleRate: 1`。
|
|
701
151
|
|
|
702
|
-
##
|
|
152
|
+
## 文档导航
|
|
703
153
|
|
|
704
|
-
|
|
154
|
+
| 目标 | 文档 |
|
|
155
|
+
| --- | --- |
|
|
156
|
+
| 首次接入 | [快速上手](./wikis/getting-started.md) |
|
|
157
|
+
| 判断能采什么、默认是否开启、产出哪类信号 | [能力矩阵](./wikis/capabilities.md) |
|
|
158
|
+
| 理解初始化、插件顺序、上下文、过滤和上报数据流 | [架构与数据流](./wikis/architecture.md) |
|
|
159
|
+
| 查完整配置、默认值和约束 | [配置参考](./wikis/configuration.md) |
|
|
160
|
+
| 查公开方法与导出符号 | [API 参考](./wikis/api.md) |
|
|
161
|
+
| 查精确 Span / Metric / Log 名和字段 | [遥测参考](./wikis/telemetry-reference.md) |
|
|
162
|
+
| 隐私、Consent 和低基数字段 | [隐私与公共属性](./wikis/privacy-attributes.md) |
|
|
163
|
+
| 没有数据或数据异常 | [调试与排障](./wikis/troubleshooting.md) |
|
|
705
164
|
|
|
706
|
-
|
|
707
|
-
2. 再配置 `route.getPathGroup`,避免 URL 动态 ID 导致维度过高。
|
|
708
|
-
3. 按业务需要开启 `routeTiming`、`longTask`、`action`、`websocket`。
|
|
709
|
-
4. 排障时再开启 `httpBody`,并先做好脱敏。
|
|
710
|
-
5. 最后补充 `attributes` 和 `privacy`,统一业务维度和敏感信息处理。
|
|
165
|
+
完整 Wiki 入口见 [`wikis/`](./wikis/README.md)。文档以当前 `src/` 和 `src/index.ts` 公开导出为事实来源,不承诺历史配置兼容。
|