诊断 React Native 崩溃

React Native 应用程序和其他软件一样，在开发和生产过程中可能会遇到崩溃。出现崩溃的原因有很多，如使用不兼容的依赖关系、不正确的数据处理、编程错误或硬件故障。如果不及时发现和修复，崩溃可能会导致令人沮丧的用户体验，从而导致应用程序商店的差评。

在 React Native 中，应用程序崩溃可能源于 JavaScript 或原生组件中的问题。在本文中，我们将重点讨论源于底层硬生组件的崩溃，并讨论如何使用 Logcat 诊断这些崩溃。

项目设置

为了在演示应用程序中模拟崩溃，我们将使用 react-native-crash-tester 软件包强制应用程序在启动时崩溃。

要继续学习，请使用下面的命令从 GitHub 克隆演示程序：

git clone https://github.com/emmanuelhashy/debug-react-native-crash-example.git

什么是 Logcat？

Logcat 是一款命令行工具，用于输出移动设备中系统进程、硬件组件和用户应用程序生成的日志信息。Logcat 窗口也是 Android SDK 的一部分，这意味着你需要在机器上安装 SDK 才能使用它。

1. 使用 Logcat CLI：这是一个命令行工具，用于查看设备和我们正在运行的应用程序中生成的日志信息。
2. 使用 Android Studio Logcat 查看器：与 Logcat CLI 不同，Android Studio 中的 Logcat 查看器提供了一个交互式图形用户界面，具有高级过滤和搜索功能

Logcat 消息分类

日志信息根据其重要程度分为六级。其中包括

• Verbose (V)：最低的日志级别，生产构建中会删除冗长日志信息，但通常会包含日志信息，为开发过程中的调试提供额外的背景信息
• Debug (D)：这些日志提供有关应用程序执行的更具体信息，如函数调用、状态变化等。它们有助于开发阶段的调试，但不包括在生产构建中
• Info (I): 这些日志包括有关应用程序运行和应用程序中生成的事件的报告。它们是开发和生产构建的一部分
• Warning (W)：这些日志报告潜在问题或意外事件，这些问题或事件可能不会直接影响应用程序的功能，但可能会导致问题的发生
• Error (E): 这些日志显示应用程序在执行过程中出现的重大问题，例如应用程序无法正常运行而导致崩溃的问题。这些日志信息对诊断应用程序崩溃特别有用
• Assert：这些日志会报告不应该发生的情况。当本应评估为 true 的条件变成 false 时，就会触发这些日志。

在调试过程中，我们可以根据这些级别过滤日志信息，以获取最相关的信息。日志信息示例如下：

使用 Logcat CLI 调试

要开始使用 Logcat CLI 调试，请确保你的安卓设备已通过 USB 连接，或者安卓模拟器正在运行。

接下来，如果 React Native 应用程序尚未运行，请在终端中运行下面的命令来启动它：

npx react-native run-android

在应用程序运行时，我们可以通过在终端运行以下命令来查看与 React Native 相关的日志信息：

adb Logcat "*:S" ReactNative:V ReactNativeJS:V

该命令显示应用程序的本地组件和 JavaScript 组件生成的日志信息。不过，这些信息虽然对调试有用，但可能无法告诉我们应用程序崩溃的原因。

过滤 Logcat 错误日志

要查看与应用程序崩溃有关的日志，我们可以在终端中运行以下命令，过滤日志信息，使其只包含错误级别的信息：

adb Logcat *:E

上述命令将显示设备生成的错误级日志信息。不过，这些信息可能很难浏览，因为新信息产生得很快。因此，我们可以进一步过滤日志信息，显示带有特定日志标签的信息。

日志消息通常包含用于标识消息源的标记。例如，React Native 组件生成的消息通常包含 ReactNative 和 ReactNativeJS 标记。

一般来说，当 Android 应用程序崩溃时，会产生堆栈跟踪作为日志的一部分。这些日志通常包含 AndroidRuntime 日志标记，我们可以用它来过滤与应用程序崩溃相关的消息，如下例所示：

