Angularが予期しない例外エラーを処理する方法の詳細な説明

前面に書かれた

コードがどれだけ適切に記述されていても、すべての可能性のある例外を完全に処理することは不可能です。特に、データの大部分がユーザーやリモートの場所から取得される実稼働環境のアプリケーションの場合、すべてのデータがプログラムで指定されたとおりに生成されることを保証するのは困難です。実際のところ、テスターがそれを発見するか、顧客がそれを報告しない限り、それについて知る方法はありません。したがって、アプリケーションによって生成された不明な例外を報告することは非常に重要です。

Angular はデフォルトでグローバル例外管理も提供します。例外が発生すると、コンソールコンソールにスローされます。 NG-ZORRO を使用している場合、ICON がロードされていないという例外メッセージが頻繁に表示されることがあります。これも例外メッセージの一種です。

core.js:5980 ERROR エラー: [@ant-design/icons-angular]:アイコン設定が存在しないか、登録されていません。
 IconNotFoundError (ant-design-icons-angular.js:94) で
 MapSubscriber.project (ant-design-icons-angular.js:222) で
 MapSubscriber._next (map.js:29) で
 MapSubscriber.next (Subscriber.js:49) で
 RefCountSubscriber._next (Subscriber.js:72) で
 RefCountSubscriber.next (Subscriber.js:49) で
 Subject.next (Subject.js:39) で
 ConnectableSubscriber._next (Subscriber.js:72) で
 ConnectableSubscriber.next (Subscriber.js:49) で
 CatchSubscriber.notifyNext (innerSubscribe.js:42) で

Angular は ErrorHandler を通じて例外メッセージを一様に管理するため、handleError メソッドをオーバーライドして例外メッセージを再処理するだけで済みます。

エラーハンドラ

まず、custom-error-handler.ts ファイルを作成します。

'@angular/core' から ErrorHandler、Injectable をインポートします。

@インジェクタブル()
エクスポートクラス CustomErrorHandler は ErrorHandler を拡張します {
 handleError(エラー: 任意): void {
 super.handleError(エラー);
 }
}

CustomErrorHandler は、現在のユーザーデータ、現在の例外メッセージオブジェクトなどを完全に取得し、HttpClient を介してバックエンドにレポートできるようにします。

以下はNG-ALAINのドキュメントサイトです。解析にはGoogle Analyticsを使用しているため、例外メッセージをonerrorに転送するだけで済みます。

'@angular/common' から { DOCUMENT } をインポートします。
'@angular/core' から ErrorHandler、Inject、Injectable をインポートします。

@インジェクタブル()
エクスポートクラス CustomErrorHandler は ErrorHandler を拡張します {
 コンストラクタ(@Inject(DOCUMENT) プライベート doc: any) {
 素晴らしい（）;
 }

 handleError(エラー: 任意): void {
 試す {
  super.handleError(エラー);
 } キャッチ (e) {
  this.reportError(e);
 }
 this.reportError(エラー);
 }

 プライベートレポートエラー(エラー: 文字列 | エラー): void {
 const win = this.doc.defaultView を any として扱います。
 （勝ち&&勝ち.onerror）の場合{
  if (エラーの種類 === '文字列') {
  win.onerror(エラー);
  } それ以外 {
  win.onerror(エラーメッセージ、未定義、未定義、未定義、エラー);
  }
 }
 }
}

最後に、 CustomErrorHandler を AppModule に登録します。

@Ngモジュール({
 プロバイダー:
  { 提供: ErrorHandler、使用クラス: CustomErrorHandler },
 ]
})
クラス AppModule をエクスポートします { }

結論は

実は、もう一つ非常に重要なタスクがあります。本番環境のファイルはパッケージ化されて圧縮されています。つまり、生成される例外メッセージは実際のコード行数と同じにすることはできません。これには SourceMap のサポートが必要です。もちろん、通常の本番環境ではこのファイルは公開されないので、正しい行数と列数を取得したい場合は、中間層を使用し、バックエンドのソースマップモジュールを使用して実際の行と列の値を解析する必要があります。

Angular の依存性注入 (DI) システムを使用すると、一部の Angular 組み込みモジュールをすばやく置き換えることができるため、ビジネスレベルを変更することなく、いくつかの特別なニーズをすばやく解決できます。

要約する

Angular が予期しない例外エラーを処理する方法についての記事はこれで終わりです。Angular が予期しない例外エラーを処理する方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: