在应用开发者的生活中，最真实的陈述之一就是，即使你已经完成了代码审查并通过了严格的测试程序，总会有一些错误悄悄地溜进你的代码中。
在应用发布到商店后出现的错误和崩溃可能很难调试，因为你的用户可能不会提供修复它所需的信息。实际上，用户只在商店留下差评和/或删除应用是很常见的。
因此，开发者需要注意这些情况，这可能会阻止客户获得我们所期望的高质量体验。
现在，考虑到你需要为可能出现的错误和崩溃做好准备，并尽快对其做出反应，需要适当的工具来完成这项工作。为此，有一个称为 Crashlytics 的巧妙解决方案。
什么是 Firebase Crashlytics？
Firebase Crashlytics 是一个崩溃报告解决方案，它可以帮助我们收集所有可能需要的信息，以确定为什么特定用户可能会在应用程序中遇到错误或崩溃。
这篇博客文章将指导你如何在您的 React Native 移动应用程序中使用 Crashlytics。
鉴于 Crashlytics 属于 Firebase 工具套件，首先需要在 Firebase 控制台上设置一个 Firebase 项目，然后在 React Native 项目中集成 Firebase SDK。
设置 Firebase 项目
转到 Firebase 控制台，登录，然后按照下面写的步骤操作：
首先，添加项目名称。
接下来，在步骤 2 中点击“继续”。如果你愿意，你可以在这里禁用 Google Analytics。这里已经保持它启用。
现在，选择你想要用来创建项目的账户。
一旦项目创建完毕，前往项目设置并在 Firebase 控制台中创建您的应用，只需点击 iOS 或 Android 按钮（如下图的第三步所示）。
在控制台创建每个应用后，系统将提示你下载一个 GoogleService-Info.plist 用于 iOS 项目，以及一个 google-services.json 文件用于的 Android 项目。
安装 Crashlytics 和 react-native-firebase
我们将使用 react-native-firebase 包将 Firebase 和 Crashlytics 集成到我们的 React Native 应用中。
运行以下的 npm 命令来添加它们。
npm add @react-native-firebase/app
npm add @react-native-firebase/crashlytics
cd ios/ && pod installiOS 设置
以下是在 iOS 项目中完成 Firebase 集成的步骤。
首先，打开工作区文件并将之前下载的 GoogleService-Info.plist 拖入项目文件夹。确保已勾选“如有必要则复制项目”的复选框。
在复制文件后，打开 AppDelegate.m 文件并进行以下更改：
#import <React/RCTBridge.h>
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#import <Firebase.h> // add this here现在，滚动到 applicationDidFinishLaunching 方法的底部，并在从函数返回之前添加 [FIRApp configure] 。它应该看起来像这样：
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
// ...
self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
UIViewController *rootViewController = [UIViewController new];
rootViewController.view = rootView;
self.window.rootViewController = rootViewController;
[self.window makeKeyAndVisible];
// Add the following line
[FIRApp configure];
return YES;
}
Android 设置
与 iOS 设置相比，Android 集成稍微有些复杂。以下是您需要遵循的步骤，以完成在您的 Android 项目中集成 Firebase 和 Crashlytics：
将之前下载的 google-services.json 文件拖到以下路径： /android/app/ 。
打开 android/build.gradle 文件并添加以下依赖项：
classpath 'com.google.gms:google-services:4.3.10'
classpath 'com.google.firebase:firebase-crashlytics-gradle:2.7.1'
接下来，打开 android/app/build.gradle ，并在 gradle 文件的顶部添加以下插件。
apply plugin: “com.google.gms.google-services”
apply plugin: “com.google.firebase.crashlytics”
验证 Crashlytics
为了验证的 Crashlytics 安装是否有效，需要做两个更改：
- 在调试中启用 Crashlytics
- 强制测试崩溃
在调试会话中启用 Crashlytics
React Native Crashlytics 在调试应用程序时不会收集崩溃信息，因为调试会话期间已经拥有了评估崩溃所需的所有信息。如果你想在调试会话期间记录崩溃信息，需要启用它。
将一个文件添加到项目的基础文件夹中，命名为 firebase.json ，并将以下内容粘贴到其中：
{
"react-native": {
"crashlytics_debug_enabled": true
}
}强制测试崩溃
转到的 App.tsx 文件，并用以下屏幕替换整个代码:
import React from 'react';
import {SafeAreaView, StyleSheet, Text, TouchableOpacity} from 'react-native';
import crashlytics from '@react-native-firebase/crashlytics';
export const App = () => {
return (
{
crashlytics().crash();
}}>
Force Crash
);
};
const styles = StyleSheet.create({
container: {flex: 1, justifyContent: 'center', alignItems: 'center'},
});
上述代码在屏幕中间添加了一个按钮，用于强制崩溃。
实际执行崩溃的代码片段是这个：
crashlytics().crash();现在，在点击按钮之前，打开您项目的 Firebase 控制台页面，然后转到 Crashlytics 选项卡。
一旦你在这个界面上，打开你的应用程序，但不要连接调试器。现在，点击按钮。这样做会导致应用程序崩溃。
现在，再次打开应用并等待 Crashlytics 与控制台同步。Firebase Crashlytics 控制台现在应该是这样的：
对于 iOS 和 Android 项目都执行此操作。
在这个阶段，你已经成功地在你的 React Native 项目中集成了 Firebase Crashlytics！
在 React Native 中使用 Crashlytics
现在设置已经完成，我们看看 Crashlytics 提供的不同 API 以帮助调试这些错误和崩溃。
致命崩溃
这些是应用程序突然关闭的情况，可能是由于代码中的错误或由于内存限制导致系统决定关闭您的应用程序。
致命崩溃会由 Crashlytics SDK 自动跟踪，并在应用程序的下一次运行时同步。然后，可以在 Firebase Crashlytics 控制台上查看此崩溃的详细信息。
Firebase 控制台将为提供崩溃的堆栈跟踪和发生崩溃的设备详细信息。可以点击它查看有关崩溃的更详细的信息。
非致命崩溃
非致命崩溃是可能在您的代码中得到优雅处理的错误流程，但您仍然希望了解它们的发生。这些并不会突然关闭您的应用。相反，它们禁止用户使用您应用的某些功能（这就是我们称它们为非致命的原因）。
一些例子包括服务器调用失败和数据库失败。这些情况可能在您的一般开发周期中不会发生，但是在生产中的某些特定设备和特定条件下，它们可能会发生。
你也应记录这些崩溃。React Native Crashlytics 为您提供了 recordError API，以帮助记录这些错误。
crashlytics().recordError(error);这是一个小例子：
const getUserDetailsFromBackend = () => {
BackendAPIService.fetchUserDetails()
.then(response => {
setUserDetails(response);
})
.catch(error => {
// This is the function you can use to record this error.
crashlytics().recordError(error);
setUserDetailFetchError(error)
});
};此 API 记录致命崩溃期间捕获的堆栈跟踪和信息。您也可以在 Firebase 控制台中查看这些信息。默认情况下，控制台显示致命和非致命崩溃，但可以过滤它以仅显示非致命崩溃。
在 Crashlytics 中记录错误
尽管 Crashlytics 可以帮助我们记录致命和非致命崩溃的堆栈跟踪，但有时阅读堆栈跟踪可能无法帮助我们发现事情出了什么问题或是什么导致了崩溃。
因此，在应用程序会话中记录可能帮助你复现同一崩溃的消息总是有用的，一旦它被 Crashlytics 捕获。
const signInUser = (email: string, password: string) => {
userSignIn({email, password})
.then(response => {
if (response.userSignInSuccessful) {
// Keep logging the most important parts of the sessions so that
// if a crash occurs post this log, you can be sure the
// path your app took before it crashes
crashlytics().log(`User has signed in`);
} else {
crashlytics().log(
`User not present, proceeding with user creation process`,
);
proceedWithUserCreationProcess();
}
})
.catch(error => {
crashlytics().recordError(error);
});
};设置用户属性
设置属性是提供有关会话更多详细信息的另一种方式。Crashlytics 本身会跟踪一些设备详细信息，但您可以使用这些 API 来跟踪特定于您的应用程序的某些属性。
// store a single key value pair using the following method
crashlytics().setAttribute(‘attribute_name’, ‘attribute_value’);
// store an object of key value pairs using the following method
crashlytics().setAttributes(‘attribute_name’,{attribute_key: attribute_value});无论您是使用 setAttribute 方法还是 setAttributes 方法，只能使用字符串值。
另一点需要注意的是，理想情况下不应记录任何可以识别个人用户的 PII（个人身份信息）数据，因为在拥有的任何登录设置中，这都不是一个好的做法。如果您的数据泄露，可能会导致安全问题。
禁用崩溃数据收集
尽管许多应用并未向用户提供此配置，但让用户决定是否愿意与你分享崩溃信息始终是个好主意。
crashlytics().setCrashlyticsCollectionEnabled(true) // or you can set it to false总结
在这篇文章中，你学习了如何设置和使用 React Native Firebase Crashlytics 库。Crashlytics 帮助你识别崩溃并跟踪所有你需要的信息以便调查它们。以下是一些你绝对应该查看的文档链接，以便了解更多关于它的信息：
首发于公众号 大迁世界，欢迎关注。📝 每周一篇实用的前端文章 🛠️ 分享值得关注的开发工具 ❓ 有疑问？我来回答
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。