Angular에서 알 수 없는 예외 오류를 처리하는 방법 설명

앞에 써주세요.

코드를 아무리 잘 써도 모든 이상, 특히 생산 환경에서의 응용을 완전하게 처리할 수 없다. 대부분이 데이터가 사용자, 원격에서 나온 것이기 때문에 모든 데이터가 프로그램에 따라 발생하는 것을 보장하기 어렵다.사실상 테스트 인원이 발견하거나 고객이 보고하지 않으면 알 수 없다.따라서 응용에서 발생하는 미지의 이상을 보고하는 것은 매우 중요한 부분이다.
Angular는 기본적으로 전역적인 이상 관리를 제공합니다. 이상이 발생하면 Console 컨트롤러에 버립니다.NG-ZORRO을 사용할 때 아이콘이 불러오지 않은 이상 메시지를 자주 볼 수 있습니다. 이것도 이상 메시지의 일종입니다.

core.js:5980 ERROR Error: [@ant-design/icons-angular]:the icon setting-o does not exist or is not registered.
 at IconNotFoundError (ant-design-icons-angular.js:94)
 at MapSubscriber.project (ant-design-icons-angular.js:222)
 at MapSubscriber._next (map.js:29)
 at MapSubscriber.next (Subscriber.js:49)
 at RefCountSubscriber._next (Subscriber.js:72)
 at RefCountSubscriber.next (Subscriber.js:49)
 at Subject.next (Subject.js:39)
 at ConnectableSubscriber._next (Subscriber.js:72)
 at ConnectableSubscriber.next (Subscriber.js:49)
 at CatchSubscriber.notifyNext (innerSubscribe.js:42)

Angular는 ErrorHandler을 통해 이상 메시지를 통일적으로 관리하고 그 중의 HandleError 방법을 덮어쓰고 이상 메시지를 다시 처리하면 된다.

ErrorHandler

우선custom-error-handler를 만듭니다.ts 파일:

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

@Injectable()
export class CustomErrorHandler extends ErrorHandler {
 handleError(error: any): void {
 super.handleError(error);
 }
}

CustomErrorHandler는 현재 사용자 데이터, 현재 이상 메시지 대상 등을 완전하게 얻을 수 있으며 HttpClient를 통해 백엔드에 보고할 수 있습니다.
다음은 NG-ALAIN의 문서 사이트입니다. Google Analytics를 사용하여 분석하기 때문에 이상 메시지를 onerror에 전달하면 됩니다.

import { DOCUMENT } from '@angular/common';
import { ErrorHandler, Inject, Injectable } from '@angular/core';

@Injectable()
export class CustomErrorHandler extends ErrorHandler {
 constructor(@Inject(DOCUMENT) private doc: any) {
 super();
 }

 handleError(error: any): void {
 try {
  super.handleError(error);
 } catch (e) {
  this.reportError(e);
 }
 this.reportError(error);
 }

 private reportError(error: string | Error): void {
 const win = this.doc.defaultView as any;
 if (win && win.onerror) {
  if (typeof error === 'string') {
  win.onerror(error);
  } else {
  win.onerror(error.message, undefined, undefined, undefined, error);
  }
 }
 }
}

마지막으로 AppModule 모듈에 CustomErrorHandler를 등록합니다.

@NgModule({
 providers: [
  { provide: ErrorHandler, useClass: CustomErrorHandler },
 ]
})
export class AppModule { }

결론

사실 매우 중요한 작업이 하나 더 있다. 생산 환경에서 모두 압축된 후에 발생한 이상 소식도 실제 코드 줄과 같은 숫자가 될 수 없기 때문에 SourceMap의 지원이 필요하다. 물론 정상적인 생산 환경에서는 이 파일을 발표하지 않기 때문에 정확한 행렬 수를 얻으려면 중간 층을 빌려야 한다.백엔드에서 source-map 모듈을 이용하여 진정한 행렬 수치를 해석한다.
Angular의 의존 주입 (DI) 시스템은 우리로 하여금 일부 Angular 내장 모듈을 신속하게 교체하게 하여 현재 업무 차원을 수정하지 않을 때 특수한 수요를 신속하게 해결할 수 있다.

총결산

이 글은 Angular가 알 수 없는 오류를 처리하는 방법에 대해 소개합니다. 더 많은 관련 Angular가 알 수 없는 오류를 처리하는 내용은 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!