React Native 应用程序的移动 APM

Site24x7 的 React Native SDK 允许用户通过在移动应用中添加事务并按组件、个人用户及其会话进行分组，从而跟踪 HTTP 调用、崩溃、屏幕加载时间和自定义数据，以优化应用性能。

前提条件

iOS：最低部署目标应设置为 iOS 10
Android：Android API 级别 16 及以上
React Native：版本 0.60 及以上

1. 入门

请按照以下步骤完成在 React Native 应用中安装 react-native-site24x7-rn。

入门

使用 NPM 安装，请运行以下命令。

$ npm install react-native-site24x7-rn --save

将模块与 React Native 应用链接（安装过程基本自动完成）。
```
`$ react-native link react-native-site24x7-rn`
```

2. iOS 安装步骤

导航到 iOS 文件夹并执行以下命令。

iOS 安装步骤

在您的项目目录 /ios/ 的 podfile 顶部添加源。

source 'https://github.com/site24x7/MobileAPM-IOS-SDK.git'

在同一目录中运行以下命令。
```
pod repo update 
pod install
```

3. Android 安装步骤

使用 Android Studio 或您选择的其他 Android 开发平台，导航到项目目录中的 Android 文件夹。

Android 安装步骤

将以下 Maven 仓库添加到应用级 build.gradle 文件中。

buildscript{
       repositories{
                   jcenter()
                   maven { url 'https://maven.zohodl.com' }
       }
}
allprojects {
        repositories {
            ...
            maven { url 'https://maven.zohodl.com' }
            ...
}}

点击集成开发环境工具栏中的 立即同步。

4. 在 React Native 应用中的使用

使用以下命令开始监控。

在 React Native 应用中的使用

将 s247r 模块导入初始 .js 文件（App.js）或需要使用的位置。
```
import {s247r} from 'react-native-site24x7-rn';
```
要使用自定义配置开始监控，请使用以下命令：您可以使用此命令自定义端点和上传间隔。默认上传间隔为 60 秒。
```
const config = {
"apiKey" : "your_app_key",
"uploadInterval" : 20
}
s247r.startMonitoringWithConfig(config);
```

5. 捕获其他参数的 API

以上命令将启动监控过程。此外，自定义 API 用于为用户 ID 设置动态值、跟踪自定义事件、计算屏幕加载时间等。本文档将介绍 Site24x7 中各类自定义 API 及其使用语法。

1. 初始化网络监控

您可以使用以下 API 启动网络监控，跟踪所需的 HTTP 调用。启用追踪后，您还可以指定应忽略哪些 HTTP 调用。

语法：

s247r.initializeNetworkMonitoring(["/symbolicate","/ping"]);

2. 初始化错误监控

您可以使用以下 API 追踪崩溃，其中包括启用和禁用各类错误追踪功能（trackUnhandledErrors、trackConsoleErrors、trackUnhandledRejections、trackNativeErrors）。

语法：

const errorConfig = {
  "trackUnhandledErrors" : true,
  "trackConsoleErrors" : false,
  "trackUnhandledRejections" : true,
  "trackNativeErrors": false
}
s247r.initializeErrorMonitoring(errorConfig);

3. 开始和停止事务

使用以下函数开始和停止事务。

语法：

s247r.startTransaction("listing_blogs");
s247r.stopTransaction("listing_blogs");

4. 使用组件对事务内的操作进行分组

您可以在事务内启动和停止唯一组件。在单个事务中，可以启动多个组件。

语法：

s247r.startTransaction("listing_blogs");
//Grouping various operations using components.
s247r.startComponent("listing_blogs","http_request");
//your code
s247r.stopComponent("listing_blogs", "http_request");
s247r.startComponent("listing_blogs","view_data_onto_screen");
//your code
s247r.stopComponent("listing_blogs","view_data_onto_screen");
s247r.stopTransaction("listing_blogs");

5. 捕获异常

您可以使用以下 API 手动捕获 catch 块中发生的异常。

注意

使用此 API 之前，请先初始化错误监控。

语法：

s247r.captureException(error);

6. 面包屑

使用以下函数手动添加面包屑。

语法：

s247r.addBreadCrumb(event, message)

示例：

s247r.addBreadCrumb("Info", "download completed")

7. 错误边界

错误边界是 React 组件，用于捕获其子组件树中任何位置发生的 JavaScript 错误。错误边界可以捕获渲染过程、生命周期方法以及其下整个组件树构造函数中发生的错误。使用以下代码片段添加自定义降级组件。

注意

只能使用函数组件作为 fallback 属性。

语法：

