Angular でエラーを処理する方法を理解するための 1 つの記事

Angular ではエラーをどのように処理できますか?この記事では、Angular のエラー処理メカニズムを説明し、エラーを処理する方法を紹介します。

エラー処理は、コードを記述するときによく発生する要件であり、処理する必要があります。多くの場合、例外処理のロジックは、プログラムのクラッシュを回避することです。見てみましょう。 it Angularエラーの処理方法。 [関連チュートリアルの推奨事項: "angular チュートリアル"]

Angular とは

Angualr は Google のツールです。オープンソースの Web フロントエンド フレームワークは 2009 年に誕生し、Misko Hevery らによって作成され、後に Google に買収されました。これは、多くの Google 製品で使用されている優れたフロントエンド JS フレームワークです。

AngularJS は宣言型プログラミング モデルに基づいており、ユーザーはビジネス ロジックに基づいて開発できます。フレームワークは HTML コンテンツの入力と双方向のデータ バインディングに基づいており、自動データ同期メカニズムを完成させます。 、AngularJS の強化された DOM 操作により、テスト容易性が向上します。

try/catch

最も一般的な方法は、コード catch## に try/ を追加することです。 # ブロックでは、try でエラーが発生した場合、エラーが捕捉され、スクリプトは実行を継続します。ただし、アプリケーションのサイズが大きくなるにつれて、このアプローチは管理できなくなります。

ErrorHandler

Angular は、コンソールにエラー メッセージを出力するデフォルトの ErrorHandler を提供するため、このデフォルトをインターセプトできます。カスタム処理ロジックを追加するための動作。以下のエラー処理クラスを作成してみてください:

import { ErrorHandler, Injectable } from "@angular/core";
import { HttpErrorResponse } from "@angular/common/http";

@Injectable()
export class ErrorsHandler implements ErrorHandler {
  handleError(error: Error | HttpErrorResponse) {
    if (!navigator.onLine) {
      console.error("Browser Offline!");
    } else {
      if (error instanceof HttpErrorResponse) {
        if (!navigator.onLine) {
          console.error("Browser Offline!");
        } else {
          // Handle Http Error (4xx, 5xx, ect.)
          console.error("Http Error!");
        }
      } else {
        // Handle Client Error (Angular Error, ReferenceError...)
        console.error("Client Error!");
      }
      console.error(error);
    }
  }
}

通常は、

appshared の下に共有ディレクトリを作成し、このファイルを配置しますproviders フォルダー

次に、

ErrorHandler の代わりにカスタム クラスを使用するように、アプリケーションのデフォルトの動作を変更する必要があります。 app.module.ts ファイルを変更し、ErrorHandler を @angular/core からインポートし、providers を @NgModule に追加します。 モジュールのコードは次のとおりです:

import { NgModule, ErrorHandler } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";

// Providers
import { ErrorsHandler } from "./shared/providers/error-handler";

import { AppComponent } from "./app.component";

@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [AppComponent],
  providers: [{ provide: ErrorHandler, useClass: ErrorsHandler }],
  bootstrap: [AppComponent]
})
export class AppModule {}

HttpInterceptor

##HttpInterceptor

は HTTP リクエスト/レスポンスのインターセプトを提供します メソッドの場合、渡す前に処理できます。たとえば、HTTP リクエストは、エラーがスローされる前に数回再試行できます。こうすることで、エラーをスローすることなく、タイムアウトを適切に処理できます。 エラーをスローする前にエラー ステータスを確認することもできます。インターセプタを使用すると、401 ステータス エラー コードを確認し、ユーザーをログイン ページにリダイレクトできます。

import { Injectable } from "@angular/core";
import { HttpEvent, HttpRequest, HttpHandler, HttpInterceptor, HttpErrorResponse } from "@angular/common/http";
import { Observable, throwError } from "rxjs";
import { retry, catchError } from "rxjs/operators";

@Injectable()
export class HttpsInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request).pipe(
      retry(1),
      catchError((error: HttpErrorResponse) => {
        if (error.status === 401) {
          // 跳转到登录页面
        } else {
          return throwError(error);
        }
      })
    );
  }
}

も

app.module.ts

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>import { NgModule, ErrorHandler } from &amp;quot;@angular/core&amp;quot;; import { HTTP_INTERCEPTORS } from &amp;quot;@angular/common/http&amp;quot;; import { BrowserModule } from &amp;quot;@angular/platform-browser&amp;quot;; import { FormsModule } from &amp;quot;@angular/forms&amp;quot;; // Providers import { ErrorsHandler } from &amp;quot;./shared/providers/error-handler&amp;quot;; import { HttpsInterceptor } from &amp;quot;./shared/providers/http-interceptor&amp;quot;; import { AppComponent } from &amp;quot;./app.component&amp;quot;; @NgModule({ imports: [BrowserModule, FormsModule], declarations: [AppComponent], providers: [ { provide: ErrorHandler, useClass: ErrorsHandler }, { provide: HTTP_INTERCEPTORS, useClass: HttpsInterceptor, multi: true } ], bootstrap: [AppComponent] }) export class AppModule {}</pre><div class="contentsignin">ログイン後にコピー</div></div>

に追加する必要があります。拡張可能なサービスを作成するには複数のプロバイダーが使用されます。システムにはいくつかの機能が付属しています。デフォルトのプロバイダーに加えて、他のプロバイダーにサインアップすることもできます。デフォルトのプロバイダーと他のプロバイダーの組み合わせが、システムの動作を制御するために使用されます。

