回放原生的会话
Mobile Session Replay通过视像重放每个用户互动,例如自带,刷卡和卷轴,将能见度扩展到您的移动应用程序. 在您的应用程序上可视化地重放用户交互功能,使得复制崩溃和出错更加容易,以及理解用户进行UI改进的行程.
设置
说明:确保您已经设置并初始化 数据犬反应原生 SDK 并启用了视图仪器.
要安装国家预防机制,运行:
npm install @datadog/mobile-react-native-session-replay
要安装 Yarn, 请运行 :
yarn add @datadog/mobile-react-native-session-replay
启用会话重放
启用会话重放、导入并调用 enable 方法与配置。 以下是一个实例:
import { SessionReplay } from "@datadog/mobile-react-native-session-replay";
SessionReplay.enable({
replaySampleRate: sampleRate, // The percentage of sampled replays, in the range 0.0 - 100.0 (Default: 100.0).
textAndInputPrivacyLevel: TextAndInputPrivacyLevel.MASK_ALL, // Defines the way text and input (e.g text fields, checkboxes) should be masked (Default: `MASK_ALL`).
imagePrivacyLevel: ImagePrivacyLevel.MASK_ALL, // Defines the way images should be masked (Default: `MASK_ALL`).
touchPrivacyLevel: TouchPrivacyLevel.HIDE // Defines the way user touches (e.g tap) should be masked (Default: `HIDE`).
});
说明:所有配置属性都是可选的,应当根据应用程序的需要进行调整.
手动启动或停止录音
默认情况下,会话重放会自动开始录制. 然而,如果您喜欢在应用程序的特定点上手动开始录制,您可以使用可选的 startRecordingImmediately 参数如下,以后调用 SessionReplay.startRecording()。您也可以使用 SessionReplay.stopRecording() 随时停止录音.
import { SessionReplay } from "@datadog/mobile-react-native-session-replay";
SessionReplay.enable({
replaySampleRate: sampleRate,
startRecordingImmediately: false
});
// Do something
SessionReplay.startRecording();
SessionReplay.stopRecording();
SVG 支持
会话重放为在您的 React Natural 应用程序中捕获 SVG 图像提供更强大的支持 。 要启用 SVG 跟踪, 您需要设置 Datadog Babel 插件和 Metro 插件 .
先决条件
安装 Datadog Babel 插件 :
npm install @datadog/mobile-react-native-babel-plugin
或与雅恩:
yarn add @datadog/mobile-react-native-babel-plugin
设置 Babel 插件
配置您的 Babel 插件 babel.config.js 以启用 SVG 跟踪:
module.exports = {
presets: ['module:@react-native/babel-preset'],
plugins: [
[
'@datadog/mobile-react-native-babel-plugin',
{
sessionReplay: {
// SVG tracking is disabled by default
// Set to true to enable SVG asset extraction
svgTracking: true
}
}
]
]
};
设置地铁插件
配置您的地铁插件 metro.config.js 以便自动捆绑 SVG 资产:
const { withSessionReplayAssetBundler } = require('@datadog/mobile-react-native-session-replay/metro');
module.exports = withSessionReplayAssetBundler({
/* your existing Metro config */
});
Metro插件在开发和生产建设期间自动监控并捆绑SVG资产.
安装工作流程
设置您的项目或安装新的依赖性后, 请遵循此工作流程, 以确保 SVG 资产被正确生成给本地建筑 :
# 1. Install dependencies
yarn install
# 2. Generate Session Replay SVG assets
npx datadog-generate-sr-assets
# 3. Install iOS pods (if building for iOS)
cd ios && pod install && cd ..
# 4. Run your app
yarn ios
# or
yarn android
这个 datadog-generate-sr-assets CLI 工具扫描您的 SVG 元素的代码库, 并预生成优化将包含在您本地建筑中的资产 .
CLI 选项
这个 datadog-generate-sr-assets 命令支持以下选项:
npx datadog-generate-sr-assets [options]
| 选项 | 别名 | 说明 | 示例 |
|---|---|---|---|
--ignore <pattern> | -i | 扫描时需要忽略的额外光彩图案 。 可多次指定. | npx datadog-generate-sr-assets --ignore "**/legacy/**" --ignore "**/vendor/**" |
--verbose | -v | 为调试启用动词输出 . | npx datadog-generate-sr-assets --verbose |
--path <path> | -p | 要扫描的根目录路径 。 默认当前工作目录 . | npx datadog-generate-sr-assets --path ./src |
--followSymlinks | 在目录 traversal 时跟随符号链接. 默认: 虚假( 符号链接被忽略) . | npx datadog-generate-sr-assets --followSymlinks |
CI/CD说明: 如果您的建筑使用连续集成, 请确保将这些步骤包括在您的 CI 管道中 。 工作流程应为: yarn install → npx datadog-generate-sr-assets → pod install (for iOS) – 构建您的应用程序. 这确保了SVG资产在本土建设过程前被适当生成.
发展 工作流量
在开发过程中,地铁插件自动处理由 Babel 插件创建的 SVG 资产 :
- 用 SVG 元素从
react-native-svg - Babel 插件在构建过程中提取并转换 SVG 节点
- Metro插件检测新的 SVG 资产并自动捆绑
- SVG 图像在会话回放录制中无缝捕获
在开发过程中不需要人工资产管理.