SuperAPI AI 工具集

dt-setup-react-native

部署与运维

查看项目

更新于 10-14 13:43

技能介绍

用途

本技能用于将 Dynatrace React Native 插件集成到 React Native 或 Expo 项目中,完成从依赖安装、配置生成、Babel 注册、原生文件自动配置到隐私设置与验证的全流程。

前置条件

  • Node.js 16.0+ 及 npm 已加入 PATH。
  • 已有 React Native 项目(v0.68+)或 Expo 项目(v45+),且项目根目录存在 package.json。
  • 存在 android/ 与 ios/ 平台目录(Expo managed 工作流需先执行 npx expo prebuild)。
  • 可访问 Dynatrace 环境的 Experience Vitals,以获取 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. 若不存在配置文件,可选择从控制台下载(Experience Vitals → New Frontend → Mobile,平台选 React Native)或手动提供凭据,参考 references/config-js.md 模板。
  3. 安装插件:npm install @dynatrace/react-native-plugin;若其位于 devDependencies 需移除后重装(运行时必需)。
  4. iOS 在 macOS 上执行 cd ios && pod install && cd ..。
  5. 在 babel.config.js 的 plugins 数组末尾(react-native-reanimated/plugin 之前)注册 '@dynatrace/react-native-plugin/instrumentation/BabelPluginDynatrace';若已存在或 useLegacyJscodeshift: true 则跳过。
  6. 注册 JSX runtime:Expo 项目在 babel-preset-expo 上设置 jsxImportSource: '@dynatrace/react-native-plugin';裸 React Native(metro 0.72.0+)添加 @babel/plugin-transform-react-jsx 并设置 importSource。插件顺序为 JSX 运行时 → BabelPluginDynatrace → react-native-reanimated/plugin(必须最后)。更改后需重置 Metro 缓存:npx react-native start --reset-cache。
  7. 运行 npx instrumentDynatrace,自动配置 Android build.gradle 与 iOS Info.plist;配置变更后需重跑。
  8. 若 autoStart: false,需在入口文件手动调用 Dynatrace.start(new ConfigurationBuilder('<BEACON_URL>', '<APPLICATION_ID>').buildConfiguration());注意值与配置文件一致。
  9. 导航追踪:若存在 @react-navigation/native,可在 dynatrace.config.js 中设置 react.navigation.enabled: true 并重跑 instrumentDynatrace;否则可用 Dynatrace.startView("ScreenName") 手动追踪。
  10. 隐私选项:若 userOptIn: true,参考 references/user-opt-in.md 配置 applyUserPrivacyOptions。
  11. 完成后的默认启用项:崩溃上报、用户操作追踪、网络监控、错误处理、自动启动。
  12. 验证:参考 references/verification.md;5 分钟无数据时按其排查步骤处理。

适用场景

需要为 React Native 或 Expo 移动应用接入 Dynatrace 监控的团队与开发者。

限制

  • 配置与隐私选项依赖 Dynatrace 环境与 Experience Vitals 的可用访问。
  • iOS 构建要求 macOS 与 CocoaPods;Expo managed 需先 prebuild。
  • 自动视图追踪要求 @react-navigation/native(v5–v7)。
  • 手动启动(autoStart: false)会丢失原生应用启动事件及 start() 之前的交互。
  • 关于收费、价格、套餐的信息暂未提供。