고급 Angular 오류 처리: 최고의 실천 방법, 아키텍처 팁 및 코드 예제
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
Angular 앱 개발자 (특히 기업, 금융 기술, SaaS 플랫폼 개발자)
난이도: 중급~고급 (아키텍처 패턴 및 RxJS 사용 경험 필요)
핵심 요약
HttpInterceptor
와ErrorHandler
를 활용한 HTTP/네트워크 오류 관리ErrorService
를 통해 중앙 집중식 로깅 및 UI 피드백 구현retry()
및fallback
로직으로 시스템의 회복력 강화- Sentry, LogRocket 등 외부 서비스를 통한 안전한 오류 추적
섹션별 세부 요약
1. 오류 유형 및 처리 전략
- HTTP/네트워크 오류(404, 500, 타임아웃):
HttpInterceptor
+retry()
+catchError()
- 런타임 오류(TypeError, undefined):
ErrorHandler
+try/catch
- 사용자 오류(폼 입력 오류): UI 검증 + 내부 메시지
- RxJS 스트림 오류:
.pipe(catchError())
+ 대체 스트림 - 제3자 라이브러리 오류: 안전한 호출 검증
2. 핵심 코드 예제
ErrorInterceptor
구현:
```ts
@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
intercept(req: HttpRequest
return next.handle(req).pipe(
catchError((error: HttpErrorResponse) => {
this.errorService.handleHttpError(error);
return throwError(() => error);
})
);
}
}
```
GlobalErrorHandler
설정:
```ts
providers: [{ provide: ErrorHandler, useClass: GlobalErrorHandler }]
```
ErrorService
로깅 로직:
```ts
private logError(error: any) {
console.error('Logging to external service:', error);
}
```
3. 오류 추적 도구 활용
- Sentry: 전반적인 오류 추적 (✅ 지원)
- LogRocket: 세션 재생 및 로깅 (✅ 지원)
- Firebase Crashlytics: 모바일 및 웹 오류 로깅 (⚠️ 제한적 지원)
- Rollbar: DevOps 수준의 가시성 (✅ 지원)
4. 주의해야 할 오류 처리 반패턴
- 오류 무시: 로깅 없이 오류 무시 ❌
- 사용자에게 원시 오류 메시지 노출:
error.message
사용 ❌ - 중복된 오류 메시지: 모든 컴포넌트에 반복 ❌
- 중앙 집중식 로깅 미사용: 오류 처리 분산 ❌
- 불안정한 네트워크 대비 재시도 전략 미구현 ❌
5. 최고의 실천 방법
@my-org/error-handler
라이브러리 생성: 공유 가능한ErrorInterceptor
,ErrorService
사용- 단위 테스트: 오류 분기 대비 테스트 구현
- 커스텀 오류 페이지: 404, 500 등 예외 처리
- 제3자 SDK 호출: 안전한 래핑 로직 적용
결론
- 재사용 가능한
ErrorService
와 전역ErrorHandler
구성으로 오류 관리 중앙화 retry()
및fallback
로직으로 불안정한 API 대응- Sentry 등 외부 서비스를 활용한 실시간 오류 추적
- 모듈 간 공유 가능한 라이브러리로 확장성 향상 및 테스트 간소화