[2022-11-08] 에러란 무엇인가, 에러의 범위

https://tech.kakaopay.com/post/frontend-sentry-monitoring/

Sentry로 우아하게 프론트엔드 에러 추적하기 | 카카오페이 기술 블로그

 

 

이 글을 읽고 호기롭게 에러 핸들링 및 sentry 코드 작성 시작

 

class AxiosLogger {
  static log(res: AxiosResponse) {
    if (__DEV__) {
      const {method, url, params, data} = res.config;
      console.log({method, url, params, data});
    }
  }

  static error(err: AxiosErrorResponse) {
    const scope = new Sentry.Scope();

    const {method, url, params, data, headers} = err.config;

    const {message, statusCode} = err.response!.data;

    console.error({method, url, params, data, message, statusCode});

    scope.setContext('API 요청 상세정보', {
      method,
      url,
      params,
      data,
      headers,
    });

    scope.setContext('API 응답 상세정보', {statusCode, message});

    Sentry.captureException(err, () => scope);
  }
}

export default AxiosLogger;

이런식으로 axios 에러가 발생했을 때 해당 메서드, url등을 기록해놓았다. 어떤식으로 기록되는지 볼까

api url을 의도적으로 다르게해서 404 에러를 수집해 보았다. 

 

오 정리되서 보이니깐 꽤 좋은데...

 

문득 든 생각이 있다. 과연 이 에러가 가지는 의미가 뭐지?? 우리가 필요한 에러는 api 통신을 할때 발생한 에러가 아니라 

메모리 과다 사용으로 인한 앱 꺼짐 같은 좀더 딥한, 다양한 사용자들에게서 얻을 수 있는 좀더 고차원적인 에러가 필요한거 아닌가??

라는 의문이 들었다.

 

에러 핸들링에 대하여 찾아보니 에러는 크게 

1. 예측 가능한 에러

2. 예측 불가능한 에러로 나눌수 있었다.

 

예측가능한 에러는 내가 작성한 axios 에러 등같은 사용자가 잘못된 값을 입력했으니깐? 당연히 서버에서는 에러를 던지겠지 하고 자연스럽게 유추가 되는 에러들이고

예측 불가능한 에러는 500 에러나 네이티브 단에서 발생하는 에러로 생각할수 있을거같다.

 

음... 근데 예측 가능한 에러를 기록하는게 무슨 의미가 있지? 이미 try catch로 대응을 해놓았고 앱이 멈추는 일은 없을 것이다. 예측 불가능한 에러를 기록하기 위해 Sentry를 사용하는것이 아닌가

verycosy CTO님에게 물어보기 ㄲ

 

아주 좋은 답변을 들을수 있었다. 이러한 에러들은 "데이터"로의 역할을 할수 있다고 한다. 프론트엔드 개발자로서 사용자 친화적인 UX/UI를 만드는 것은 기본중에 기본이다. 이러한 에러들을 바탕으로 특정 기능에서 사용자 오류가 많이 발생한다면 해당 UI가 문제가 있다는 점을 파악할수 있다는 것이다. 아하~

 

 

앞으로 할일

1. 라이브러리 별로 에러 인스턴스 만들기 axios나 image crop picker 등

2. 기능별로(스택별로) 에러 인스턴스 만들기 오늘 이거 하다가 시간 다보냄... ㅠ.ㅠ