このチュートリアルでは、JavaScriptでのエラー、try-catchコンセプトとその使用方法、Angular errorHandlerによる内部エラー処理について少し紹介します。
Errors
私のお気に入りの映画スター、サミュエル L. ジャクソンは、「to err is human」という言葉を初めて耳にした人でしたし、今は特定の映画のタイトルを覚えていませんが、コードを書くときにエラーと同じことが起こることに同意していただけるでしょう。 Angular 開発者として、エラーが個人的なミスによって引き起こされることはすでにご存知でしょう。たとえば、Angular 7 でファイル拡張子名を持つ import 文があり、それをキャッチできなかった場合、ブラウザに表示されます。
import { DataService } from 'src/app/services/data.service.ts';エラーはテストの欠如、サーバー通信、あるいは作業中の Angular プロジェクトのあいまいさで発生することもあります。 私たちは人間なので、エラーを起こしがちです。それが、VS Code のような優れたエディターが、脱線し始めたときに常にキーとなる線を引く理由の 1 つです。
前提条件
この記事のデモに従うには、次のものが必要です:
- Node バージョン 11.0 がマシンにインストールされていること。0
- Angularの最新バージョン（バージョン7）
// run the command in a terminal ng versionバージョン7を使用していることを確認し、使用していない場合は7に更新します。その他、あると嬉しいものとして、
- Angularフレームワークの初級レベルでの作業知識。
- Angularサービスに精通しているとプラスになりますが、必須ではありません。
エラーの種類
エラーには多くの種類がありますが、主に2つのカテゴリーに分類します：インサイダーとアウトサイダーのエラーです。 (クライアントサイドエラーとも呼ばれる) これらは責任を負うことができるもので、構文エラー、パッケージマネージャーエラー、参照エラー、タイプエラー、およびAngularアプリケーション内の開発者が修正できるあらゆるタイプのクライアントサイドエラーが含まれます。
この記事では内部エラーに焦点を当て、次の記事では外部エラーに焦点を当てます。
Baby steps: throw and catch!
JavaScriptで機能を実行すると、その機能は機能実行キューの一種に加わり、アプリケーションが実行されてその番になるとキューを離れて実行されます。 そのため、エラーが発生すると、JavaScript は例外をスローし、例外が処理されるまで、キュー内のすべての操作が即座に削除されます。 基本的なレベルでは、例外は try/catch ブロックで処理され、コンパイラがこの try/catch ブロックを見ないと、アプリケーション全体がクラッシュします。 try/catch 構文は次のようになります。
ちょっとしたデモで、その有用性がわかるでしょう。 CLI で新しい Angular プロジェクトを作成し、それを ngapp
ng new ngapp ルーター設定を受け入れ、スタイル シートとしてプレーン CSS を選択します。 app.component.ts ファイルに移動し、以下のコードをコピーします:
Copy these into the app.component.html
<!-- src/app/app.component.html --> <button (click)="normalError()"> Fire Normal Error </button>Then copy these basic styling into the app.component.css
Run the application in development like this:
ng serveIn some cases it will fail to compile, when this happens re-run it and it will compile.If you have been upgraded in this application in a level.
これはコンソールに表示され、ほとんどの場合、ログに記録したメッセージが表示されないことがわかるように、アプリケーション全体を直ちに破損させます。 try/catch ブロックはこれらの例外を優雅に処理し、アプリケーションは実行を継続します。 ですから、今回 try catch ブロックで別のボタンがあった場合、その違いを見抜くことができます。 app.component.html file :
app.component.ts ファイルに以下のコードをコピーします。太字のコードは同じ参照エラー インスタンスを示していますが、今回は try-catch ブロックでラップされているため、優雅に処理することができます。 アプリを再度実行すると、次のようになります:
Limitations of try/catch
トライ/キャッチは素晴らしいですが、アプリケーションについて考えると、それがいかに持続不可能であるかが既に分かります。 なぜなら、アプリケーションのすべての関数にこれらの try/catch ブロックを追加することはできず、それはリソース効率的ではないためです。 良い知らせは、Angular には一種のグローバルな try/catch があり、1 つの集中した場所ですべての例外をキャッチするために使用できます。
エラー ハンドラ
Angular には errorHandler というグローバル エラー処理クラスがあり、アプリケーション内で集中的に例外処理を行うためのフックを提供します。 基本的に、アプリケーションで発生したすべてのエラーをインターセプトし、それらすべてをコンソールにログ記録し、アプリがクラッシュしないようにします (最初のボタンがアプリをクラッシュさせなかったのはこのためです)。 app.component.ts ファイルに移動し、その中の以下のコードをコピーします。
トライ キャッチ ブロックが削除されたので、コード エディターで 2 つの参照エラーを示す 2 行のキー音 (または問題) が表示されているはずです。 Angular グローバル エラー ハンドラをテストするには、app.module.ts ファイルに移動して、以下のコードをコピーします:
構文が示すように変更されました。 これを保存してアプリケーションを実行すると、すべてのエラーに対してコンソールにログが記録され、アプリケーションがtry-catchと同じように動作しているのがわかります。
エラー サービス
ここで、すべてのエラー ロジックがコア アプリケーション モジュール内にあることがわかりますが、これは Angular が推奨するコードの書き方ではありません。 そこで、すべてをモジュール化するために、サービスを使用します。これをエラーサービスと呼び、エラーを処理するためのすべてのロジックをこのサービスに保持させます。
ng generate service errorまたは
ng g s error次に、app.module.tsファイル内のエラーハンドラのロジックを削除して、次のようにします：
その後、CLIを使って、エラーが発生した場合にユーザーがリダイレクトできるエラーコンポーネントを生成します。
ng g c errorエラー コンポーネントができたので、それを修正する必要はありません。error.service.ts ファイルに移動し、その中の以下のコードをコピーしてください。
最後に、app.component.html ファイルは次のようになっているはずです。
まとめ
ここまでで、エラーと、クライアント側の JavaScript エラーに焦点を当てた errorHandler クラスを使用して Angular でエラーを処理する概念について紹介しました。 次のチュートリアルでは、アウトサイダーエラー、HTTPインターセプター、リモートサービスでのエラートラッキングについて、この投稿で学んだすべての概念を基に、さらに深く掘り下げて説明します。 このチュートリアルの完全なコードは GitHub にあり、ここで見ることができます。