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

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Raygun を使用して AngularJS で例外を自動的に追跡する

<<:  ショッピングカートのスライド削除効果を実装するReactネイティブサンプルコード

>>:  Node.js における非同期プログラミングの知識ポイントの詳細な説明

推薦する

数百万のデータに対して MySQL クエリを最適化する 4 つの方法

目次1. 時間が経つにつれて限界が遅くなる理由2. 百万データシミュレーション1. 従業員テーブルと...

Vueはシンプルなメモ帳機能を実装します

この記事では、参考までに、簡単なメモ帳機能を実装するためのVueの具体的なコードを紹介します。具体的...

Linux LVM 論理ボリューム構成プロセス (作成、増加、削減、削除、アンインストール) の詳細な説明

Linux LVM論理ボリューム構成プロセスの詳細な説明多くの Linux ユーザーは、オペレーティ...

CSS ハート型読み込みアニメーションのソースコードの実装

さっそく、コードをお見せしましょう。コードは非常にシンプルなので、勉強すれば理解できるようになります...

MySql データベース クエリの特殊コマンド

まずMySQLのインストールMySQLソフトウェアをダウンロードし、インストールパスを変更しますMy...

マインスイーパゲームを実装するための jQuery プラグイン (3)

この記事では、jQueryプラグインを使用してマインスイーパゲームを実装する方法に関する3番目の記事...

MySQL 文字セットの文字化けとその解決方法

序文文字セットは、一連のシンボルとエンコード規則です。Oracle データベースでも MySQL デ...

Vite2とVue3を使用したウェブサイトの国際化を実現するプロセス全体

目次序文vue-i18nをインストールするロケールの設定getLangs.js の実装i18nインス...

Linux の ufw ファイアウォールの紹介

Linux のufw (Uncomplicated Firewall) を見て、ファイアウォールに変...

MySQL count(1)、count(*)、count(field)の違い

目次1. COUNTの初見2. COUNT(フィールド)、COUNT(定数)、COUNT(*)の違い...

vuex ベースのショッピングカート機能の実装

この記事の例では、ショッピングカート機能を実装するためのvuexの具体的なコードを参考までに共有して...

MySql インポート CSV ファイルまたはタブ区切りファイル

別のライブラリから別のライブラリにデータをインポートする必要がある場合があり、このデータは CSV ...

Webフロントエンドベクターアイコンの使い方

序文フロントエンドページを書くとき、小さなアイコンなどの画像を使うことが多いです。画像を使うとコード...

時間のかかるDockerエラーのトラブルシューティングプロセス記録

目次起源環境情報トラブルシューティングのプロセス要約する起源顧客は CentOS をベースにしたカス...

Mac で MySQL 8.0.22 のパスワードを取得する方法

Mac 最新バージョンの MySQL 8.0.22 パスワード回復問題の説明:昨日、突然、Macで最...