SuperAPI AI 工具集

upgrade-browser-sdk-v6

前端与建站

查看项目

更新于 10-16 01:58

技能介绍

用途

该技能提供从 Datadog Browser SDK v5 到 v6 的系统化迁移指南,按步骤 1 至 6 顺序执行,每一步都包含用于定位受影响代码的搜索模式。适用于遇到 useCrossSiteSessionCookie、sendLogsAfterSessionExpiration 等已移除选项,或需要处理 v6 默认行为变更、Session Replay 懒加载、CORS 与 CSP 配置更新的场景。

主要能力

步骤 1:更新 SDK 版本

CDN 方式需更新 script src URL,例如将 datadoghq-browser-agent.com/us1/v5/datadog-rum.js 替换为 datadoghq-browser-agent.com/us1/v6/datadog-rum.js,datadog-logs.js 与 datadog-rum-slim.js 同理。us1 可替换为 eu1、us3、us5、ap1、ap2。US1-FED 使用无站点前缀的扁平模式:datadog-rum-v6.js、datadog-logs-v6.js、datadog-rum-slim-v6.js。

npm 方式需更新 package.json 依赖:"@datadog/browser-rum": "^6.0.0"、"@datadog/browser-logs": "^6.0.0"、"@datadog/browser-rum-slim": "^6.0.0",然后运行包管理器并重新构建。若使用框架集成,也需升级至 v6,如 @datadog/browser-rum-react。

步骤 2:移除废弃选项

Core 中移除 useCrossSiteSessionCookie,替换为 usePartitionedCrossSiteSessionCookie。Logs 中移除 sendLogsAfterSessionExpiration,直接删除;v6 中日志始终在会话过期后发送(不带会话 ID),该选项不再需要。

步骤 3:更新变更的默认值

3a. trackUserInteractions、trackResources、trackLongTasks 默认变为 true。v5 中默认为 false,v6 中开箱即启用,不影响计费。若要保留 v5 行为,仅对 v5 中未启用的选项显式设为 false。

3b. traceContextInjection 默认变为 "sampled"。v5 中为所有请求注入 trace context,v6 中仅为采样追踪注入。若 traceSampleRate 为 100%(默认值),无影响。保留 v5 行为可设置 traceContextInjection: 'all'。

3c. tracecontext propagator 新增 tracestate 头。服务器需接受该头,将其添加到现有 Access-Control-Allow-Headers 中,不要替换完整列表。

3d. site 参数为强类型。传入非标准值会报类型错误,非标准 intake URL 应使用 proxy。

步骤 4:处理 Session Replay 懒加载

Session Replay 现通过动态导入懒加载,仅为采样回放的会话加载模块,减小其他会话的包体积。npm 方式需确保打包器支持动态导入(代码分割),Webpack、Esbuild、Rollup、Parcel 等现代打包器均支持。CDN 方式无需代码更改,SDK 在录制时动态加载额外 chunk(如 datadogRecorder-<hash>-datadog-rum.js),如需更新 CSP script-src 规则以允许该 chunk。

步骤 5:审查行为变更(无需代码,但可能需关注)

  • 放弃 IE11 支持:SDK 以 ES2018 为目标构建,移除 polyfill。若需 IE11 支持,继续使用 v5。
  • Long Animation Frames 替代 Long Tasks:在支持的浏览器上收集 Long Animation Frames 而非 Long Tasks,事件类型仍为 long_task。
  • 会话 cookie 过期延长至 1 年:支持匿名用户追踪,设置 trackAnonymousUser: false 可退出。
  • RegExp 和 Event 对象被清理:不再按原样序列化到 context/attributes,需使用字符串表示。
  • 不再收集 Webpack ChunkLoadError:减少 SDK chunk 加载失败噪音,无需操作。

步骤 6:更新基础设施

  • 浏览器支持:ES2018 基线,不再支持 IE11。
  • CORS:若使用 tracecontext propagator,将 tracestate 添加到现有 Access-Control-Allow-Headers。
  • CSP:在 script-src 规则中允许动态加载的 Session Replay chunk(如 datadogRecorder-*-datadog-rum.js)。
  • 打包器配置:确保支持动态导入以实现 Session Replay 懒加载。

使用方式

按步骤 1 至 6 顺序执行,每步使用提供的 grep 搜索模式定位受影响代码。搜索模式覆盖 .html、.js、.ts、.tsx、.jsx、.vue、.svelte 等文件类型。

适用场景

适用于需要将 Datadog Browser SDK 从 v5 迁移到 v6 的前端项目,尤其是使用 CDN 或 npm 安装、使用 Session Replay、分布式追踪、或依赖 v5 默认行为的项目。

限制

  • 若需 IE11 支持,不能升级至 v6,应继续使用 v5。
  • 非标准 intake URL 需改用 proxy,不能直接传 site 参数。
  • 使用 tracecontext propagator 时服务器必须接受 tracestate 头,否则跨域请求会被 CORS 阻止。
  • CSP 受限页面需允许动态 chunk,否则录制会静默失败。
  • 打包器必须支持动态导入,否则 Session Replay 懒加载无法工作。

常见错误

  • 防御性地禁用 trackUserInteractions、trackResources、trackLongTasks:会禁用项目所需功能,这些现在默认为 true,通常正是期望行为。仅在项目明确不需要时才设为 false。
  • Access-Control-Allow-Headers 缺少 tracestate:跨域请求被 CORS 阻止,需在 traceparent 旁添加 tracestate。
  • 未为懒加载的 Session Replay chunk 更新 CSP script-src:录制在 CSP 受限页面静默失败,需允许 datadogRecorder-*-datadog-rum.js。

验证清单

升级后确认:SDK 加载无控制台错误;无已移除选项引用(useCrossSiteSessionCookie、sendLogsAfterSessionExpiration);Session Replay 录制正常(如使用);分布式追踪正常(无 tracestate 头导致的 CORS 错误);包体积减小(移除 IE11 polyfill);长任务仍被收集(在支持的浏览器上现为 Long Animation Frames);无 site 参数类型导致的 TypeScript 错误。