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 ブロックでは、キャッチされたエラー オブジェクトのカスタム プロパティをログに記録します。

エラーの報告と通知

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

例

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

＃＃＃結論は＃＃＃

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