Raygun を使用して AngularJS_AngularJS の例外を自動的に追跡する

Angular.js の優れた成果の 1 つは、実際的な例外スローです。これは、多くの場合、コードがクラッシュした理由を例外メッセージで正確に示すことができるためです。世界中の多数のブラウザ上で実行されている大規模なクライアント側 Web アプリケーションは例外の欠落に直面しており、それをキャッチすることでバグを修正し、ユーザーを獲得することが可能になります。

クロスブラウザーやデバイスの問題に対処する場合、アプリは開発マシンでは正しく確実に実行される可能性がありますが、ユーザーのブラウザーでは実行されない可能性があるため、これらの例外メッセージを受信することが重要です。

解決策は、自動化された例外追跡サービスを使用することです。Raygun は、何もすることなく、Angular Web アプリによってスローされたすべての例外を受け取ることでジョブを簡素化します。セットアップは非常に簡単です。以下の手順に従って Raygun をアプリケーションに接続するだけです。

インストール

まず、小さな Raygun4JS スクリプトをダウンロードし、プロジェクトに追加します。入手方法は 3 つあります:

バウワー著

コードをコピーします コードは次のとおりです:

bower install raygun4js

NuGet から取得します - Visual Studio で、パッケージ マネージャー コンソールを開いて次のように入力します:

コードをコピーします コードは次のとおりです:

Install-Package raygun4js

手動ダウンロード – ここをクリックして開発バージョン または 圧縮バージョン
をダウンロードします 構成

次に、このスクリプトを引用します。静的 HTML を使用する場合は、 をページまたはモジュール ローダーに追加します。

最後に、メインの Angular ロジックが実行される前に、次のコードを呼び出して Raygun4JS をセットアップします。

Raygun.init('YOUR_API_KEY').attach();

Raygun で作成されたアプリごとに API キーを生成でき、Raygun ダッシュボードから API キーにアクセスできます。テストするには 30 日間の無料トライアルがあります。
Angular での例外のキャッチ

ハンドルされない例外を Angular.js モジュールに挿入するには、デコレータまたはファクトリーを使用する方法が少なくとも 2 つあります。これら 2 つのメソッドは、$ExceptionHandler の特定の実装を提供し、上で説明した Raygun4JS はその実装を Raygun に送信します。

デコレータを使用する

デコレータ パターンは、元の動作を上書きしないため、他の必要な機能の間で懸念事項を確実に分離することができ、Angular.js で例外を処理する理想的な方法であるため、あらゆるサービスに動作を挿入するのに非常に適しています。 $provide サービスで使用できます。これは独自の

を実装するために使用します。

$exceptionHandler 函数:
 
app.config(function ($provide) {
 $provide.decorator("$exceptionHandler", ['$delegate', function($delegate) {
  return function (exception, cause) {
   Raygun.send(exception);
   $delegate(exception, cause);
  }
 }])
});

$delegate は例外ハンドラーのエンティティであり、コンソールへの出力の元の動作を取得するために呼び出します。

必要なだけ他のサービスを作成することもできます:

$provide.decorator("$exceptionHandler", ['$delegate', '$log', function($delegate, $log) {
  return function (exception, cause) {
   $log.debug('Sending to Raygun');
   Raygun.send(exception);
   $delegate(exception, cause);
  }
 }])

Angular ロジックから取得したエラーの種類に応じて、原因パラメータが入力されます。ファクトリまたはサービスで例外が発生した場合、パラメータの取り得る範囲を取得でき、カスタムとして使用できます。データを取得するには、上記の Raygun.send 呼び出しを必要なものと置き換えて、Raygun に渡します。

Raygun.send(exception, { cause: cause });

ファクトリーを使用する

Raygun をアプリケーションの例外ハンドラーに組み込む簡単な方法は、ファクトリを使用することです。ただし、元のコンソール ログが削除されます。この機能を元の値を保持して再度呼び出す場合は、このログを保存する必要があります。 .

app.factory('$exceptionHandler', function () {
 return function (exception) {
  Raygun.send(exception);
 }
});

手動送信エラー

Raygun4JS では、いつでもエラーを手動で簡単に追跡できます。

Raygun.send(new Error('my custom error'));

プロバイダーには、一意のユーザー追跡、バージョン追跡、タグなどを含む、利用できるツールが他にもたくさんあります – の信頼情報をすべて確認するためのドキュメントは次のとおりです。

Raygun は、追加の操作を行わなくても、Angular アプリ内の jQuery Ajax エラーを追跡することもできるため、すぐに使用できるようになります。
レイガンを使用する準備はできましたか?

前述したように、クレジット カード不要の 30 日間無料バージョンが利用可能なので、アプリが実際にユーザーに対して機能しているかどうかを確認できます。この記事については、下のコメント欄に残してください。