React Native中的Crashlytics指南

875 阅读8分钟

在应用程序开发人员的生活中,最真实的说法之一是,总会有一些错误会悄悄地进入你的代码,即使你已经完成了你的代码审查并将你的应用程序通过严格的测试程序。

一旦你的应用程序在商店中发布,出现的错误和崩溃可能很难调试,因为你的用户可能不会慷慨地给你修复它所需的信息。事实上,用户只在商店里留下差评和/或删除你的应用程序是很常见的。

因此,对于开发者来说,重要的是意识到这些情况,这可能会阻止客户获得我们希望的高质量体验。

现在,鉴于你需要对潜在的错误和崩溃做好准备,并尽快对它们做出反应,你需要正确的工具来完成这项工作。为此,你有这个整洁的解决方案,叫做Crashlytics

什么是Firebase Crashlytics?

Firebase Crashlytics是一个崩溃报告解决方案,它可以帮助你收集所有你需要的信息,以确定为什么一个特定的用户可能会在应用中面临一个错误或崩溃。

这篇博文将指导你如何在React Native移动应用中使用Crashlytics。

鉴于Crashlytics属于Firebase工具套件,你需要首先在Firebase控制台设置一个Firebase项目,然后在React Native项目中集成Firebase SDK。

设置一个Firebase项目

前往Firebase控制台,登录,然后按照下面的步骤操作。

首先,添加你的项目名称。

Create Project Name Screen

接下来,在第2步点击继续。如果你愿意,你可以在这里选择禁用Google Analytics。我保持了它的启用。

Enable Google Analytics

现在,选择你想通过它来创建项目的账户。

Configure Google Analytics

一旦项目创建完毕,请前往项目设置,通过点击iOSAndroid按钮在Firebase控制台中创建你的应用程序(如下图第三步所示)。

Project Settings

在控制台中创建每个应用后,你会被提示为你的iOS项目下载一个GoogleService-Info.plist ,为你的Android项目下载一个google-services.json 文件。

你马上就会需要这些文件,但现在,先去看看安装程序。

安装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 install

iOS设置

以下是在你的iOS项目中完成Firebase集成的步骤。

首先,打开工作区文件,将你之前下载的GoogleService-Info.plist 拖到你的项目文件夹中。确保 "需要时复制项目"复选框被选中。

Copy Items Checkbox

复制文件后,打开AppDelegate.m 文件并做如下修改。

在文件的顶部添加import <Firebase.h>


#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;
}

Add Config Code

安卓设置

与iOS的设置相比,Android的整合要求更高。以下是你需要遵循的步骤,以完成在Android项目中整合Firebase和Crashlytics。

将你之前下载的google-services.json 文件拖入以下路径:/android/app/

Drag Code

打开你的android/build.gradle 文件,添加以下依赖关系。

classpath 'com.google.gms:google-services:4.3.10'

classpath 'com.google.firebase:firebase-crashlytics-gradle:2.7.1'

Add Dependency

接下来,打开你的android/app/build.gradle ,在gradle文件的顶部添加以下插件。

apply plugin: “com.google.gms.google-services”

apply plugin: “com.google.firebase.crashlytics”

Apply Two Plugins

就这样,你也完成了安卓系统的设置!

验证Crashlytics

为了验证你安装的Crashlytics是否有效,你必须做两个改动。

  1. 在调试中启用Crashlytics
  2. 强制进行测试崩溃

在调试会话中启用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 Tab

一旦你在这个屏幕上,在没有连接调试器的情况下打开你的应用程序。现在,点击按钮。这样做会导致应用程序崩溃。

现在,再次打开该应用,等待Crashlytics与控制台同步。Firebase Crashlytics控制台现在应该是这样的。

Firebase Console

对你的iOS和Android项目都要这样做。

至此,你已经成功地将Firebase Crashlytics集成到你的React Native项目中了

在React Native中使用Crashlytics

现在你的设置已经完成,让我们看看Crashlytics提供的不同API,以帮助调试这些bug和崩溃。

致命的崩溃

这些情况是指你的应用程序突然关闭,可能是由于你的代码中的错误或由于内存限制,系统决定关闭你的应用程序。

致命崩溃由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捕捉到相同的崩溃,这些信息可能会帮助你重现它。

你可以使用log API

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(个人身份信息)数据,因为在你的任何登录设置中,这都不是一个好的做法。在你的数据被泄露的情况下,它可能导致安全问题。

禁用崩溃数据收集

尽管许多应用程序不向用户提供这种配置,但让用户控制他们是否想与你分享崩溃的信息总是一个好主意。

你可以使用下面的API来切换这个收集配置。

crashlytics().setCrashlyticsCollectionEnabled(true) // or you can set it to false


结语

在这篇文章中,你学到了如何设置和使用React Native Firebase Crashlytics库。Crashlytics可以帮助你识别崩溃,并跟踪所有你需要的信息,以便调查它们。这里有几个文档链接,你一定要看看,以便了解更多关于它的信息。