> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flashcat.cloud/llms.txt
> Use this file to discover all available pages before exploring further.
# Web SDK 接入指南
> 快速了解如何在 Web 应用中集成 Web RUM SDK，包括 NPM、CDN 异步和 CDN 同步三种接入方式
RUM SDK 支持多种接入方式，您可以根据项目需求选择最适合的方案。
## 接入方式
我们提供三种接入方式：
| 接入方式 | 推荐场景 | 特点 |
| ---------- | --------- | ---------------- |
| **NPM** | 现代 Web 应用 | 与前端代码打包，对页面加载无影响 |
| **CDN 异步** | 有性能目标的应用 | 异步加载，不影响页面性能 |
| **CDN 同步** | 需要完整数据采集 | 同步加载，可捕获所有事件 |
NPM 和 CDN 异步方式可能会错过在 SDK 初始化之前触发的错误、资源和用户操作。如需完整采集，请使用 CDN 同步方式。
## 获取应用凭证
在 Flashduty 控制台的 [RUM 应用管理](https://console.flashcat.cloud/rum/apps)页面：
1. 创建或选择一个 Web 应用
2. 获取以下凭证信息：
* **Application ID** - 应用唯一标识符
* **Client Token** - 客户端访问令牌
## 接入代码
将 `@flashcatcloud/browser-rum` 添加到您的 `package.json` 文件中：
```bash theme={null}
npm install @flashcatcloud/browser-rum
```
然后在应用入口文件中初始化：
```javascript theme={null}
import { flashcatRum } from "@flashcatcloud/browser-rum";
flashcatRum.init({
applicationId: "",
clientToken: "",
service: "",
env: "",
version: "1.0.0",
sessionSampleRate: 100
});
```
将以下代码片段添加到每个需要监控的 HTML 页面的 `` 标签中：
```html theme={null}
```
将以下代码片段添加到 HTML 页面的 `` 标签最前面（在任何其他 `
```
您可以使用 `window.FC_RUM` 检查 SDK 是否加载成功，以便处理加载失败的情况。
## 初始化参数
### 必填参数
应用 ID，在应用管理页面获取
客户端 Token，在应用管理页面获取
服务名称，用于区分不同的服务
### 可选参数
环境标识，如 `production`、`staging` 等
应用版本号
要跟踪的会话百分比：100 为全部，0 为不采集
启用[会话重放](/zh/rum/session-replay/overview)功能的会话百分比
初始用户跟踪同意状态，详见[用户跟踪同意](/zh/rum/sdk/web/advanced-config#用户跟踪同意)
是否手动控制视图创建，详见[覆盖默认视图名称](/zh/rum/sdk/web/advanced-config#覆盖默认-rum-视图名称)
是否自动收集用户操作
是否启用资源事件收集
是否启用长任务事件收集
是否启用跨会话的匿名用户 ID 收集
会话重放隐私策略：`allow` 采集除密码外所有数据，`mask-user-input` 隐藏用户输入框内容，`mask-all` 隐藏所有文本
用于注入跟踪 Headers 的请求 URL 列表，详见[集成分布式追踪](/zh/rum/sdk/web/advanced-config#集成-rum-与分布式追踪)
要跟踪的请求百分比
可选代理 URL，例如：`https://www.proxy.com/path`
是否压缩发送到 Flashduty 的请求，在 Worker 线程中完成
是否将上下文存储在 localStorage 中以跨页面保留
## 应用场景
### 自定义用户标识
使用 `flashcatRum.setUser()` 为当前用户添加标识属性：
```javascript theme={null}
flashcatRum.setUser({
id: '1234',
name: 'John Doe',
email: 'john@doe.com',
plan: 'premium'
});
```
### 添加自定义 TAG
初始化 RUM 后，使用 `setGlobalContextProperty` API 为所有 RUM 事件添加额外的 TAG：
```javascript theme={null}
import { flashcatRum } from "@flashcatcloud/browser-rum";
flashcatRum.setGlobalContextProperty('activity', {
hasPaid: true,
amount: 23.42
});
```
### 发送自定义操作
使用 `addAction` API 创建 RUM 操作并附加上下文属性：
```javascript theme={null}
import { flashcatRum } from "@flashcatcloud/browser-rum";
function onCheckoutButtonClick(cart) {
flashcatRum.addAction("checkout", {
value: cart.value,
items: cart.items
});
}
```
### 自定义添加 Error
您可以通过 `dd_context` 属性为错误对象附加本地上下文：
```javascript theme={null}
const error = new Error("Something went wrong");
error.dd_context = { component: "Menu", param: 123 };
throw error;
```
## 验证接入
打开浏览器开发者工具，查看 Network 面板中是否有 `https://browser.flashcat.cloud/api/v2/rum` 的数据上报请求。
访问 Flashduty 控制台，查看 RUM 应用数据是否正常显示。
在页面上触发一些用户交互（点击、滚动等），验证数据采集是否正常。
数据通常在 2-5 分钟内显示在控制台中。
## 下一步
了解 SDK 的高级配置功能
了解 SDK 收集的数据类型
查看和分析 RUM 数据