JavaScript エラー報告ツールを開発する-フロントエンドQ&A-php.cn

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

王林

リリース： 2023-05-12 14:26:07

オリジナル

587 人が閲覧しました

はじめに

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

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

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

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

JavaScript エラー収集

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

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

ログイン後にコピー

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

リソースエラーの収集

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

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 リクエストを送信する方法を使用してこれを実現します。

Ajax リクエストレポート

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

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

ログイン後にコピー

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

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 が長すぎる可能性があることです。

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

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

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

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

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

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

エラー情報をマージする

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

サンプリングレポート

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

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

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

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

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