프로젝트를 진행하다보면 예상하지 못한 에러들을 만날 때가 많다.
이전까지는 에러 처리에 대해 깊이 생각해 본 적이 없었는데 이번에 인턴 동료들과 프로젝트를 진행하면서 에러 처리를 어떻게 해야 좋은 사용자 경험을 가져갈 수 있을지에 대한 이야기를 많이 했다.
그 과정에서 알게 된 내용에 대해 정리해보려고 한다.
위에 있는 다양한 에러를 대응하기 위해 자바스립트의 기본 에러 객체를 확장해 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는 단지 에러에 대한 정의일 뿐 클라이언트에서 어떻게 에러를 처리해야 하는지에 대한 답은 되지 않는다.
다음 글에서는 리액트에서 효율적으로 에러를 처리하는 방법에 대해 다룰 예정이다.