JavaScript エラー報告ツールを開発する

はじめに

フロントエンド開発では、エラー報告は一般的かつ重要な問題です。ユーザーがエラーに遭遇した場合、エラー情報を収集し、サーバーまたはサードパーティのプラットフォームに報告する必要があります。エラー報告がない場合、問題を特定して適時に修復することができません。

この記事では、開発プロセス中に問題を迅速に発見して解決できるように、JavaScript ベースのエラー報告ツールを開発する方法について説明します。

ステップ 1: エラー情報の収集

フロントエンド エラーには、通常、JavaScript エラーとリソース エラーの 2 種類があります。 JavaScript エラーは通常、構文エラーまたは実行時エラーを指します。リソース エラーには、読み込みの失敗、ネットワーク リクエストの失敗などが含まれます。

1. JavaScript エラー収集

JavaScript エラーを収集するには、ウィンドウ オブジェクトにエラー イベントをバインドし、エラー情報を収集する必要があります。通常、エラー イベントには 3 つの属性があります: message、filename、lineno:

window.onerror = function(message, source, lineno, colno, error) {
  console.log('Error:', message, source, lineno, colno, error);
  // 上报错误信息
}

このイベントは、ページ上の JavaScript がキャッチされない例外をスローしたときにトリガーされます。このイベント ハンドラーでは、エラー メッセージに関する情報をコンソールに出力し、サーバーまたはサードパーティのプラットフォームに報告できます。

2. リソース エラーの収集

リソース エラーを収集するには、エラー イベントをウィンドウ オブジェクトにバインドし、リソース情報を収集する必要があります。通常、リソース エラーが発生すると、読み込み失敗イベントが返されます。このイベントは、ウィンドウ オブジェクトにエラー イベントをバインドすることで取得できます。

window.addEventListener('error', function(event) {
  var target = event.target || event.srcElement;
  console.log('Load error:', target.tagName, target.src, event.message);
  // 上报错误信息
}, true);

このイベント ハンドラーは、ページ内のリソースの読み込みに失敗したときにトリガーされます。このイベント ハンドラーでは、エラー情報をコンソールに出力し、サーバーまたはサードパーティのプラットフォームに報告できます。

ステップ 2: エラー情報の報告

エラー情報を収集したら、次のステップでは、それをサーバーまたはサードパーティ プラットフォームに報告します。これは、Ajax リクエスト、Image オブジェクト、またはサードパーティ ライブラリの使用を通じて実現できます。この記事では、Ajax リクエストを送信する方法を使用してこれを実現します。

1. Ajax リクエスト レポート

jQuery ライブラリを使用していると仮定すると、次のコードを使用してレポート リクエストをサーバーに送信できます:

$.ajax({
  url: '/api/report-error',
  method: 'POST',
  data: {
    message: message,
    source: source,
    lineno: lineno,
    colno: colno,
    error: error && error.stack
  }
});

Pass POST リクエストを送信することで、エラー メッセージをデータの形式でサーバーに送信できます。バックグラウンドでリクエスト本文を解析してエラーを見つけて修復することで、この情報を取得できます。

2. Image オブジェクトのレポート

Ajax リクエストや jQuery ライブラリを使用したくない場合は、Image オブジェクトを使用して GET リクエストをサーバーに送信できます。

var img = new Image();
img.src = '/api/report-error?message=' + encodeURIComponent(message)
  + '&source=' + encodeURIComponent(source)
  + '&lineno=' + encodeURIComponent(lineno)
  + '&colno=' + encodeURIComponent(colno)
  + '&error=' + encodeURIComponent(error && error.stack);

この方法の欠点は、エラー情報をクエリ文字列に結合する必要があるため、URL が長すぎる可能性があることです。

3. サードパーティ ライブラリのレポート

エラー レポート ツールを独自に開発することに加えて、いくつかのサードパーティ ライブラリを使用してこのタスクを完了することもできます。

• Sentry: エラー グループ化、Web インターフェイス、API、および SDK 機能を提供するオープン ソース エラー レポート サービス、
• Bugsnag : エラーを自動的に検出し、エラー追跡、エラー分析などのさまざまな機能を提供するリアルタイム エラー監視およびレポート ツール;
• New Relic: リアルタイム エラー レポートを提供するアプリケーション パフォーマンス監視ツール分析と位置決めのエラー。

これらのライブラリの使用方法は似ており、ドキュメントのガイドラインに従って設定するだけで済みます。

ステップ 3: パフォーマンスの最適化

エラー報告ツールの開発が完了したら、ツールが Web サイトのパフォーマンスに与える影響を少なくするために、パフォーマンスの最適化を実行する必要があります。

1. エラー情報をマージする

ページ上に複数の JavaScript スクリプトがある場合、スクリプトでエラーが発生した場合、エラー情報をサーバーに報告する必要があります。すべてのスクリプトでエラー イベントをバインドすると、複数のリクエストが送信されます。リクエストの数を減らすために、複数のエラー メッセージを 1 つのリクエストに結合し、キャッシュにバッファを使用できます。

2. サンプリング レポート

ページのトラフィックが多い場合、誤って報告されるデータの量が非常に多くなる可能性があります。サーバーへの過度の負担を避けるため、サンプリングレポートの仕組みを導入し、エラー情報の一部のみをレポートすることができます。たとえば、エラー報告率を設定し、エラー報告率に比例してエラー情報のみをサーバーに送信できます。

3. ネットワーク環境に基づくレポート

低速ネットワーク環境では、エラーレポートはパフォーマンスに大きな影響を与え、ページがクラッシュする可能性もあります。この状況の発生を回避するために、現在のネットワーク環境の状態に基づいてエラー報告率を自動的に調整できます。たとえば、4G ではエラー報告率を 100% (つまり、すべて報告) に設定し、2G ではこの率を 20% に下げることができます。 ＃＃＃＃＃＃結論＃＃＃

JavaScript エラー報告ツールの開発は、フロントエンド開発者にとって非常に重要です。これは、問題を迅速に特定して解決し、ユーザー エクスペリエンスを向上させるのに役立ちます。この記事では、エラー情報の収集、エラー情報のレポート、パフォーマンスの最適化などの側面について説明します。この記事がお役に立てば幸いです!

以上がJavaScript エラー報告ツールを開発するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。