如何在React Native应用程序中添加Firebase Crashlytics

admin

Apps
React Native Firebase Crashlytics.png

如何在React Native应用程序中添加Firebase Crashlytics

这是我们的第五篇文章 反应原生 Firebase 系列，在这个例子中我们将看到什么是Firebase Crashlytics？ 以及如何将 Crashlytics 集成到 React Native App 中？ 如何在 Firebase 控制台中查看崩溃报告？ 让我们从 Firebase Crashlytics 示例开始。

推荐：如何Microsoft Store 下载和安装Msixbundle/Appx/Appxbundle文件

Firebase Crashlytics

Firebase Crashlytics 是由 Crash + Analytics 组成的一个词，这意味着它可以帮助您收集有关以下内容的分析和详细信息 崩溃 和 错误 您的应用程序中发生的情况。 它通过三个方面来做到这一点：

  • 日志：记录应用程序中的事件，以便在应用程序崩溃时与崩溃报告一起发送以获取上下文。
  • 崩溃报告：每次崩溃都会自动转换为崩溃报告并发送。
  • 堆栈跟踪：即使捕获错误并且您的应用程序恢复，仍然可以发送 JavaScript 堆栈跟踪。

YouTube video

Firebase Crashlytics 的使用

如上所述，Crashlytics 可帮助您收集有关崩溃和错误的分析和详细信息。 有 各种方法 使用 Crashlytics 设置崩溃报告的属性，以便提供崩溃分析并帮助您查看它们。 方法帮助我们设置 预定义属性，但我们也可以设置自己的 自定义属性。

crashlytics().setUserId(user.uid),
crashlytics().setAttribute('credits', String(user.credits)),
crashlytics().setAttributes({
  role: 'admin',
  followers: '13',
  email: user.email,
  username: user.username
}),

我们可以用 日志 我们的应用程序中的方法可以为可能发生的崩溃积累额外的上下文。

crashlytics().log('App mounted.');

为了测试 Crashlytics，我们可以使用 碰撞 强制崩溃应用程序的方法

crashlytics().crash()

Crashlytics 还支持将 JavaScript 堆栈跟踪发送到 Firebase 控制台。 这可以用于任何发生错误但被您自己的代码捕获并正常恢复的情况。 要发送堆栈跟踪，请将 JavaScript 错误传递给 记录错误 方法。

crashlytics().log('Updating user count.');
try {
  if (users) {
    // An empty array is truthy, but not actually true.
    // Therefore the array was never initialised.
    setUserCounts(userCounts.push(users.length));
  }
} catch (error) {
  crashlytics().recordError(error);
  console.log(error);
}

如果您想随时停止收集任何 Crashlytics，那么您可以使用 setCrashlyticsCollectionEnabled 禁用 crashlytics 集合。

crashlytics().setCrashlyticsCollectionEnabled(false)

示例说明

在此示例中，我们将集成 Firebase Crashlytics 并在 Firebase 控制台中记录崩溃。 我们将创建一个简单的屏幕来记录用户详细信息、单击不同按钮时发生的崩溃和错误。 当应用程序启动时，我们还将添加一些额外的日志，以查看是否可以在控制台中看到它们。 那么让我们看看这个代码是什么样子的。

制作 React Native 应用程序

React Native 入门将帮助您更多地了解如何制作 React Native 项目。 我们将使用 React Native 命令行界面来制作我们的 React Native 应用程序。

如果您之前安装了全局的react-native-cli软件包，请将其删除，因为它可能会导致意外问题：

npm uninstall -g react-native-cli @react-native-community/cli

运行以下命令创建一个新的 React Native 项目

npx react-native init ProjectName

如果你想使用特定的 React Native 版本启动一个新项目，你可以使用 –version 参数：

npx react-native init ProjectName --version X.XX.X

注意如果上述命令失败，您可能使用的是旧版本 react-native 或者 react-native-cli 在您的电脑上全局安装。 尝试卸载 cli 并使用 npx 运行 cli。

这将在项目目录中创建一个带有名为 App.js 的索引文件的项目结构。

Firebase SDK 集成

要从任何 React Native Firebase 示例开始，您需要将 Firebase 集成到您的应用程序中，我专门为此详细制作了一篇单独的文章，您将在其中看到在 Android 版 React Native 应用程序中添加 Firebase 的点对点过程，以及iOS 两者都有。

请访问如何在 Android 和 iOS 应用程序中集成 Firebase，然后返回执行下一步。

完成 Firebase 集成后，您可以安装更多依赖项。

安装依赖项

要安装依赖项，请打开终端并使用以下命令跳转到您的项目

cd ProjectName

对于 React Native Firebase，我们需要安装和设置应用程序模块

npm install @react-native-firebase/app --save

现在安装 crashlytics 模块

npm install @react-native-firebase/crashlytics --save

此命令会将所有依赖项复制到您的 node_module 目录中。 –save 是可选的，它只是更新 package.json 文件中的依赖项。

CocoaPods 安装

React Native 0.60 更新后，他们引入了自动链接，因此我们不需要链接库，但对于 iOS，我们需要安装 pod。 因此要安装 pod，请使用

cd ios/ && pod install --repo-update && cd ..

Android 的附加设置

我们必须添加一些东西来集成 Android 版 Crashlytics。

在 React Native 中集成 Crashlytics 的代码

请在任何代码编辑器中打开 App.js 并将代码替换为以下代码

应用程序.js

