각도에서 ErrorHandler에 대해 이야기해 보겠습니다.

이 글은 angular의 예외 처리 ErrorHandler를 안내하고 예제를 통해 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.ts中添加

import { AppGlobalErrorhandler } from './service/error-handler.service';
...
providers:  [
...
 { provide: ErrorHandler, useClass: GlobalErrorHandler},
...
]

当程序中出现异常时，会自动调用handleError钩子，可判断是客户端还是来自服务端的异常。

3、在上面处理的是页面发生的异常，实际开发中同时也需要上报接口等的异常，当前使用的是ng-alain框架，所以在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点的写法中的不是通过自动调用handleError钩子来处理错误的，在Interceptor拦截器中只能处理HttpErrorResponse类型的错误，如果这里处理了，那么ErrorHandler将捕获不到。所以在Interceptor中，如果一定要通过handleError钩子函数来处理错误，那么就需要将HttpErrorResponseangular tutorial

"]

실제 개발 예시를 통해 사용법을 보여줍니다.
프런트엔드에 전역 오류 처리를 프런트엔드에 추가해야 하는 새로운 요구사항이 있는 경우- 종료하고 오류 로그를 보고합니다. 처리는 다음과 같습니다.

1. 오류 처리 error-handler.service.ts🎜

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

🎜2를 app에 추가합니다. module.ts 프로그램에서 예외가 발생하면 handleError 후크가 자동으로 호출되어 예외가 클라이언트에서 발생하는지 서버에서 발생하는지 확인합니다. 🎜🎜3. 위에서 처리하는 것은 페이지에서 발생하는 예외이며, 현재는 인터페이스 등의 예외도 보고해야 합니다. , 따라서 default.interceptor.ts에서 인터셉터에 코드를 추가하세요. 구체적인 참고 사항은 다음과 같습니다. ng-alain—네트워크 요청 차단🎜rrreee🎜위 3번의 작성 방법은 handleError 후크 오류를 처리하기 위해 Interceptor 인터셉터는 HttpErrorResponse 유형 오류만 처리할 수 있습니다. 여기서 처리되면 ErrorHandler 캡처할 수 없습니다. 따라서 Interceptor에서 handleError 후크 함수를 통해 오류를 처리해야 하는 경우 HttpErrorResponse 유형의 오류를 발생시켜야 합니다. 다음과 같습니다: 🎜rrreee🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 비디오🎜를 방문하세요! ! 🎜

위 내용은 각도에서 ErrorHandler에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!