本文将为您介绍如何初始化用户体验监控 Web SDK。
操作步骤
1. 引入 SDK 后,创建配置对象并启动 SDK。一般推荐在应用启动时(入口文件最顶部)即初始化,确保能采集到完整的页面性能数据。
// npm 引入import TDEM from '@tencent/tdem-web-sdk';const tdem = new TDEM({id: '<project-key>', // 必填:项目标识,对应 project_keyurl: '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 | |
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。 |