React Native へのログイン: 知っておくべきことすべて!

公開: 2022-12-08

ロギングは、開発段階でアプリをデバッグするための最も簡単で最速の方法の 1 つであるため、React Native アプリ開発プロジェクトの重要な側面です。ログは、コードの実行中に問題に関する詳細情報とフィードバックを提供します。また、開発者がアプリの動作を理解するのにも役立ちます。

ただし、ログはアプリの開発プロセス中に実行する必要があります。アプリが展開されると、それはもはや有益ではありません。これは、これらのログがクライアント側で生成されるためです。したがって、展開後のフェーズでは、ログを介して検出されたエラーはユーザーのみがアクセスでき、ブラウザーで失われます。開発チームは、ユーザーがバグレポートに記入した場合にのみ、これらのエラーを特定できますが、これは発生する可能性が最も低いものです。ユーザーは、問題を報告する代わりに、ほとんどの場合アプリを放棄します。

この投稿では、React Native プロジェクトでのログ記録と制限を解決する方法に関する包括的な洞察を提供します。しかし、深く掘り下げる前に、React Native アプリのアーキテクチャを少し見てみましょう。

React ネイティブアーキテクチャ/実行環境

React Native 実行環境は、「ネイティブ」スレッド、「JS」スレッド、およびシャドウノードを処理するバックグラウンドスレッドの 3 つの主要なスレッドで構成されます。これらのスレッドは、「Bridge」という名前のライブラリを介して相互に通信します。

React Native でのログイン: 考慮すべき重要な手順

それでは、React Native 環境でのロギングに関する包括的な洞察を集めましょう。

ログの読み方

JavaScript ログは、「開発者ツール」セクションの「コンソール」部分に表示されます。リモート JavaScript デバッグに使用されるブラウザーには、「開発者用ツール」があります。ただし、React Native 開発者は、デバッガーが接続されているときにこれらのログを表示できるため、アプリの実行プロセスがある程度遅くなる可能性があります。それで、解決策は何ですか？ロギング中にデバイスの速度が低下しないようにするには、react-native log-ios (iOS アプリの場合) や react-native log-android (Android アプリの場合) などのコマンドを使用する必要があります。このようにして、JavaScript スレッドだけでなく、アプリ全体で何が起こっているかについても詳しく知ることができます。

ログの読み方をより明確にするために、これについて詳しく説明しましょう。

コンソールログ

コンソールログを表示するには、コマンド npx expo start を実行してデバイスを接続する必要があります。ターミナルプロセスにコンソールログが表示されます。ランタイムは、Web ソケットを介してこれらのログを 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 ログへの出力は、アプリケーションログに表示されます。ログを書き込むときは、適切なログレベルを使用することが重要です。 console.log 以外にも、console.info、console.warn、console.debug などのログレベルがあります。これらのログにはそれぞれ特定の目的があり、必要な情報のレベルをより細かく制御できます。 console.info を使用して、一連のイベントが予想されるパターンに従って発生したかどうかを確認できます。 console.warn は、予期しないインスタンスが発生した場合に使用されます。たとえば、完全に間違っているわけではないが疑わしいと思われるサーバーの応答などです。 consoe.debug は、問題を解決するために一時ログが必要な場合に使用されます。

ロギングライブラリの重要性

クライアントの要件に従ってさまざまなレベルに基づいてログを保存するため、ログの書き込み中にログライブラリを使用することをお勧めします。ログは暗号化されたファイル形式で保存され、ログメッセージは開発者が参照できるように送信または表示されます。このようなすぐに使用できるロガーにより、開発者は時間と労力を節約できます。

本番環境に適切なログファイルが存在しない場合、問題のデバッグが困難になります。これは、ログファイルが、予期しない問題や切断されたエラーのデバッグに役立つ唯一の情報源であるためです。ログライブラリを使用すると、この制限に対処できます。

React ネイティブロギングライブラリ: 例

React-native-file-logger

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 ロガーには、カスタムの「ログレベル」と、ファイル書き込み、カラーコンソールなどの「トランスポート」が付属しています。各ログレベルの重大度が表示されます。ログレベルは、重要度に基づいて昇順に並べられます。その後、「トランスポート」がログを管理します。「トランスポート」は、ログメッセージを保存、表示、および送信する機能です。

インストールするには、次の 2 つのコマンドのいずれかを実行します。

npm install –save react-native-logs

また

yarn add 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 実行を示しているため、無視することはできません。これは、構文エラーを却下するためにどのように行動する必要があるかです。エラーを修正します。次に、次の 2 つの方法のいずれかを使用できます。Fast Refresh を有効にして「自動的に閉じる」として保存するか、Fast Refresh を無効にしてコマンド cmd+r を使用してリロードします。

未処理の JS エラー

以前に処理されなかった JavaScript エラーは、フルスクリーンの LogBox を自動的に表示し、エラーの原因を示します。このようなエラーを無視または最小化して、これらのエラーが発生したときのアプリケーションの状態を表示できます。ただし、これらのエラーに対処することを強くお勧めします。

結論

React Native にログインするためのさまざまなアプローチについて、実用的な洞察を収集できたことを願っています。トップクラスの React Native アプリを作成するには、開発チームは予期しないイベントやエラーに対処するための十分な準備ができている必要があります。また、ログはエラーの根本原因を突き止めるのに役立ち、開発者が問題を簡単に解決できるようにします。ただし、UX に影響を与えずにその利点を享受するには、ロギングプロセスを適切に実行する必要があります。したがって、経験豊富な React Native アプリ開発会社を選択して、ソフトウェア開発プロジェクトを実行することが重要です。