const FallbackComponent = () => { 
    return (
       <View>
            <Text> wrong in the component </Text> 
       </View>
)}
<s247r.ErrorBoundary fallback={FallbackComponent}>
<userDefinedComponent />
</s247r.ErrorBoundary>

8. 用户追踪

您可以通过设置唯一用户标识符来追踪特定用户。如果未指定唯一 ID，Site24x7 将生成一个随机 GUID 并将其作为用户 ID。

语法：

s247r.setUserId("user@example.com");

9. 屏幕追踪

您可以使用以下 API 计算屏幕加载所需的时间。此数据将推送到 Site24x7 服务器，可用于会话追踪和崩溃报告。

语法：

s247r.addScreen("home_screen", 55);

查看以下代码片段，了解如何捕获屏幕数据及其加载时间并推送到 Site24x7 服务器。

函数组件：

语法：

import { useRoute } from '@react-navigation/native';
export default FunctionComponent = () => {
   const [startTime, setTime] = useState(Date.now());
   const route = useRoute();
useEffect(()=>{
   var loadTime = (Date.now())-startTime;
   //sends screen name & its load time to site24x7 
   s247.addScreen(route.name, loadTime);
...
},[]]);
}

类组件：

语法：

export default class ExampleClass extends React.Component {
constructor(props) {
    super(props);
    this.startTime = Date.now();
}
//This code block is for capturing the screen metrics when it loads for the first time .
    componentDidMount(){
//sends screen name & its load time to site24x7 
    s247r.addScreen(this.props.route.name,Date.now()-this.startTime);
    this.startTime = Date.now();
     ...
}
//This code block is for capturing the screen metrics when it loads for every render after first render .
   componentDidUpdate(prevProps, prevState, snapshot){
     const currentTime = Date.now();
    //sends screen name & its load time to site24x7 
s247r.addScreen(this.props.route.name, currentTime - this.startTime);
this.startTime = currentTime;
     ...
}
render() {
   return ();
}
}

10. 刷新

您可以使用以下 API 立即将数据刷新到 Site24x7 服务器，而无需等待下一个上传间隔。默认刷新间隔为 60 秒。

语法：

s247r.flush();

11. 崩溃应用

您可以强制使应用崩溃，并显示错误消息"Site24x7 RN error"。

语法：

s247r.crashApplication();

12. 排除原生屏幕

您可以使用以下自定义 API 将原生屏幕从追踪中排除。

语法：

s247r.excludeNativeScreens(["RNSContainerNavigationController", "RNSScreen"]);

13. 环境

您可以使用以下 API 设置自定义环境详情，以便在各种环境配置（如开发、调试、生产或发布）中过滤数据。

语法：

s247r.setEnvironment("release");

6. 发行说明

了解每个版本中的主要和次要修复，并保持 React Native 平台更新以获得最佳性能。

发行说明

版本 1.0.5

2025 年 1 月 6 日

增强功能：

支持通过 API 设置自定义环境，例如 prod、debug 等。

版本 1.0.4

2024 年 6 月 10 日

增强功能：

引入了自定义 API excludeNativeScreens，用于排除/忽略原生代理自动采集的屏幕。

版本 1.0.3

2024 年 4 月 2 日

增强功能：

升级至最新版本的 Gradle 及相应的 Android Gradle 插件。
支持 React 16.8.1 及更高版本。
引入了声明文件，以支持 React Native 中的 TypeScript 应用程序。

问题修复：

修复了由依赖 Android SDK 引起的 NullPointerException。

版本 1.0.2

2023 年 5 月 17 日

增强功能：

通过 captureException API 发送数据后，用户采集的面包屑将被刷新，避免重复发送相同的面包屑。
captureException API 的错误数据和应用崩溃现在分开处理。
原生桥接 API 增强。

问题修复：

修复了应用从后台切换到前台时的 NullpointerException。

版本 1.0.1

2022 年 8 月 5 日

新功能：

支持错误边界。
支持手动添加面包屑。
支持手动捕获 catch 块中发生的异常。

问题修复：

次要修复。

版本 1.0.0

2021 年 8 月 3 日

增强功能：

支持追踪 HTTP 调用，包含请求方法、响应时间、吞吐量、状态码、平台和屏幕信息。
支持基于响应时间、吞吐量和计数追踪屏幕。
支持自动追踪视图和导航。
支持手动追踪视图。
启用用户会话追踪，会话超时时间为 60 分钟。
支持手动添加用户 ID。
支持追踪 JavaScript 错误/崩溃，包括以下未处理错误：
- 控制台错误
- 未处理的 Promise 拒绝
支持手动添加其他 HTTP 调用。

本页内容

入门

在 iOS 上安装

在 Android 上安装

在 React Native 应用中的使用

捕获其他参数的 API

发行说明