帮你快速理解、总结文档立即下载

SDK 初始化

最近更新时间:2026-10-09 14:33:01
本文档已由 AI 辅助审校
我的收藏
本文将为您介绍如何初始化用户体验监控 Web SDK。

操作步骤

1. 引入 SDK 后,创建配置对象并启动 SDK。一般推荐在应用启动时(入口文件最顶部)即初始化,确保能采集到完整的页面性能数据。
// npm 引入
import TDEM from '@tencent/tdem-web-sdk';

const tdem = new TDEM({
id: '<project-key>', // 必填:项目标识,对应 project_key
url: 'https://dem.rumt-zh.com', // 采集服务基础地址(国内站,缺省默认同此值)
userId: '<user-id>', // 必填:业务用户标识(用户维度聚合)
defaultTags: { // 可选:全局业务标签,自动合并到每个事件
channel: 'web',
},
env: 'production', // 可选:运行环境
version: '1.0.0', // 必填:应用版本号(版本对比与分布)
spa: false, // 可选:是否为单页应用(开启后自动监听路由变化上报 PV)
debug: false, // 可选:调试开关
});
2. 初始化后即可自动采集错误、页面性能、Web Vitals、卡顿、白屏、内存等数据,无需额外打点。接口测速、静态资源测速、点击行为、Console、会话回放、挣扎事件监测、WebSocket 错误监控、JSBridge 监控、上报重试等能力默认关闭,需显式开启。
注意:
id 为必填。url 是采集服务基础地址,SDK 会自行拼接具体协议端点;若不传 url,默认使用 https://dem.rumt-zh.com。
userId 与 version 需一并传入。二者缺失不会导致初始化失败,但会使控制台无法按用户 / 版本维度聚合。
SDK 初始化前会先请求 POST {url}/api/v1/config 拉取远程配置,仅在远程返回 enabled=true 时才初始化各监控插件;拉取失败时优先沿用本地缓存的最近一次成功配置,无缓存则偏保守(不上报)。
上述远程配置包含两道闸门,都通过才会有数据:
第一道 enabled:控制台侧是否启用该项目。为假时 SDK 直接跳过初始化,不挂载任何插件。
第二道 tdem_sample_rate:全局事件采样率(0 - 100,在控制台配置,本地无法设置)。取值0或缺失时,即使 enabled=true,SDK 仍会判定为未被采样,所有事件静默丢弃;取值100全部放行;其余按比例随机抽样,且同一会话内结果保持一致(会话续期时重新抽样)。
因此接入后若「控制台已启用、页面却一条数据都没有」,除确认 enabled 外,还需确认该项目的采样率未被配置为0。
建议在用户授权个人信息保护规则后再初始化 SDK。
切勿把真实 project key、采集凭证或生产环境地址提交进代码仓库。

上报域名

请根据项目所在地域选择对应的上报域名。不同站点的数据相互隔离,跨站填写会导致数据无法入库。
站点
上报域名
国内站
https://dem.rumt-zh.com
新加坡站
https://dem.rumt-sg.com
美国站
https://dem.rumt-us.com
接入时填写站点根地址即可,无需拼接路径,SDK 会自行拼接具体协议端点。若不传 url,默认使用国内站 https://dem.rumt-zh.com。

完整配置项说明

以下为 SDK 的全部配置项,按能力分组说明。其中 id / userId / version 需按要求传入,其余为可选配置。

基础配置

