在您的 NativeScript 应用中添加基本的崩溃报告

虽然我个人从未编写过一行有 bug 的代码，但很有可能你们中的一些人写过。开源的黄金法则是什么？

在用户有机会创建 GitHub 问题之前识别并修复错误！

我们已经采取了许多方法来记录我们应用（无论是 Web 还是移动）的错误。在我过去作为 .NET Web 开发人员的经历中，我经常采用一种基本的做法，利用全局 Application_Error 事件让我的应用发送一封包含错误详细信息的简单邮件。这很糟糕😐。它有效，但没有提供企业级应用所需的集中式报告。

时代变了，出现了许多更加强大、更加健壮的“崩溃报告”服务。其中一些比较流行的服务包括 CrashProbe、Sentry.io 和 Firebase Crashlytics。

现在，如果您没有使用任何错误报告机制，我的本能反应是想羞辱你，但实际上我想给你一个拥抱，并让你知道一切都会好起来的。

今天，我们将学习如何利用 Crashlytics（Firebase 的一部分）来记录和报告 iOS 和 Android NativeScript 应用中的错误。

提示：NativeScript 5.2 带来了大幅改进的 错误日志记录改进！

Firebase 插件

快速历史回顾：Crashlytics 自 2011 年就存在了。几年后，他们被 Twitter 收购，最近又被 Google 收购，并将其纳入其 Firebase 产品中。

不要误会我的意思，但如果您正在寻找一个具有竞争力、针对 NativeScript 优化的无服务器后端，请查看 Progress Kinvey。

虽然 Firebase 包含许多服务，但我们今天只关心 Crashlytics。还有什么比使用 NativeScript Firebase 插件 更好的方法来利用这些服务呢！

要开始使用 Firebase，您只需前往 Firebase 控制台 并设置一个新的（免费）帐户。

在这里，我会让你按照 简单的说明 来设置您的第一个 Firebase 项目，并将其与您的 NativeScript 应用正确配置。

提示：在插件安装期间，设置脚本会提示您激活一项或多项 Firebase 服务。此时，务必确保在出现提示时使用大写 Y 标记 Crashlytics 服务。最坏的情况是，您可以随时通过转到 node_modules/nativescript-plugin-firebase 目录并运行 npm run config 来重新配置插件。

在您问之前，请注意，提供的说明允许与 NativeScript Core（即纯 JavaScript）、Angular 或 Vue.js 一起使用！

使用 Crashlytics

安装 Firebase 插件并在您的应用中初始化 Firebase 后，是时候更仔细地查看 Crashlytics 了。

注意：此时，请确保您的 firebase.nativescript.json 文件中已注明 "crashlytics": true 和 "crash_reporting": false。这将启用 Crashlytics 并禁用旧的 Firebase 崩溃报告服务。如果您必须更改此文件，请删除应用中的 platforms 文件夹（它将在下一次构建时恢复！）。

现在，您可以说“我完成了！”……您并没有错。Crashlytics 将 开始跟踪应用崩溃并在您的 Firebase 控制台中显示它们。

但我们可以做得更好！在应用崩溃之前捕获错误并向用户提供有意义的错误消息是一个更好的做法。有时我们无法预测容易出错的位置，但当我们有可能会发生变化的外部依赖项（例如远程 API）时，我们应该谨慎行事，检查错误并记录它们。

捕获错误

无论何时您想要显式记录错误，您只需插入一些小的代码片段。您首先需要导入 Firebase

import * as firebase from 'nativescript-plugin-firebase';

接下来，调用 Firebase 的 sendCrashLog 方法将自定义错误日志发送到您的 Firebase 项目

firebase.sendCrashLog({
  message: 'You screwed up! Here is the error: ' + error,
  showInConsole: true
});

您不仅可以编写一个在 Firebase 中记录的自定义 message，还可以选择在控制台中显示相同的 message。

fetch 模块就是一个很好的实际示例。由于 fetch 可以配置为 catch 错误响应，因此我们可以非常轻松地记录任何错误。

fetch("https://httpbin.org/get")
    .then((response) => response.json())
    .then((r) => {
        // do something with the data!
    })
    .catch((error) => {
        // oh no!
        firebase.sendCrashLog({
          message: 'Error with that one API: ' + error,
          showInConsole: true
        });
    }
);

但它还可以更好。由于 sendCrashLog 返回一个 promise，因此我们还可以使用一些更友好的 UI（在本例中为原生警报）向用户发出问题警报。

firebase.sendCrashLog({
  message: "Error!",
  showInConsole: true
}).then(
    () => {
      alert({
        title: "Sorry!",
        message: "Hey, we screwed up. Just thought you should know.",
        okButtonText: "OK"
      });
    }
);

模拟错误

在您的应用中实现错误日志记录当然很好，但我们如何知道它是否有效呢？幸运的是，在 iOS 和 Android 上模拟崩溃非常容易。

import { isIOS, isAndroid } from 'tns-core-modules/platform';
declare const Crashlytics: any;

public forceCrash(): void {
    if (isIOS) {
        // some nonsense code that is guaranteed to throw an exception :)
        var __error = 1/0;
    } else {
        throw new java.lang.Exception("Forced an exception.");
    }
}

Crashlytics 报告

记录了一些崩溃后，是时候转到方便的 Firebase 控制台并检查您的报告了！

祝您愉快地修复 🐛！