登录 React Native：所有你需要知道的！

日志记录是 React Native 应用程序开发项目中的一个重要方面，因为它是在开发阶段本身调试应用程序的最简单和最快的方法之一。 日志记录在代码运行时提供有关问题的详细信息和反馈。 它还可以帮助开发人员了解应用程序的行为。

但是，应该在应用程序开发过程中进行日志记录； 一旦部署了应用程序，它就不再有用了。 这是因为这些日志是在客户端生成的。 因此，在部署后阶段，通过日志检测到的错误将只能由用户访问并在他们的浏览器中丢失。 只有当用户填写错误报告时，开发团队才能识别这些错误，而这种情况发生的可能性最小。 用户大多会放弃应用程序而不是报告问题。

这篇文章提供了有关 React Native 项目中的日志记录和解决限制的方法的全面见解。 但是，在我们深入研究之前，让我们先看看 React Native 应用程序的架构。

React Native 架构/执行环境

React Native 执行环境包括三个主要线程——“Native”线程、“JS”线程和处理影子节点的后台线程。 这些线程通过名为“Bridge”的库相互通信。

登录 React Native：需要考虑的关键步骤

现在，让我们全面了解 React Native 环境中的日志记录。

如何阅读日志

JavaScript 日志在“开发者工具”部分的“控制台”部分可见。 您会在用于远程 JavaScript 调试的浏览器中找到“开发人员工具”。 但是，React Native 开发人员可以在调试器连接时查看这些日志，这可能会在一定程度上减慢应用程序的执行过程。 那么，解决方案是什么？ 您需要使用 react-native log-ios（适用于 iOS 应用程序）和 react-native log-android（适用于 Android 应用程序）等命令，以确保您的设备在进行日志记录时不会减慢速度。 这样，您还可以更多地了解整个应用程序中正在发生的事情，而不仅仅是 JavaScript 线程。

让我们详细讨论一下，让您更清楚地阅读日志！

控制台日志

查看Console日志，需要运行命令npx expo start并连接设备； 控制台日志将出现在终端进程中。 运行时通过网络套接字将这些日志发送到 Expo CLI。 在这里，你会得到低保真日志，因为开发工具没有直接连接到引擎。 要生成更高保真度的日志，您可以使用高级日志记录功能，例如 console.table。 为此，您需要使用 Hermes 创建一个开发版本，然后连接检查器。 Hermes 是一个为 React Native 环境优化的 JS 引擎。 Hermes 通过提前将 JS 编译成字节码来缩短应用程序的启动时间。

系统日志

如果您希望查看设备上发生的所有事件的日志以及操作系统和其他应用程序生成的日志，这些类型的日志将非常有用。 为此，您需要在终端中使用以下命令。

对于 Android 设备：npx react-native log-android

对于 iOS 设备：react-native log-npxios

如何写日志

下面是日志的写法！ 您对 React Native 控制台日志的输出显示在应用程序日志中。 在写入日志时使用正确的日志级别很重要。 除了 console.log，还有其他日志级别，如 console.info、console.warn、console.debug 等。这些日志中的每一个都有特定的用途，并提供对所需信息级别的更精细控制。 您可以使用 console.info 来确定是否按照预期模式发生了一组事件。 如果发生某些意外情况，则使用 console.warn； 例如，服务器响应并非完全不正确但看起来有问题。 当您需要临时日志来解决问题时使用 consoe.debug。

日志库的重要性

建议在编写日志时使用日志库，因为它会根据客户的要求根据不同级别保存日志。 日志将以加密文件格式保存，并发送或显示日志消息以供开发人员参考。 这种随时可用的记录器为开发人员节省了时间和精力。

如果生产环境中没有正确的日志文件，调试问题就变得很困难。 这是因为日志文件是帮助您调试意外问题或断开连接错误的唯一信息来源。 日志库的使用解决了这个限制。

React Native 日志库：示例

反应本机文件记录器

React-native-file-logger 是用于本机环境的文件记录器，可以使用来自 Logback（适用于 Android）和 CocoaLumberjack（适用于 iOS）的文件记录器将来自控制台调用的消息附加到日志文件中。 使用命令对其进行配置：FileLogger.configure()。 配置后，它会自动将所有现有的 console.log/debug/… 调用记录到一个文件中。