adb Logcat "*:S" AndroidRuntime:E

上述命令将显示导致崩溃事件的堆栈跟踪，如下图所示：

堆栈跟踪包含以下信息，我们可以利用这些信息进一步诊断应用程序崩溃的原因：

• 抛出的异常类型，表示出错的原因。可能是 NullPointerException、IOException 等。
• 抛出异常的代码部分，包括导致异常的函数调用

通过检查堆栈跟踪和触发异常的代码，可以找出导致应用程序崩溃的问题所在。

在 Android Studio 中使用 Logcat 查看器进行调试

如前所述，Android Studio 提供了 Logcat 查看器，我们可以使用该图形用户界面轻松查看和过滤日志信息。

首先，让我们在 Android Studio 中打开项目：

然后，在终端中执行以下命令，在连接的安卓设备或模拟器上启动应用程序：

npx react-native run-android

然后，单击集成开发环境底部窗格中的 Logcat 选项卡。在 Logcat 窗格中，从下拉列表中选择应用程序的软件包名称，如下图所示：

接下来，单击日志级别下拉菜单选择日志级别；我们只对错误日志级别感兴趣：

然后，在 Logcat 查看器中滚动日志信息，查看导致崩溃的异常的堆栈跟踪：

如上图所示，Logcat 查看器显示了引发崩溃的异常的堆栈跟踪。现在可以利用这些信息进一步诊断导致崩溃的代码中存在问题的部分。

此外，我们还可以使用 Logcat 查看器中的搜索栏，轻松浏览和查看 Logcat 显示的日志信息。

调试 React Native Android 应用程序启动时崩溃的问题

在前面的章节中，我们已经举例说明了如何调试启动应用程序后立即出现的崩溃。不过，我们也可以使用 Logcat 来调试应用程序生命周期中发生的崩溃，即使应用程序在后台运行时也是如此。

在大多数情况下，需要检查日志来确定与崩溃相关的错误信息。查找包含这些关键字的信息：

• Error
• Exception
• Fatal
• Crash

这些日志将为你提供有关崩溃原因和潜在修复方法的宝贵信息。

一旦确定了导致崩溃的错误，就可以采取必要的措施进行修复。解决方法取决于具体的错误信息，但一些常见的问题包括：

• Missing or misconfigured dependencies： 依赖项缺失或配置错误，确保在 React Native 项目中安装并正确链接了所有必需的库
• Incorrect or deprecated API usage: 根据相关文档更新代码，使用正确或最新的应用程序接口
• Issues with native modules: 原生模块的问题，检查原生模块或第三方库是否存在问题，确保它们与应用程序的 React Native 版本兼容
• JavaScript errors：调试 JavaScript 代码并修复任何语法错误、类型不匹配或逻辑问题

主动调试技巧

诊断应用程序崩溃的原因需要花费大量时间。不过，我们可以采取不同的措施，确保及时发现错误，从而节省开发时间。

我们可以采取的一些积极措施包括：

• 编写测试：React Native 有不同的库，可用于在开发过程中测试代码，如 Jest、React Native 测试库和 Detox。
• 错误报告和日志记录：通过使用错误报告和日志工具，我们可以轻松捕捉错误和崩溃，这有助于更快地找出崩溃的根本原因
• 使用静态分析器和精简器：这些工具有助于及早发现潜在错误并提高代码质量。可用于 React Native 的一些常用工具包括 ESLint 和 Prettier。

总结

Logcat 是调试 React Native 应用程序崩溃的强大工具。通过分析 Logcat 生成的日志消息和堆栈跟踪，可以确定应用程序崩溃的源头。通过使用过滤器，可以专注于特定标签、日志级别或进程，从而简化调试过程。

总的来说，Logcat 是 React Native 开发人员调试工具包中的重要工具。通过仔细分析和排除故障，您可以快速解决崩溃问题，提高应用程序的稳定性和性能。

交流

首发于公众号 大迁世界，欢迎关注。📝 每周一篇实用的前端文章 🛠️ 分享值得关注的开发工具 ❓ 有疑问？我来回答

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。