클라이언트에서 에러 처리하기(1)

프로젝트를 진행하다보면 예상하지 못한 에러들을 만날 때가 많다.
이전까지는 에러 처리에 대해 깊이 생각해 본 적이 없었는데 이번에 인턴 동료들과 프로젝트를 진행하면서 에러 처리를 어떻게 해야 좋은 사용자 경험을 가져갈 수 있을지에 대한 이야기를 많이 했다.
그 과정에서 알게 된 내용에 대해 정리해보려고 한다.

일반적인 에러 해결 방법

• 예상 가능하고 해결 가능한 에러
  • 애플리케이션 안에서 적절한 가이드를 주거나 별도의 페이지를 만들어 안내한다.
  • 에러 메시지와 함께 사용자의 액션을 유도하기
• 예상 가능하지만 해결 불가능한 에러
  • 사용자의 악의적인 접근에 의한 보안과 관련된 에러가 많으므로 사전에 안전한 애플리케이션을 만들어야 한다.
• 예상 불가능하지만 해결 가능한 에러
  • 네트워크 에러 : 일시적인 에러임을 사용자에게 명시하고 바로 이전 액션을 다시 시도할 수 있는 가이드를 제공한다.
  • 에러의 영향 범위가 중요한 에러는 애플리케이션 전반에 영향을 끼치지 않도록 해야하며 실패한 영역에 대해서만 회복 가능하도록 처리해야 한다.
• 예상 불가능하며 해결도 불가능한 에러
  • 테스트를 통해 사전에 막아야 한다.
  • sentry와 같은 모니터링 도구를 통해 에러를 트래킹해야 한다.
  • 고객이 해결불가능한 에러이므로 고객센터로 쉽게 문의할 수 있는 진입 경로를 열어주면 사용자 경험 향상에 좋다.

💡 모든 경우에서 에러는 최대한 작은 범위에서 catch되어야 한다.

클라이언트에서 발생 가능한 에러

• 데이터 영역에서의 에러
• 화면 영역에서의 에러
• 외부 요인에 의한 에러
  • 보안과 관련된 악의적인 요청 등
• 런타임 에러

Custom Error Class 선언하기

위에 있는 다양한 에러를 대응하기 위해 자바스립트의 기본 에러 객체를 확장해 custom error를 선언할 수 있다.
사전에 서버와 논의를 하고 custom error를 선언하면 에러 처리시의 정합성을 높일 수 있다.
message도 서버에서 던져주는 message가 아닌 프론트에서 선언한 message를 보여줄 수도 있으며 redirectUrl이나 notFound과 같은 속성을 추가할 수도 있다.

export function isInstanceOfAPIError(object: unknown): object is ApiError {
  return object instanceof ApiError && ('redirectUrl' in object || 'notFound' in object);
}

export class ApiError extends Error {
  redirectUrl: string = '';
  notFound: boolean = false;
}

export class NotFoundError extends ApiError {
  name = 'NotFoundError';
  message = '찾을 수 없습니다.';
  notFound = true;
}

export class AuthError extends ApiError {
  name = 'AuthError';
  message = '인증되지 않은 사용자입니다.';

  redirectUrl = '/login';
}

export class ServerError extends ApiError {
  name = 'serverError';
  message = 'server error';
}

custom error는 단지 에러에 대한 정의일 뿐 클라이언트에서 어떻게 에러를 처리해야 하는지에 대한 답은 되지 않는다.
다음 글에서는 리액트에서 효율적으로 에러를 처리하는 방법에 대해 다룰 예정이다.