JavaScript でのエラー監視およびログ記録手法

JavaScript エラーの監視とログ記録は、アプリケーションの安定性とパフォーマンスを維持するために重要です。この記事では、JavaScript コード内のエラーを効果的に監視し、ログに記録するのに役立つ高度なテクニックを検討します。グローバル エラー ハンドラー、try/catch ブロック、スタック トレース、ロギング ライブラリ、カスタム エラー クラス、エラーのレポートと通知、運用環境でのエラー追跡について説明します。

グローバル エラー ハンドラー

グローバル エラー ハンドラーを使用すると、JavaScript アプリケーションの実行中に発生するエラーをキャッチして処理できます。 window.onerror と window.onunhandledrejection を利用すると、エラーと例外をログに記録または報告できます。

＃＃＃例＃＃＃ リーリー

イラスト

提供されたコードは、JavaScript でグローバル エラー ハンドラーを設定します。 window.onerror は、未処理のエラーを捕捉し、エラー メッセージ、スクリプト URL、行番号と列番号、およびエラー オブジェクトをログに記録します。 window.onunhandledrejection は、未処理の Promise 拒否をキャプチャし、拒否理由をログに記録します。これらのハンドラーは、Web ページの実行中に発生するエラーを特定してログに記録するのに役立ちます。

＃＃＃出力＃＃＃ リーリー

トライ/キャッチブロック

try/catch ブロックを使用すると、特定の例外を処理し、コード ブロック内で発生する可能性のあるエラーから適切に回復できます。

Example

window.onerror = function(message, url, line, column, error) {
   console.error("An error occurred:", message);
   console.error("URL:", url);
   console.error("Line:", line);
   console.error("Column:", column);
   console.error("Error object:", error);
};

window.onunhandledrejection = function(event) {
   console.error("Unhandled promise rejection:", event.reason);
};

イラスト

提供されたコードは、try/catch ブロックを使用して JavaScript の潜在的なエラーを処理します。 try ブロックにはエラーを発生させる可能性のあるコードが含まれており、エラーが発生すると、catch ブロックが実行され、console.error() を使用してエラー メッセージが記録されます。

＃＃＃出力＃＃＃ リーリー ＃＃＃スタックトレース＃＃＃

スタック トレースは、エラーの原因となった一連の関数呼び出しに関する貴重な情報を提供します。これらは、エラーの原因を理解し、問題を効率的に診断するのに役立ちます。

＃＃＃例＃＃＃ リーリー

イラスト

コードでは、foo() と bar() という 2 つの関数が定義されています。 foo() が呼び出されると、bar() が呼び出され、throw new Error() を使用して意図的にエラーがスローされます。

コードは try/catch ブロックに含まれています。 try ブロック内でエラーがスローされると、catch ブロックがエラーをキャッチし、エラー オブジェクトを error 変数に保存します。

catch ブロックは、console.error() プロパティと error.stack プロパティを使用してエラーのスタック トレースを記録します。

＃＃＃出力＃＃＃ リーリー

レコードライブラリ

Sentry、Rollbar、LogRocket などのログ ライブラリは、高度なエラー監視機能を提供します。これらはエラーの追跡、集計、レポートを簡素化し、多くの場合、フレームワークやサービスとの統合を提供します。

＃＃＃例＃＃＃ リーリー

イラスト

コードは Sentry ログ ライブラリを初期化し、エラー キャプチャを設定します。 Try ブロック内に、エラーをスローする可能性のあるコードを配置できます。エラーが発生した場合、catch ブロックは Sentry.captureException() を使用して、記録と分析のためにエラーを Sentry に送信します。

カスタム エラー クラス

組み込みの Error クラスを拡張すると、追加のプロパティとメソッドを備えたカスタム エラー クラスを作成できます。これにより、エラー処理がより有益かつ簡単になります。

例

以下に示すコードを検討してください。 .

リーリー

イラスト

このコードは、Error を拡張するカスタム エラー クラス MyCustomError を定義します。 try ブロック内で、特定のエラー メッセージとカスタム プロパティを含む MyCustomError インスタンスをスローします。 catch ブロックでは、キャッチされたエラー オブジェクトのカスタム プロパティをログに記録します。

＃＃＃出力＃＃＃ リーリー

エラーの報告と通知

エラー監視システムを電子メールやチャット プラットフォームなどの通知サービスと統合して、重大なエラーが発生したときにリアルタイムのアラートを受信します。

例

以下に示すコードを検討してください。 リーリー

イラスト

このコードは関数 sendErrorNotification() を定義します。この関数はエラー パラメーターを受け取り、電子メールやチャットなどでエラー通知を送信するロジックが含まれています。

try ブロックには、エラーをスローする可能性のあるコードを配置できます。エラーが発生した場合、catch ブロックが実行され、エラー オブジェクトをパラメータとして sendErrorNotification() 関数が呼び出され、エラー通知プロセスがトリガーされます。

このコードは、try ブロック内でエラーが発生したときに、カスタム関数を呼び出してエラー通知を送信することでエラーを処理する方法を示しています。これにより、プロアクティブな通知とエラーへの対応が可能になり、問題の迅速なトラブルシューティングと解決に役立ちます。

＃＃＃結論は＃＃＃

効果的なエラー監視とログ技術は、JavaScript アプリケーションの安定性とパフォーマンスを維持するために重要です。グローバル エラー ハンドラー、try/catch ブロック、スタック トレース、ログ ライブラリ、カスタム エラー クラス、エラーのレポートと通知、運用環境でのエラー トレースを活用することで、問題をより効率的に検出、診断、解決できます。ログの詳細とデータの機密性のバランスをとることを忘れずに、定期的にログを確認してアプリケーションを積極的に保守および改善してください。

以上がJavaScript でのエラー監視およびログ記録手法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。