原生反应的 Babel 插件
这个 @datadog/mobile-react-native-babel-plugin 通过使用上下文元数据自动丰富React组件来增强Datadog React Native SDK. 这有助于提高RUM Action跟踪和会话重放等特性的准确性.
设置
说明:确定你已经整合了 数据犬反应原生 SDK。 。 。 .
要安装国家预防机制,运行:
npm install @datadog/mobile-react-native-babel-plugin
要安装 Yarn, 请运行 :
yarn add @datadog/mobile-react-native-babel-plugin
配置贝贝
在 Babel 配置中添加插件 。 根据你的设置,你可能使用 babel.config.js, (中文(简体) ), .babelrc或类似.
示例配置 :
module.exports = {
presets: ['module:@react-native/babel-preset'],
plugins: ['@datadog/mobile-react-native-babel-plugin'] // <-- Add here
};
配置选项
您可以配置插件来调整其处理您的代码的方式, 赋予您对其行为的控制, 并允许您根据您的项目需求来调整它 .
顶级选项
| 选项 | 类型 | 默认 | 说明 |
|---|---|---|---|
actionNameAttribute | 字符串 | – 说吧 – | 用于动作名称的所选属性名称 . |
sessionReplay | 对象 | – 说吧 – | 会话重放配置 . |
components | 对象 | – 说吧 – | 组件跟踪配置. |
sessionReplay 选项
| 选项 | 类型 | 默认 | 说明 |
|---|---|---|---|
svgTracking | 布尔 | 虚假 | 在会话重放时是否跟踪 SVG 资产 . |
components 选项
| 选项 | 类型 | 默认 | 说明 |
|---|---|---|---|
useContent | 布尔 | 真实 | 是否使用组件内容(例如:子,道具)作为动作名. |
useNamePrefix | 布尔 | 真实 | 是否使用组件名前缀动作 . |
tracked | 数组 | – 说吧 – | 特定组件跟踪配置列表. |
components.tracked[] (每个构成部分)
表格中的每个条目 tracked 阵列是一个对象,形状如下:
| 选项 | 类型 | 默认 | 说明 |
|---|---|---|---|
name | 字符串 | – 说吧 – | 要跟踪的组件名称( 例如 ), Button) (中文(简体) ). |
useContent | 布尔 | 从全局继承 | 覆盖 useContent 用于本构成部分. |
useNamePrefix | 布尔 | 从全局继承 | 覆盖 useNamePrefix 用于本构成部分. |
contentProp | 字符串 | – 说吧 – | 用于内容而不是子的属性名( 例如 : "subTitle") (中文(简体) ). |
handlers | 数组 | – 说吧 – | 要跟踪的事件/动作对列表 . |
components.tracked[].handlers[]
| 外地 | 类型 | 说明 |
|---|---|---|
event | 字符串 | 要截取的事件名称( 例如 : "onPress") (中文(简体) ). |
action | 字符串 | RUM 动作名称与此事件关联 . (仅限 "TAP" 正在支持动作) |
示例配置( E)使用配置选项:
module.exports = {
presets: ['module:@react-native/babel-preset'],
plugins: [
[
'@datadog/mobile-react-native-babel-plugin',
{
actionNameAttribute: 'custom-prop-value',
sessionReplay: {
svgTracking: true
},
components: {
useContent: true,
useNamePrefix: true,
tracked: [
{
name: 'CustomButton',
contentProp: 'text'
handlers: [{event: 'onPress', action: 'TAP'}],
},
{
name: 'CustomTextInput',
handlers: [{event: 'onFocus', action: 'TAP'}],
},
{
useNamePrefix: false,
useContent: false,
name: 'Tab',
handlers: [{event: 'onChange', action: 'TAP'}],
},
],
},
},
],
],
};
解决问题
说明: 如果您在旧的 React Industrial 版本上, 在您的工程中使用 Typescription, 您可能需要安装预设 @babel/preset-typescript。 。 。 .
要安装国家预防机制,运行:
npm install @babel/preset-typescript
要安装 Yarn, 请运行 :
yarn add @babel/preset-typescript
然后更新您的 Babel 配置文件, 如使用以下示例 :
module.exports = {
presets: [
'module:@react-native/babel-preset',
'@babel/preset-typescript' // <-- Add here
],
plugins: ['@datadog/mobile-react-native-babel-plugin']
};