除 env、debug 等开关项外,以下配置项均需传入。id 由 SDK 强制校验(作为远程配置与上报的 project_key);userId、version 为业务必填项,缺失虽不影响 SDK 运行,但会导致控制台对应的用户 / 版本维度无法聚合。url 有默认值,aid 由 SDK 自动生成,二者均无需手工传入。
配置项
说明
id
必填。项目标识,对应请求体中的 project_key。
userId
必填。业务用户标识,对应上报体的 context.user_id;未显式传入时会尝试从 Cookie 的 uin / ilive_uin 探测,非腾讯系站点取不到,用户维度将无法聚合。也可在初始化后调用 tdem.setUser() 补写。
aid
设备标识,boolean | string,无需配置,SDK 会自动生成并持久化。传非空字符串时直接采用该值;传 true 或留空时,读取 localStorage 的 TDEM_ID,不存在则生成 UUID 并写回,因此同一浏览器下刷新/重开页面保持同一设备身份。
env
运行环境标识,如 production / test / local。控制台默认只展示 production 数据,其他环境需在环境筛选中切换。
version
必填。应用版本号,对应上报体的 app.version,用于版本对比与版本分布分析;不填时回落字面量1.0.0,所有数据会归入该版本,版本维度失去区分度。
url
统一采集入口基地址,缺省默认国内站 https://dem.rumt-zh.com,详见 上报域名。
delay
上报延迟时间(ms),该时间内的事件会合并批量上报,默认1000。
repeat
重复事件限制次数,默认60。
reportImmediately
是否采集后立即上报,默认 true。
debug
调试模式,开启后 SDK 输出运行日志,默认 false。

错误监控

配置项
说明
onError
是否开启 JS 运行时错误、Promise 错误、资源加载错误监控,默认 true。

性能监控

配置项
说明
pagePerformance
页面性能监控,默认 true。可传对象 { firstScreenInfo: true } 开启首屏时间采集(默认即开启),或传 { urlHandler: () => string } 自定义页面地址获取函数,其返回值将作为上报的 page_url。
webVitals
Web Vitals 监控(LCP/FCP/FID/CLS/INP/TTI),默认 true。可传 { manualReport: true } 改为手动上报。
注意:
pagePerformance.slowThreshold 在已发布版本中不生效(无消费点)。慢页面判定请改用 struggleMonitor.performance 的 slowPageLcpThreshold(默认 4000ms)/ slowPageInpThreshold(默认 500ms)。

接口与资源测速

api:API 接口测速,默认 false。传 true 开启;可传对象 { slowThreshold: 2000 } 设置慢请求阈值,在未配置 isSlowApi 时生效。
api 还支持以下细粒度配置:
配置项
说明
injectTraceHeader
注入链路追踪头,使前端请求与被监控的后端链路串联。
injectTraceUrls / injectTraceIgnoreUrls
追踪注入的白名单 / 忽略列表,元素可为字符串或正则。
traceFlag
链路追踪开关,可传布尔或数值。
ignoreHackReg
忽略劫持的 URL 正则,命中则不接管该请求。
usePerformanceTiming
改用 Resource Timing 计算耗时,而非按请求发起时间。
apiDetail
上报请求参数与响应体明细。
reportRequest
普通成功请求(非慢请求)是否也上报,默认仅上报慢请求与失败请求。
reqHeaders / resHeaders
需一并采集的请求头 / 响应头字段名数组。
reqParamHandler / resBodyHandler
入参 / 响应体的自定义处理函数。
resourceTypeHandler
自定义资源类型判定函数,返回类型字符串。
retCodeHandler
自定义返回码解析函数,需返回 { code, isErr }。
isSlowApi
自定义慢请求判定函数,返回 true 按慢请求上报。
说明:
慢请求判定是一条短路链:配置了 api.isSlowApi 就只以它的返回值为准(不再看阈值);未配置时用 api.slowThreshold(兼容别名 api.apiSlowThreshold);两者都没有时用内置默认1000ms。
assets:静态资源测速,默认 false。传 true 开启;采集 img / css / script / link / audio / video 六类资源的加载耗时与传输体积。命中缓存的资源(transferSize 为 0)仍会上报:其 measurements.transfer_size 不写入(置空),事件属性 is_cached 因内部将 0 归一为 -1 而恒为 "false"(仅资源加载失败路径为 "true")。资源是否上报只由「资源类型白名单」与「排除上报域名自身」两处决定,不判断是否命中缓存。

