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

SDK 初始化

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

操作步骤

1. 引入 SDK 后,创建配置对象并启动 SDK。一般推荐在应用启动时(入口文件最顶部)即初始化,确保能采集到完整的页面性能数据。
// npm 引入
import TDEM from '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 为必填。url 是采集服务基础地址,支持 http / https(生产环境请使用 HTTPS),SDK 会自行拼接具体协议端点。国内站填 https://dem.rumt-zh.com,详见 上报域名。
userId 与 version 需一并传入。二者缺失不会导致初始化失败,但会使控制台无法按用户 / 版本维度聚合。
SDK 初始化时会请求 POST {url}/api/v1/sample-config 获取采样配置。该请求不决定监控插件是否挂载,插件都会正常挂载;它决定的是各事件是否上报。
未获取到有效配置时,采样行为按以下顺序回落:① localStorage 键 TDEM_SAMPLE_CONFIG 中的缓存(仅对同一 project_key 有效,7天内有效);② 初始化配置中的 sampleConfig(若传入);③ 内置默认。当 sampleConfigPreference 取 local-first 时,① 与 ② 互换,sampleConfig 优先于缓存。
内置默认下事件全部上报,但会话回放为关闭状态:replay.enabled 为 false,与本地 sessionReplay.enabled 取与,因此未成功获取远程配置时,即使本地开启了会话回放也不会生效。
采样配置分 event(事件采样)与 replay(会话回放采样)两部分,其中事件部分决定各事件是否上报:
event.enabled:采样总开关,默认 true。为 false 时所有事件一律丢弃。
event.types[事件类型].sample_rate:按事件类型分别配置的采样率(0 - 100)。取值100全部放行,取值0全部丢弃,其余按比例逐事件随机抽样。未在 types 中显式配置的类型默认按 100 处理。
因此接入后若「页面一条数据都没有」,原因已不是 SDK 未初始化(插件会照常挂载)。此时应确认该项目的 event.enabled 未被关闭,且目标事件类型的 sample_rate 未被配置为0。
采样率字段命名:回放采样率在采样配置中读 replay.experience_sample_rate(0 - 100)。服务端下发时,若该字段缺失,SDK 还会兼容读取旧名 replay.replay_sample_rate(同为 0 - 100);两者同时存在时以 experience_sample_rate 为准。本地 sampleConfig 不做这项兼容:只认 experience_sample_rate,写成 replay_sample_rate 会被忽略,回放采样率退回本地 sessionSampleRate。
取值超出0 - 100时按边界截断:大于100记为100,小于0或非数值记为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。
spa
是否按单页应用(SPA)模式监听路由变化,默认 false。为 true 时,SDK 初始化后会先上报一次当前页 PV,并监听 pushState / replaceState / popstate / hashchange,路由切换时自动上报 PV(携带 navigation_type 与 from_page / to_page)。未开启时不监听路由变化;如需自行控制上报时机,可调用 tdem.reportPageView() 手动上报。
sampleConfigPreference
采样配置来源优先级,取值 'remote-first'(默认)或 'local-first'。仅在未能从服务端取到有效配置时生效,决定回落时缓存与 sampleConfig 谁先:remote-first 先取缓存,local-first 先取 sampleConfig。
sampleConfig
本地采样配置,结构同服务端下发(event + replay)。用于在无法取到服务端配置时指定采样规则,或配合 local-first 覆盖缓存。仅在取不到服务端配置时参与判定。
defaultTags
全局业务标签(键值对),自动合并进每个事件的 tags,单值最长保留1024字符。与事件级 tags 同名时以事件级为准。运行期可用 setTags / removeTags / clearTags 维护。
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 按慢请求上报。
sseStallThresholdMs
SSE 连接卡流阈值(ms),默认 60000;传 0、负数或非数值时按默认值处理。仅调整判定阈值,不控制 SSE 是否采集——SSE 跟随 api 开关,没有独立开关。
说明:
慢请求判定是一条短路链:配置了 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")。资源是否上报只由「资源类型白名单」与「排除上报域名自身」两处决定,不判断是否命中缓存。
SSE 连接监控:由 api 开关统一控制,没有独立开关。开启 api 后,SDK 会接管 XHR / fetch / EventSource:XHR 与 fetch 按响应头 Content-Type 为 text/event-stream 识别,EventSource 连接直接纳入统计(不再判断响应头)。命中的连接按 sse_call 事件上报连接耗时、消息条数、消息间隔分布与卡流情况;发往上报域名自身的请求不纳入统计。
说明:
sse_call 的 event_properties.outcome 有五种取值:
success:正常结束。
http_error:响应状态码 ≥ 400。
transport_error:连接异常中断。
cancelled:主动取消。
stalled:超过阈值未收到新消息。
measurements 除连接总时长 duration 与消息条数 message_count 外,还按消息间隔分桶统计(gap_lt_500_count 至 gap_ge_60000_count),并始终带上 stall_threshold_ms。卡流判定为「距上一条消息超过 api.sseStallThresholdMs」:命中后立即按 stalled 封口上报,同一次连接的后续消息不再重复上报。

用户行为

配置项
说明
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 丢弃该条。

卡顿监控(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.experience_sample_rate(0 - 100,换算 /100)覆盖,超出0 - 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。