Angular の ErrorHandler について話しましょう

この記事では、angular での例外処理 ErrorHandler を理解し、例を通して ErrorHandler の使用方法を紹介します。

ErrorHandler

ErrorHandler のデフォルト実装は、エラー メッセージを console に出力します。エラー処理をインターセプトするには、このデフォルトの動作をアプリケーションが必要とする動作に変更するカスタム例外ハンドラーを作成します。 [関連チュートリアルの推奨事項: "angular チュートリアル"]

実際の開発での例を使用して使用法を示します:
フロントエンドが新しい要件を提案する場合は、グローバルフロントエンドへのエラー 次のようにエラー ログを処理して報告します:

1. エラー処理を作成します error-handler.service.ts

import { HttpClient } from '@angular/common/http';
import { ErrorHandler, Injectable } from '@angular/core';

@Injectable()
export class AppGlobalErrorhandler implements ErrorHandler {
    constructor(private http:HttpClient){ }
  // 当程序中出现异常时，会自动调用 handleError 钩子，可判断是客户端还是来自服务端的异常。
  handleError(error) {
  	// 打印错处信息
    console.warn("customize catch execption:" , error.stack);
    // ...
	// 异常处理逻辑
	// ...
    if(['ExpressionChangedAfterItHasBeenCheckedError'].every(item => !error.stack.includes(item))){
    	// 上报错误日志
        this.http.post('/api/errorLog', {
            url: location.href,
            type: 'WEB',
            error: error.stack,
            message: error.toString()
        }).subscribe()
    }
  }
}

2. ## で#app.module <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">import { AppGlobalErrorhandler } from &amp;#39;./service/error-handler.service&amp;#39;; ... providers: [ ... { provide: ErrorHandler, useClass: GlobalErrorHandler}, ... ]</pre><div class="contentsignin">ログイン後にコピー</div></div>

を .ts

に追加します。プログラムで例外が発生すると、

handleError フックが自動的に呼び出され、その例外が原因かどうかが判断されます。クライアントまたはサーバー。

3. 上記で扱っているのはページ上で発生した例外ですが、実際の開発ではインターフェースなどの例外も報告する必要があります。現在使用されているため、

default.interceptor.ts インターセプターにコードを追加します。具体的な参照: ng-alain—ネットワーク要求のインターセプト

  private handleData(
    event: HttpResponse<any> | HttpErrorResponse,
    data?:any
  ): Observable<any> {
	// 判断是否为错误实例
    if (event instanceof HttpErrorResponse && event.url.indexOf(&#39;api/errorLog&#39;) === -1) {
		// 上报接口错误日志
      this.http.post(&#39;/api/errorLog&#39;, {
        url: event.url,
        type: &#39;INTERFACE&#39;,
        message: event.message,
        status: event.status,
        statusText: event.statusText,
        param: JSON.stringify(data[&#39;body&#39;]||undefined),
        body: JSON.stringify((event as any)[&#39;body&#39;] || undefined),
        error:JSON.stringify( event.error),
      }).subscribe()
    }

    return of(event);
  }

// 拦截器
  intercept(
    req: HttpRequest<any>,
    next: HttpHandler,
  ){
    return next.handle(newReq).pipe(
     // 当请求发生错误时，使用一个管道把错误发送给错误处理器
      catchError((err: HttpErrorResponse) => this.handleData(err,newReq)),
      mergeMap((event: any) => {
        // 允许统一对请求错误处理，这是因为一个请求若是业务上错误的情况下其HTTP请求的状态是200的情况下需要
        if (event instanceof HttpResponse && event.status === 200)
          return this.handleData(event);
        // 若一切都正常，则后续操作
        return of(event);
      }),
    );
  }

上記のポイント 3 の記述方法は自動ではありません。 callhandleError

フックはエラーの処理に使用されます。

Interceptor インターセプターでは、タイプ HttpErrorResponse のエラーのみを処理できます。ここで処理される場合、ErrorHandler はキャプチャされません。到着します。したがって、Interceptor では、handleError フック関数を通じてエラーを処理する必要がある場合、HttpErrorResponse タイプのエラーをスローする必要があります。次のとおりです:

catchError((error: HttpErrorResponse) => {
        if (error.status === 401) {
          // 跳到登录页或者刷新token
        } else {
          return throwError(error);
        }
 })

プログラミング関連の知識については、プログラミング ビデオをご覧ください。 ！

以上がAngular の ErrorHandler について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。