// #5 How to Add Firebase Crashlytics in React Native App
// https://aboutreact.com/react-native-firebase-crashlytics/

// Import React in our code
import React, { useEffect, useState } from "react";

// Import all the components we are going to use
import {
  SafeAreaView,
  StyleSheet,
  View,
  Text,
  TouchableOpacity,
} from "react-native";

import crashlytics from "@react-native-firebase/crashlytics";

const App = () => {
  const (userCounts, setUserCounts) = useState(null);

  useEffect(() => {
    crashlytics().log("App mounted.");
  }, ());

  const logCrashlytics = async () => {
    crashlytics().log("Dummy Details Added");
    await Promise.all((
      crashlytics().setUserId("101"),
      crashlytics().setAttribute("credits", String(50)),
      crashlytics().setAttributes({
        email: "aboutreact11@gmail.com",
        username: "aboutreact11",
      }),
    ));
  };

  const logCrash = async (user) => {
    crashlytics().crash();
  };

  const logError = async (user) => {
    crashlytics().log("Updating user count.");
    try {
      if (users) {
        // An empty array is truthy, but not actually true.
        // Therefore the array was never initialised.
        setUserCounts(userCounts.push(users.length));
      }
    } catch (error) {
      crashlytics().recordError(error);
      console.log(error);
    }
  };

  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.titleText}>
        How to Add Firebase Crashlytics in React Native App
      </Text>
      <View style={styles.innerContainer}>
        <TouchableOpacity
          activeOpacity={0.5}
          style={styles.buttonStyle}
          onPress={() => logCrashlytics()}
        >
          <Text style={styles.buttonTextStyle}>
            Log User Details
          </Text>
        </TouchableOpacity>
        <TouchableOpacity
          activeOpacity={0.5}
          style={styles.buttonStyle}
          onPress={logCrash}
        >
          <Text style={styles.buttonTextStyle}>
            Log Crash
          </Text>
        </TouchableOpacity>
        <TouchableOpacity
          activeOpacity={0.5}
          style={styles.buttonStyle}
          onPress={logError}
        >
          <Text style={styles.buttonTextStyle}>
            Log Error
          </Text>
        </TouchableOpacity>
      </View>
      <Text style={styles.footerHeading}>
        React Native Firebase Crashlytics
      </Text>
      <Text style={styles.footerText}>
        www.aboutreact.com
      </Text>
    </SafeAreaView>
  );
};

export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
  },
  innerContainer: {
    flex: 1,
    alignItems: "center",
    padding: 35,
    justifyContent: "center",
  },
  titleText: {
    fontSize: 30,
    fontWeight: "bold",
    textAlign: "center",
    paddingVertical: 20,
  },
  buttonTextStyle: {
    color: "white",
    fontWeight: "bold",
  },
  buttonStyle: {
    alignItems: "center",
    backgroundColor: "orange",
    padding: 10,
    width: "100%",
    marginTop: 16,
  },
  footerHeading: {
    fontSize: 18,
    textAlign: "center",
    color: "grey",
  },
  footerText: {
    fontSize: 16,
    textAlign: "center",
    color: "grey",
  },
});

Crashlytics 设置

完成所有这些设置并替换代码后，我们必须从 Firebase 控制台启用 crashlytics 并打开您的 Firebase 控制台 并单击 崩溃解决方案 标签

React_native_crashlytics_setup1

到达那里后，您可以单击 “启用 Crashlytics”

React_native_crashlytics_setup2

启用后，您将看到它等待您的应用程序首次连接。 现在您必须启动您的应用程序。

运行 React Native 应用程序

再次打开终端并使用跳转到您的项目。

cd ProjectName

1. 启动 Metro Bundler

首先，您需要启动 Metro，React Native 附带的 JavaScript 捆绑器。 要启动 Metro 捆绑程序，请运行以下命令

npx react-native start

一旦您启动 Metro Bundler，它将永远在您的终端上运行，直到您将其关闭。 让 Metro Bundler 在自己的终端中运行。 打开一个新终端并运行该应用程序。

2.启动React Native应用程序

在 Android 虚拟设备或真实调试设备上运行项目

npx react-native run-android

或在 iOS 模拟器上运行（仅限 macOS）

npx react-native run-ios

如果您的应用程序通过正确的设置成功启动，那么您可以看到 “安装成功！” 消息并转到仪表板选项。 Android 和 iOS 都需要所有这些东西。

React_native_crashlytics_setup3

输出截图

React_native_crashlytics1

仅供参考：一天后，Crashlytics 报告将在 Firebase 仪表板上可见

React_native_crashlytics2

React_native_crashlytics3

React_native_crashlytics4

这是如何在适用于 Android 和 iOS 的 React Native 应用程序中添加 Firebase Crashlytics。 如果您有任何疑问或想分享有关该主题的内容，您可以在下面发表评论或在此处联系我们。 很快就会有更多帖子发布。 

推荐：WordPress网站抓取插件Crawlomatic

Previous

如何知道是否有人在Android上屏蔽你

Next

如何使用Microsoft 365在线打开Word、Excel、PowerPoint和Outlook

相关文章

如何使用Google Drive将PDF文件转换为Word

如何使用Google Drive将PDF文件转换为Word

如何更改流行浏览器中的默认下载位置

如何更改流行浏览器中的默认下载位置

在Microsoft Excel中添加时间的4种方法

在Microsoft Excel中添加时间的4种方法

在Microsoft Excel中查找循环引用的7种方法

在Microsoft Excel中查找循环引用的7种方法

发表评论