[Angular] Error Handling

2023-08-29

Error Handling는 모든 애플리케이션의 필수적인 부분이며 Angular도 예외는 아닙니다. Angular 프레임워크는 다양한 시나리오에서 오류를 처리할 수 있는 강력한 도구 세트를 제공합니다.

이번 글에서는 Angular의 다양한 오류 유형과 이를 효과적으로 처리하는 방법을 살펴보겠습니다.

Types of Errors in Angular

Angular 애플리케이션에서 발생할 수 있는 오류에는 주로 두 가지 유형이 있습니다.

컴파일 시간 오류: 이러한 오류는 Angular 애플리케이션이 빌드되는 컴파일 단계에서 발생합니다. 컴파일 시간 오류는 일반적으로 코드의 구문 또는 논리적 오류를 나타내며 애플리케이션이 실행되지 못하게 합니다.
런타임 오류: 이러한 오류는 Angular 애플리케이션을 실행하는 동안 발생합니다. 런타임 오류는 네트워크 문제, 서버 오류, 코드의 논리적 오류 등 다양한 원인으로 인해 발생할 수 있습니다.

Handling Compile-time Errors

컴파일 시간 오류는 일반적으로 쉽게 수정할 수 있으며 Angular CLI는 개발자가 문제를 신속하게 식별하는 데 도움이 되는 자세한 오류 메시지를 제공합니다. 오류 메시지에는 오류가 발생한 줄 번호와 파일 이름이 포함됩니다. 개발자는 오류 메시지를 사용하여 문제를 해결하고 애플리케이션을 다시 빌드할 수 있습니다.

Handling Runtime Errors

런타임 오류는 컴파일 타임 오류보다 처리하기가 더 복잡합니다. 이러한 오류는 네트워크 문제나 서버 오류 등 다양한 이유로 인해 발생할 수 있습니다. 이러한 시나리오에서 애플리케이션은 오류를 적절하게 처리하고 사용자에게 유용한 피드백을 제공해야 합니다.

Angular는 ErrorHandler 클래스와 같은 런타임 오류를 처리하기 위한 내장 오류 처리기 세트를 제공합니다. ErrorHandler 클래스는 오류 처리를 위한 기본 구현을 제공하는 추상 클래스입니다. 개발자는 ErrorHandler 클래스를 확장하고 사용자에 맞게 오류 처리 로직을 구현할 수 있습니다.

Custom Error Handling

개발자는 ErrorHandler 클래스를 사용하여 사용자에 맞게 오류 처리 로직을 구현할 수 있습니다. ErrorHandler 클래스에는 응용 프로그램에서 오류가 발생할 때 호출되는 handlerError(error: any)라는 단일 메서드가 있습니다. 이 메서드는 오류 개체를 매개 변수로 사용하고 개발자에게 오류를 처리할 수 있는 기회를 제공합니다.

다음은 커스텀 오류 처리기 구현의 예입니다.

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

export class CustomErrorHandler implements ErrorHandler {
  handleError(error: any) {
    // Implement custom error handling logic here
    console.error(error);
  }
}

위의 예에서는 ErrorHandler 클래스를 implements 하고 handlerError() 메서드를 재정의하는 CustomErrorHandler 클래스를 만들었습니다. 이 예에서는 단순히 오류를 콘솔에 기록하지만 개발자는 사용자에게 친숙한 오류 메시지를 표시하는 등 사용자 지정 오류 처리 로직을 구현할 수 있습니다.

Error Interceptors

Angular는 인터셉터를 사용하여 HTTP 응답을 가로채고 전역적으로 오류를 처리하는 메커니즘을 제공합니다. 인터셉터를 사용하면 개발자는 HTTP 응답이 호출 컴포넌트에 반환되기 전에 이를 가로챌 수 있습니다. 개발자는 인터셉터를 사용하여 오류를 전체적으로 처리하고 일관된 사용자 경험을 제공할 수 있습니다.

다음은 HTTP 오류 인터셉터의 예입니다.

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

@Injectable()
export class HttpErrorInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<any>, next: HttpHandler) {
    return next.handle(request).pipe(
      catchError((error: HttpErrorResponse) => {
        let errorMessage = '';
        if (error.error instanceof ErrorEvent) {
          // client-side error
          errorMessage = `Error: ${error.error.message}`;
        } else {
          // server-side error
          errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
        }
        console.error(errorMessage);
        return throwError(errorMessage);
      })
    );
  }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';

import { AppComponent } from './app.component';
import { HttpErrorInterceptor } from './http-error.interceptor';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule],
  providers: [{ provide: HTTP_INTERCEPTORS, useClass: HttpErrorInterceptor, multi: true }],
  bootstrap: [AppComponent],
})
export class AppModule {}

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  template: `
    <button (click)="makeRequest()">Make Request</button>
    <div *ngIf="error">{{ error }}</div>
  `,
})
export class AppComponent {
  error: string;

  constructor(private http: HttpClient) {}

  makeRequest() {
    this.http.get('https://someURL.con/posts/1').subscribe(
      (data) => console.log(data),
      (error) => (this.error = error)
    );
  }
}

위 코드에서는 HttpClient 서비스를 사용하여 API 에 GET 요청을 보냅니다. 요청이 성공하면 응답 데이터가 콘솔에 기록됩니다. 오류가 있는 경우 템플릿에 오류 메시지가 표시됩니다.

HttpErrorInterceptor를 사용하면 요청 중에 발생하는 모든 오류가 인터셉터에 의해 차단되어 처리됩니다. 오류 메시지는 콘솔에 기록되고 관찰 가능한 오류로 발생하며 컴포넌트에서 이를 포착하고 처리할 수 있습니다.

Angular 앱에서 오류 인터셉터를 사용하면 오류 처리 로직을 중앙 집중화하고 모든 HTTP 요청에서 오류를 처리하는 일관된 방법을 제공할 수 있습니다. 이를 통해 코드 유지 관리가 더 용이해지고 앱에 대한 사용자 경험이 더 좋아질 수 있습니다.

결론

오류 처리는 강력하고 안정적인 애플리케이션을 구축하는 데 필수적인 부분입니다. Angular에는 try/catch 블록 사용, 컴포넌트 수준에서 오류 처리, 오류 인터셉터 사용 등 오류를 처리하는 다양한 방법이 있습니다. 포괄적인 오류 처리 전략을 구현하면 애플리케이션이 사용자에게 원활하고 오류 없는 환경을 제공하도록 할 수 있습니다.

hgko's IT Blog

ProgrammingFrontendAngular