登錄 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 應用程序開發公司來執行您的軟件開發項目非常重要。