通知

コンソールにエラー ログを出力することは開発者にとっては非常に使いやすいですが、ユーザーにとってはもっと使いやすい方法が必要です。これらのエラーがいつ発生したかを知らせるGUIから。エラーの種類に応じて、2 つのコンポーネントが推奨されます:

Snackbar

と Dialog

• #Snackbar

  : 単純なプロンプトに推奨されます。フォームに必須フィールドが欠落している場合や、予測可能なエラー (無効な電子メール、ユーザー名が長すぎるなど) をユーザーに通知する場合などです。

• Dialog

  : この方法は、サーバー側またはクライアント側で不明なエラーがある場合に推奨されます。この方法により、より多くの説明を表示したり、call-to-action (ユーザーが電子メールを入力してバグを追跡できるようにするなど)。

すべての通知を処理するサービスを

shared

フォルダーに追加し、新しい services フォルダーを作成して、ファイルを作成します: notification.service.ts、コードは次のとおりです: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>import { Injectable } from &amp;quot;@angular/core&amp;quot;; import { MatSnackBar } from &amp;quot;@angular/material/snack-bar&amp;quot;; @Injectable({ providedIn: &amp;quot;root&amp;quot; }) export class NotificationService { constructor(public snackBar: MatSnackBar) {} showError(message: string) { this.snackBar.open(message, &amp;quot;Close&amp;quot;, { panelClass: [&amp;quot;error&amp;quot;] }); } }</pre><div class="contentsignin">ログイン後にコピー</div></div>Update

error-handler.ts

、NotificationService: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>import { ErrorHandler, Injectable, Injector } from &amp;quot;@angular/core&amp;quot;; import { HttpErrorResponse } from &amp;quot;@angular/common/http&amp;quot;; // Services import { NotificationService } from &amp;quot;../services/notification.service&amp;quot;; @Injectable() export class ErrorsHandler implements ErrorHandler { //Error handling需要先加载，使用Injector手动注入服务 constructor(private injector: Injector) {} handleError(error: Error | HttpErrorResponse) { const notifier = this.injector.get(NotificationService); if (!navigator.onLine) { //console.error(&amp;quot;Browser Offline!&amp;quot;); notifier.showError(&amp;quot;Browser Offline!&amp;quot;); } else { if (error instanceof HttpErrorResponse) { if (!navigator.onLine) { //console.error(&amp;quot;Browser Offline!&amp;quot;); notifier.showError(error.message); } else { // Handle Http Error (4xx, 5xx, ect.) // console.error(&amp;quot;Http Error!&amp;quot;); notifier.showError(&amp;quot;Http Error: &amp;quot; + error.message); } } else { // Handle Client Error (Angular Error, ReferenceError...) // console.error(&amp;quot;Client Error!&amp;quot;); notifier.showError(error.message); } console.error(error); } } }</pre><div class="contentsignin">ログイン後にコピー</div></div>##コンポーネント内の #If エラーがスローされると、素敵な snackbar

メッセージが表示されます:

ログとエラー トレース

もちろんユーザーは bug

ごとに報告することは期待できません。運用環境にデプロイされると、コンソール ログは表示されなくなります。したがって、データベースに書き込まれたカスタム ロジックでエラーをログに記録できるバックエンド サービス、または

Rollbar、Sentry、Bugsnag などの既存のソリューションを使用できるバックエンド サービスが必要です。 次に、単純なエラー追跡サービスを作成します。logging.service.ts

を作成します。

import { Injectable } from "@angular/core";
import { HttpErrorResponse } from "@angular/common/http";

@Injectable({
  providedIn: "root"
})
export class LoggingService {
  constructor() {}

  logError(error: Error | HttpErrorResponse) {
    // This will be replaced with logging to either Rollbar, Sentry, Bugsnag, ect.
    if (error instanceof HttpErrorResponse) {
      console.error(error);
    } else {
      console.error(error);
    }
  }
}

サービスを error-handler.ts

中：

import { ErrorHandler, Injectable, Injector } from "@angular/core";
import { HttpErrorResponse } from "@angular/common/http";
// Services
import { NotificationService } from "../services/notification.service";
import { LoggingService } from "../services/logging.service";

@Injectable()
export class ErrorsHandler implements ErrorHandler {
  //Error handling需要先加载，使用Injector手动注入服务
  constructor(private injector: Injector) {}
  handleError(error: Error | HttpErrorResponse) {
    const notifier = this.injector.get(NotificationService);
    const logger = this.injector.get(LoggingService);
    if (!navigator.onLine) {
      //console.error("Browser Offline!");
      notifier.showError("Browser Offline!");
    } else {
      if (error instanceof HttpErrorResponse) {
        if (!navigator.onLine) {
          //console.error("Browser Offline!");
          notifier.showError(error.message);
        } else {
          // Handle Http Error (4xx, 5xx, ect.)
          // console.error("Http Error!");
          notifier.showError("Http Error: " + error.message);
        }
      } else {
        // Handle Client Error (Angular Error, ReferenceError...)
        // console.error("Client Error!");
        notifier.showError(error.message);
      }
      // console.error(error);
      logger.logError(error);
    }
  }
}

ここまで、エラー処理メカニズム全体を紹介しました。これは、他のフレームワークや言語で開発されたプロジェクトの処理方法と基本的に似ています。

プログラミング関連の知識について詳しくは、プログラミング入門をご覧ください。 ！

以上がAngular でエラーを処理する方法を理解するための 1 つの記事の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。