帮助手册 APM APM React Native

用于 React Native 应用程序的 APM

使用 Site24x7 真实用户监控 (RUM) SDK 监控基于 React Native 构建的移动应用程序的性能。分析您的应用在各种设备和地理位置上的性能，检测错误并检查崩溃。

本文档解释了如何在您的 ReactJS 应用程序中安装 RUM SDK 以及如何启动监控过程。

先决条件：

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

内容：

  1. 安装 RUM SDK
  2. 在您的 iOS 项目中安装 RUM SDK
  3. 在您的 Android 项目中安装 RUM SDK
  4. 初始化监控
  5. 用于捕获其他参数的 API 
  6. 发行说明

1. 入门

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

入门

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

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

  2. 将模块与 React Native 应用程序链接（安装大部分是自动的）。

    `$ react-native link react-native-site24x7-rn`

2. iOS的安装步骤

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

安装iOS步骤

  1. 在项目目录 /ios/ 中的 podfile 顶部添加一个源。

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

  2. 在同一目录中运行以下命令。

    pod repo update
    pod install

3. 安卓安装步骤

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

安卓安装步骤

  1. 将以下 maven 存储库添加到应用级 build.gradle 文件。

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

  2. 在集成开发环境的工具栏中单击立即同步。

4. 在 React Native 应用中的使用

在 React Native 应用程序中的使用

  1. 将 s247r 模块导入初始 .js 文件 (App.js) 或任何需要的位置。
    import {s247r} from 'react-native-site24x7-rn';

  2. 要使用自定义配置开始监控，请使用以下命令：您可以使用此命令自定义端点和上传间隔。默认情况下，上传间隔为 60 秒。

    const config = {
    "apiKey" : "your_app_key",
    "uploadInterval" : 20
    }
    s247r.startMonitoringWithConfig(config);

5. APIs 来捕获其他参数

上述命令将启动监控过程。但是，自定义 API 用于设置用户 ID 的动态值、跟踪自定义事件、计算屏幕加载时间等。本文档将解释 Site24x7 中可用的各种类型的自定义 API 以及使用它们的语法。

自定义 API

  1. 初始化网络监控
  2. 初始化错误监控
  3. 开始和停止事务
  4. 使用组件对事务中的操作进行分组
  5. 捕获异常
  6. Bread Crumbs
  7. 误差边界
  8. 用户跟踪
  9. 屏幕跟踪
  10. 刷新数据
  11. 崩溃应用

1. 初始化网络监控

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

语法：

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

2. .初始化错误监控

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

语法：

const errorConfig = {
"trackUnhandledErrors" : true,
"trackConsoleErrors" : false,
"trackUnhandledRejections" : true,
"trackNativeErrors": false
}

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. Bread Crumbs

使用以下功能手动添加breadcrumbs。

语法：

s247r.addBreadCrumb(event, message)

示例：

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

7. 误差边界

错误边界是 React 组件，可以在其子组件树的任何位置捕获 JavaScript 错误。错误边界在渲染期间捕获错误，生命周期方法，以及它们下方的整个树的构造函数。使用下面的代码片段添加自定义后备组件。

仅使用 Function 组件作为后备工具。

语法:

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. Flush

您可以使用下面的 API 立即将数据刷新到 Site24x7 服务器，而不是等待下一个上传间隔。默认情况下，刷新间隔设置为 60 秒。

语法：

s247r.flush();

11. 崩溃应用

您可以强制您的应用程序崩溃并显示一条错误消息，指出“Site24x7 RN 错误”。

语法：

s247r.crashApplication();

6. 发行说明

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

发行说明

版本 1.0.1

2022 年 8 月 5 日

新功能：

问题修复：

  • 小修复。

版本 1.0.0

2021 年 8 月 3 日

增强功能：

  • 支持使用请求方法、响应时间、吞吐量、状态代码、平台和屏幕跟踪 HTTP 调用。
  • 支持根据响应时间、吞吐量和计数跟踪屏幕。
  • 支持自动跟踪视图和导航。
  • 支持手动跟踪视图。
  • 启用用户会话跟踪，会话超时为 60 分钟。
  • 支持手动添加用户 ID。
  • 支持跟踪未处理错误的 javascript 错误/崩溃：
    • 控制台错误
    • 未处理的承诺拒绝
  • 支持手动添加任何其他 HTTP 调用。

帮助手册 APM APM - React Native