React-native-file-logger 是用 TypeScript 编写的，并提供了一个可选的文件滚动策略。 文件根据大小和所需时间滚动。 滚动策略是高度可定制的。 您可以自定义文件输出的日志级别和日志目录，日志文件的存放路径。 此外，如果您不希望使用控制台调用来记录文件，您可以选择使用您的记录器 API 将消息直接写入日志文件。

该记录器还可以通过电子邮件将文件日志发送给开发人员，而无需依赖任何其他库。 记录器使用 React Native 的未记录的 global._inspectorLog。 使用 React-native-file-logger，您可以拦截控制台调用并检索格式化的日志消息。

反应本机日志

这个 React Native 记录器带有自定义的“日志级别”和“传输”，如文件写入、彩色控制台等。显示每个日志级别的严重性； 日志级别根据重要程度升序排列。 此后，“传输”管理日志。 “传输”是一种保存、显示和发送日志消息的功能。

对于安装，运行以下两个命令之一：

npm install –save react-native-logs

或者

yarn 添加 react-native-logs

现在开始吧！ 转到 react-native-logs 并从那里，

导入 { 记录器 }。

然后运行命令 var log = logger.createLogger

“createLogger”方法使您能够创建一个提供警告、调试和错误级别的简单记录器。 要自定义此记录器，您需要将配置对象传递给“createLogger”方法。

谈到“传输”，开发人员可以编写自己的“传输”规范，用于将日志发送到云服务。 您还可以从几个默认的“传输”选项中进行选择，例如 hideDate、hideLevel、loggerName、dateFormat 等； 如果您设置参数 – transportOptions。 在这里，您还可以添加传递给传输的新选项，并可以覆盖预设的传输选项。

可以设置日志的严重级别； 为此，您需要传递最不重要的级别的名称（字符串）。 在这里，您可以覆盖在创建记录器时设置的任何 config.severity 选项。

如何处理日志显示的不同类型的错误

开发版本中的所有警告和错误都出现在应用程序中的 LogBox 中。 此 LogBox 在生产版本发布期间自动禁用。 请记住，忽略日志不是一个好的做法，应该是最后的手段。 而且，如果您由于某些不可避免的原因不得不忽略任何日志，请创建一个任务来稍后修复这些日志。

控制台错误

您可以以带有黄色或红色标记的屏幕通知形式查看控制台错误和警告。 还会显示警告和错误的数量。 要阅读控制台警告和错误，您需要单击通知。 此后，将显示有关日志的全屏信息，您将能够对控制台中存在的每个日志进行分页。

您可以使用以下命令隐藏上述通知：LogBox.ignoreAllLogs()。 当您进行产品演示时，这种方法会派上用场。 您还可以按照“每个日志”方法隐藏通知。 在这里，您需要键入命令：LogBox.ignoreLogs()。 这种方法可用于处理您无法修复的嘈杂警告； 例如，第三方依赖项中的那些。

语法错误

每当出现语法错误时，就会出现全屏 LogBox 错误。 LogBox 向您显示堆栈跟踪以及语法错误的位置。 无法消除此类错误，因为它表示无效的 JS 执行，必须在继续应用程序开发过程之前解决。 这就是消除语法错误所需采取的行动。 修复错误。 然后，您可以使用这两种方式中的任何一种——启用快速刷新并将其保存为“自动关闭”或禁用快速刷新并使用命令 cmd+r 重新加载。

未处理的 JS 错误

以前未处理的 JavaScript 错误会自动显示全屏 LogBox，显示错误源。 当这些错误突然出现时，您可以消除或最小化此类错误以查看应用程序的状态。 但是，强烈建议解决这些错误。

底线

我希望您已经收集了关于 React Native 中各种日志记录方法的可操作见解。 要创建一流的 React Native 应用程序，开发团队必须具备处理意外事件和错误的能力。 而且，日志记录可以帮助您找出错误的根本原因，并使开发人员可以轻松解决问题。 但是，您必须适当地执行日志记录过程以在不影响用户体验的情况下获得好处。 因此，选择一家经验丰富的 React Native 应用程序开发公司来执行您的软件开发项目非常重要。