用户行为

配置项
说明
click
点击事件采集,默认 false。可传 { ignoreIds: ['id1'], ignoreClasses: ['class1'] } 忽略特定元素。
console
控制台日志采集,默认 false。可传 { level: 'error' } 指定采集级别(log/info/warn/error/all),默认 "error"。注意级别是累积的:warn 表示同时采集 error 与 warn,info 为 error + warn + info,log 再叠加 log,并非「仅采集该级别」。

WebSocket 错误监控

配置项
说明
websocket
WebSocket 错误监控,默认 false。传 true 或 { enabled: true } 开启,SDK 会拦截 WebSocket 连接错误并上报。

JSBridge 监控

配置项
说明
bridge
JSBridge 测速监控,默认 false。需传对象指定目标与白名单方法,例如 { target: window.JSBridge, methods: ['callNative'] }。

上报重试

配置项
说明
reportRetry
上报失败重试,默认 false。可传对象自定义策略,默认配置为 maxRetryCount: 10、指数退避重试间隔、重试仍失败时丢弃(whenRetryEndStillFail: 'discard')。

回调钩子

配置项
说明
beforeReport
上报前回调,返回 false 可阻止上报。
beforeRequest
请求发出前处理待上报的日志集合,签名 ({ logs, logType }) => logs | false;可整体替换 logs,或返回 false 丢弃该批。注意它不能修改请求参数——需要改写请求参数的是 modifyRequest。
afterRequest
请求完成后回调。
modifyRequest
请求发出前的改写钩子,签名 (requestOptions) => requestOptions;仅当返回值是「带 url 字段的对象」时才替换请求参数,抛错不会中断链路(仅输出 console.error)。
beforeReportSpeed
测速事件上报前过滤,签名 (log) => boolean,返回 false 丢弃该条。
defaultTags
全局业务标签,随所有事件上报。

卡顿监控(lagMonitor,默认开启)

配置项
说明
enabled
是否开启,默认 true。
threshold
卡顿判定阈值(ms),默认2000。
noResponseThreshold
无响应判定阈值(ms),默认5000。超过该值记为 no_response(event_category 为 error)。与 threshold 存在联动约束:当配置的 noResponseThreshold <= threshold 时,SDK 会静默抬升为 max(5000, threshold + 1) 并输出 relation_conflict 告警。例如把 threshold 设为6000,该值会变成6001,而不是您配置的值。
sampleRate
采样率(0 - 1),默认1。

白屏检测(blankScreen,默认开启)

配置项
说明
enabled
是否开启,默认 true。
containers
检测容器,默认 ['body', 'html', '#app', '#root']。
emptyElementsPercent
空白元素占比阈值(%),默认70。
sameElementsPercent
相同元素占比阈值(%),默认70。
everySideSampleNumber
每边采样点数,默认9。
samePointDepth
相同点判定深度,默认5。
debounceDuration
防抖时长(ms),默认2000。
reDetectInterval
复检间隔(ms),默认2000。
disableSameElementsCheck
是否关闭相同元素检查,默认 true。
ignoreContainers
忽略检测的容器选择器,默认 []。
containerMatchers
容器匹配器,可按标签 / id / class 指定,默认 { tagName: ['body', 'html'], id: ['app', 'root'], className: [] }。
ignoreMatchers
忽略匹配器,结构同 containerMatchers,默认全为空数组。
detectStartPosition
检测起始坐标,默认 { x: 0, y: 0 }。
ignoreElesWhenDomChange
DOM 变更时忽略的元素选择器,默认 []。
customBlankScreenDector
自定义白屏检测函数,返回布尔值;设置后由业务自行判定白屏,默认 null。

内存监控(memoryMonitor,默认开启)

