[Angular] 에러 핸들러 만들기

Angular 에러 발생 이벤트를 모두 캐치하는 클래스를 만들어 봅시다.

1. 사용방법

내장 함수인 ErrorHandler를 활용하며, 최상위 모둘에 적용합니다.


에러를 처리하는 handleError 함수를 사용하여 에러 처리를 한 곳에서 진행할 수 있습니다.

2. Code

Module

Angular Standalone 방식이 아닌 경우 즉, Module 방식으로 구현한 경우 다음과 같이 MyErrorHandler를 작성합니다.

NgModule은 최상위을 의미합니다. app.module 등 최상위 모듈에서 providers를 추가하면 됩니다.

class MyErrorHandler implements ErrorHandler {
  handleError(error) {
    // Handle the exception here
  }
}

// 최상위 모듈
@NgModule({
  providers: [{ provide: ErrorHandler, useClass: MyErrorHandler }]
})
class AppModule {}

Standalone

Angular의 standalone 모드에서 커스텀 에러 핸들러를 구현하려면 bootstrapApplication에서 provideErrorHandler를 사용하거나 직접 프로바이더를 등록해야 합니다.

import { ErrorHandler, Injectable } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';

@Injectable()
class MyErrorHandler implements ErrorHandler {
  handleError(error: any): void {
    console.error('Global Error:', error);
  }
}

bootstrapApplication(AppComponent, {
  providers: [
    { provide: ErrorHandler, useClass: MyErrorHandler },
  ]
});

Standalone - local

만약 standalone 컴포넌트 내부에서 지역적으로 등록해야 하는 경우:

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

@Component({
  standalone: true,
  providers: [
    { provide: ErrorHandler, useClass: MyErrorHandler }
  ],
  template: ``
})
export class MyStandaloneComponent {

}