Angular에서 오류를 처리하는 간단한 접근 방식

각도 오류는 크게 두 가지 유형으로 분류할 수 있습니다.

HTTP 오류

클라이언트 오류

HTTP 오류는 외부 API 예제를 처리할 때마다 발생합니다. 끝점을 호출하고 네트워크가 다운되거나 호출 서버를 만드는 동안 요청을 제대로 처리할 수 없었고 그 대가로 오류 등을 보냅니다. 서버와 관련된 모든 시나리오 5xx 및 4xx 역할의 응답 상태가 이 범주에 속합니다. Angular에서는 HttpErrorResponse 로 식별됩니다.



클라이언트(브라우저) 오류는 코드 작성 중 개발자의 실수로 인해 런타임에 주로 발생하는 오류입니다. 이러한 오류의 유형은 다음과 같습니다. 그러한 예:

(windows as any).abc.pqr = '';
// here property `abc` is not defined on global window object so
// `(windows as any).abc` will result into undefined and
// undefined.pqr will throw TypeError: stating that we are
// trying to set something on a property that does not exists

따라서 개발자가 유발하는 이러한 오류는 클라이언트(브라우저) 오류 범주에 포함됩니다.



두 상황 모두에서 가장 고통받는 것은 최종 사용자입니다. 이러한 오류가 발생할 때마다 JavaScript 실행이 중지되고 화면이 정지되어 최종 사용자에게 좋지 않은 경험을 제공합니다. 따라서 이러한 오류를 처리하고 사용자를 오류 페이지로 라우팅하고 EvalError와 같은 일부 사용자 정의 메시지를 표시하는 것과 같은 관련 작업을 수행하는 것이 좋습니다.

Angular는 이러한 오류를 포착하는 데 사용할 수 있는 기본 메서드InternalError를 제공하는 클래스RangeError를 제공합니다.

@Injectable()
class MyErrorHandler implements ErrorHandler {
  handleError(error: Error) {
    // do something with the exception like router.navigate(['/error-page']);
  }
}

ReferenceError를 사용하여 오류를 포착하고 사용자를 일반 SyntaxError로 리디렉션할 수 있습니다. 여기서 한 가지 문제는 사용자 정의URIError 구현에서 도우미 서비스를 어떻게 주입할 것인가입니다.

우리가 일반적으로하는 것처럼 서비스를 주입하면

constructor(private router: Router){}

오류가 발생합니다.

Error: NG0200: Circular Dependency in DI detected for ErrorHandler

Angular는 공급자보다 먼저 생성TypeError하지 않으면 적용 초기 단계에서 발생하는 오류를 포착할 수 없습니다. 따라서 공급자는 Something Went Wrong! Please try again later! 에서 사용할 수 없습니다. 따라서 인젝터를 사용하여 종속 서비스를 주입해야 합니다.

@Injectable()
class MyErrorHandler implements ErrorHandler {
  constructor(private injector: Injector){}

  handleError(error: Error) {
    const router = this.injector.get(Router);
    router.navigate(['/error-page']);
  }
}

이것은 한 문제를 해결하지만 다른 문제로 이어집니다.

Navigation triggered outside Angular zone, did you forget to call ngZone.run()

여기서 문제는 도우미 서비스를 주입하는 동안 이전과 정확히 동일합니다. ErrorHandle은 일반 ngZone 외부에서 실행됩니다. 따라서 변경 감지의 규칙적인 흐름이 방해받지 않도록 영역 외부에서 탐색이 이루어져야 합니다.

@Injectable()
class MyErrorHandler implements ErrorHandler {
  constructor(
    private injector: Injector,
    private zone: NgZone,
  ){}

  handleError(error: Error) {
    const router = this.injector.get(Router);
    this.zone.run(() => router.navigate(['/error-page']));
    console.error('Error Caught: ', error);
  }
}

이를 달성했으면 루트 모듈(예: AppModule)에 이 서비스를 제공해야 합니다.

@NgModule({
  providers: [{provide: ErrorHandler, useClass: MyErrorHandler}]
})
class MyModule {}

위의 ErrorHandler 메소드에 더 많은 사용자 정의를 추가할 수 있습니다.

handleError(error: Error) {
  if (error instanceof HttpErrorResponse) {
    // HTTP related error
  } else if (error instanceof TypeError || error instanceof ReferenceError) {
    // Runtime exceptions mostly induced by Developer's code
  } else {
    // catch-all: catch rest of errors
  }
}