配置项
说明
enabled
是否开启,默认 true。
enableMemoryReport
是否上报内存占用,默认 true。
enableOOMReport
是否上报 OOM,默认 true。
oomThreshold
OOM 判定阈值(MB),默认取 jsHeapSizeLimit 的90%。
memoryReportInterval
内存上报间隔(ms),默认60000。
oomCheckInterval
OOM 检查间隔(ms),默认10000。
monitorPages
仅监控匹配的页面(字符串或正则数组),默认空(全部页面)。
sampleRate
采样率(0 - 1),默认1。

会话回放(sessionReplay,默认关闭)

核心三旋钮:sessionSampleRate(体验流采样)、errorTraceback(错误回溯开关)、errorSampleRate(错误命中率)。
配置项
说明
enabled
是否开启,默认 false;与远程 enabled 做 AND。
sessionSampleRate
体验流采样率(0-1),默认 0.1;可被远程 replay_sample_rate(0-100,换算 /100)覆盖。
errorTraceback
错误回溯开关,默认 true;本期仅本地。
errorSampleRate
首次错误是否触发回溯的概率(0-1),默认 1.0;仅 errorTraceback=true 时生效;本期仅本地。
maskAllInputs
是否遮罩所有输入框,默认 true。
privacy.mask
自定义遮罩文本的 CSS 选择器,传字符串数组(写在 privacy 下)。与内置默认值追加合并,非替换。
privacy.block
自定义阻止录制的 CSS 选择器,传字符串数组(写在 privacy 下)。追加合并。
privacy.ignore
自定义忽略录制的 CSS 选择器,传字符串数组(写在 privacy 下)。追加合并。
slowClickTimeout / slowClickThreshold
慢点击超时 / 阈值,默认7000 / 3000(ms)。
rageClickCount / rageClickWindow
愤怒点击次数 / 时间窗口,默认5 / 1000(ms)。
enableMutationMerge / mutationMergeWindowMs
Mutation 合并开关(默认 false)/ 合并窗口(默认200ms)。
mutationLimit
单次 Mutation 硬限制,默认10000。
useCompression
是否启用 Worker 压缩,默认 false。
eventsCompression
是否启用 events 字段 gzip 压缩,默认 true。
uploadUrl
自定义回放上报地址。
debug
回放调试日志开关,默认 false。
mutationBreadcrumbLimit
Mutation 警告阈值,单次 MutationObserver 回调中 mutation 数量超过此值时记录 breadcrumb 警告,默认750。
checkoutEveryNms
强制生成全量快照的时间间隔(ms),用于控制回放分段与快照密度。
checkoutEveryNth
每累计多少条增量事件强制生成一次全量快照。
onError
回放上报失败回调,签名 (error: Error) => void。
beforeSend
回放上报前回调,签名 (payload) => payload | null;返回 null 可取消本次上报。
privacy
隐私配置对象,见下方 privacy 子配置。

privacy 子配置:

配置项
说明
maskAllInputs
遮罩所有输入框,默认 true。
mask
遮罩文本的 CSS 选择器数组,默认 [".tdem-mask", "[data-tdem-mask]", "[data-sensitive]", ".sensitive", ".private"]。传入值追加合并。
block
阻止录制的 CSS 选择器数组,默认 [".tdem-block", "[data-tdem-block]", ".secret", "[data-secret]", "iframe[srcdoc]:not([src])", ".replayer-wrapper"]。追加合并。
ignore
忽略录制的 CSS 选择器数组,默认 [".tdem-ignore", "[data-tdem-ignore]", "input[type=\\"file\\"]", "input[type=\\"password\\"]"]。追加合并。
maskInputOptions
按输入类型遮罩,默认 { password: true, email: true, tel: true, text: false };与默认值逐键合并(可只覆盖其中几项)。
blockAllMedia
是否屏蔽所有媒体元素,默认 true。开启时把媒体选择器(img,image,svg,video,object,picture,embed,map,audio,link[rel="icon"],link[rel="apple-touch-icon"])并入 blockSelector,并忽略 background-image 样式捕获。
autoDetectSensitiveData
是否启用自动敏感数据检测(手机号 / 身份证 / 邮箱 / 银行卡 / IP),默认 true。置 false 且未自定义 maskTextFn 时,文本脱敏整体关闭。
maskTextFn
自定义文本脱敏函数,签名 (text, element?) => string;在自动脱敏之后应用(可二次加工),二者同时生效。

