SuperAPI AI 工具集

dt-obs-react-native

部署与运维

查看项目

更新于 10-15 14:15

技能介绍

用途

该技能用于将 Dynatrace React Native 插件集成到现有的 React Native 或 Expo 项目中,完成从依赖安装到原生配置的整套接入流程。

前置条件

  • Node.js 16.0+ 且 npm 在 PATH 中可用
  • 已有 React Native 项目(v0.68+)或 Expo 项目(v45+),项目根目录存在 package.json
  • 存在 android/ 与 ios/ 平台文件夹(Expo 托管工作流需先执行 npx expo prebuild)
  • 拥有可访问 Experience Vitals 的 Dynatrace 环境(用于获取 applicationId 和 beaconUrl,或下载 dynatrace.config.js)
  • 可访问 Experience Vitals → Mobile 配置应用设置(Data Privacy、Enablement and Cost Control)
  • iOS 构建需 macOS 与 CocoaPods

主要能力与使用方式

技能按顺序引导完成以下步骤,并在每个决策点与用户交互,且要求先读取实际项目文件再提出修改建议:

  1. 检查现有 dynatrace.config.js:若存在则读取并展示 applicationId 与 beaconUrl,确认是否匹配目标环境;同时检查 userOptIn(Android)与 DTXUserOptIn(iOS)。
  2. 获取 dynatrace.config.js(仅当文件不存在时):可选从控制台下载(Experience Vitals → New Frontend → Mobile,选择 React Native 平台并配置监控能力后下载),或手动提供凭据(参考 references/config-js.md 模板)。
  3. 安装插件:读取 package.json,若未安装则运行 npm install @dynatrace/react-native-plugin;若位于 devDependencies 则移除后重新安装(运行时必需)。
  4. 安装 iOS pods(仅 macOS):cd ios && pod install && cd ..。
  5. 在 babel.config.js 注册 Babel 插件:将 @dynatrace/react-native-plugin/instrumentation/BabelPluginDynatrace 加入 plugins 数组,且必须位于 react-native-reanimated/plugin 之前(reanimated 必须最后)。若 useLegacyJscodeshift: true 或已配置 metro.config.js 的 babelTransformerPath 则跳过。
  6. 注册 JSX runtime:Expo 项目在 babel-preset-expo 上设置 jsxImportSource;裸 React Native 项目(metro 0.72.0+)添加 @babel/plugin-transform-react-jsx 并设置 importSource。插件顺序为 JSX runtime → BabelPluginDynatrace → reanimated。修改后需重置 Metro 缓存:npx react-native start --reset-cache。
  7. 运行 npx instrumentDynatrace:读取 dynatrace.config.js 并自动配置 Android build.gradle 与 iOS Info.plist;配置变更后需重新运行。Expo 若无原生文件夹需先 prebuild。
  8. 手动 SDK 启动(仅当 autoStart: false):在应用入口文件顶层调用 Dynatrace.start(new ConfigurationBuilder('<BEACON_URL>', '<APPLICATION_ID>').buildConfiguration()),值须与配置文件一致。
  9. 启用导航追踪:若存在 @react-navigation/native 且 navigation.enabled 未设为 true,则在 dynatrace.config.js 的 react.navigation 中启用,然后重新运行 instrumentDynatrace。
  10. 隐私选项调用(仅当 userOptIn: true):参考 references/user-opt-in.md 应用 applyUserPrivacyOptions。
  11. 验证:参考 references/verification.md 检查清单,若无数据则按故障排查步骤处理。

适用场景

需要在 React Native 或 Expo 移动应用中接入 Dynatrace 监控(崩溃报告、用户行为追踪、网络监控、导航视图追踪等)的开发者。

限制

  • 需具备可用的 Dynatrace 环境与 Experience Vitals 访问权限
  • iOS 构建仅限 macOS 且需 CocoaPods
  • Expo 托管工作流需先执行 prebuild 生成原生文件夹
  • 手动启动(autoStart: false)会错过原生应用启动事件及 start() 调用前的交互
  • 自动视图追踪依赖 @react-navigation/native(v5–v7),否则需使用 Dynatrace.startView() 手动追踪
  • 具体收费、价格等信息暂未提供