挣扎事件监测(struggleMonitor,默认关闭)

配置项
说明
enabled
是否开启,默认 false。
ruleVersion
规则版本号,默认 '1.0.0'。
payloadAllowlist
自定义事件 payload 字段白名单。

click 子配置(死点击 / 愤怒点击 / 错误点击检测):

配置项
说明
click.enabled
默认 true。
click.deadClickWindowMs
死点击判定窗口(ms),默认3000。
click.rageClickWindowMs / click.rageClickCount
愤怒点击窗口(1000ms)/ 次数阈值(5)。
click.errorClickWindowMs
错误点击判定窗口(ms),默认3000。
click.resolveOnDomMutation
DOM 变更即视为有效操作,消解死点击,默认 true。
click.resolveOnSpaNavigation
SPA 路由变化即消解,默认 true。
click.resolveOnExternalNavigation
跳转外链或触发下载即消解,默认 true。
click.resolveOnWindowOpen
调用 window.open 即消解,默认 true。
click.resolveOnPageUnload
页面卸载即消解,默认 true。
click.resolveOnFormAction
表单变更或提交即消解,默认 true。
click.resolveOnApiSuccess
接口请求成功即消解,默认 true。
以上7个 resolveOn* 条件(DOM 变更、SPA 路由变化、跳转外链或下载、window.open、页面卸载、表单变更或提交、接口请求成功)任一满足即判定为有效操作,对应死点击不再上报。若业务场景中某类操作不属于「有效的用户意图」(如自动轮询接口成功、埋点触发的 DOM 变更),可将对应项置为 false。
配置项
说明
click.ignoreDeadClickSelectors
追加死点击忽略选择器,默认 []。
click.effectiveActionSelectors
追加有效操作选择器,默认 []。
两个选择器与 HTML 属性 data-tdem-ignore-dead-click / data-tdem-effective-action 会合并消费,属性式标记适合逐个元素标注,选择器式适合批量匹配。

performance 子配置(慢页面检测):

配置项
说明
performance.enabled
默认 true。
performance.slowPageLcpThreshold
慢页面 LCP 阈值(ms),默认4000。
performance.slowPageInpThreshold
慢页面 INP 阈值(ms),默认500。

form 子配置(表单交互异常检测):

配置项
说明
form.enabled
默认 true。
form.fieldIdAttr / form.formIdAttr
字段 / 表单标识属性,默认 'data-field-id' / 'data-form-id'。
form.longFocusThresholdMs
长时间聚焦阈值(ms),默认20000。
form.incompleteMinFieldRatio
未完成表单的最小已填写字段比例,默认0.3。
form.zigzagMinCount
表单来回切换最低次数,默认2。

navigation 子配置(前进后退检测):

配置项
说明
navigation.enabled
默认 true。
navigation.backForwardAsStruggle
默认 true。开启后浏览器前进 / 后退操作会上报 back_forward 类型的挣扎事件,用于识别「用户反复回退说明没找到想要的内容」。

custom 子配置(自定义检测器):

配置项
说明
custom.enabled
默认 true。
custom.detector
自定义检测函数,签名 ({ event, tdem }) => ReportStruggleParams | ReportStruggleParams[] | null | void。入参可拿到当前事件与 SDK 实例,返回一个或多个挣扎参数对象;返回空值表示不产生挣扎事件。SDK 会为返回值自动补齐未填字段:
type 默认 custom_struggle。
ownerType 默认 app。
ownerKey 默认当前页面地址。
ruleVersion 与 payloadAllowlist 继承顶层配置。
detectionSource 固定为 custom。