🚨 이슈 발생

평소처럼 센트리를 들어가 전날 어떤 오류가 있었는지 살펴보고 있었습니다.
근데 유저 3명에게 똑같은 오류가 14번 발생한 것을 목격해버렸습니다.

색상을 선택하는 기능은 저희 서비스에 대시보드 생성 할때밖에 없기 때문에 어디서 오류가 발생하는지는 쉽게 찾을 수 있었습니다.

발생한 오류는 대시보드를 선택할 때 색깔을 지정할 수 있는데 사용자가 아무색도 선택하지 않고 대시보드를 생성하려고 했기 때문에 발생한 오류입니다.

선택하라는 설명도 안 되어있고 1초가 급한 한국인들이라면 대시보드 제목만 입력하고 바로 생성을 눌러버렸을 거 같았습니다.(저도 그랬거든요.....)

🔓 해결

 const [selectedColor, setSelectedColor] = useState<string | undefined>("#7AC555");

이 문제같은 경우에는 간단하게 처리할 수 있었다.
선택된 색깔을 useState로 상태를 관리하고 있었는데 제일 첫번 째 색깔에 해시값을 기본값으로 지정하여 사용자가 실수로 색깔을 선택을 안 해도 기본색인 연두색(#7AC555)으로 대시보드 생성을 할 수 있도록 하였습니다.

---

🚨 이슈 발생

이번에는 타입 에러 오류와 토큰 인증 오류들이 많이 발생하여 원인을 살펴보았습니다.

🤔 원인

타입 에러 오류는 대시보드 페이지에서 지속적으로 발생하고 있음을 확인했습니다. 저희는 이 페이지에 로그인하지 않으면 접근할 수 없도록 설정해 놓았습니다. 이는 할 일 리스트를 불러오는 기능이 로그인된 사용자에게만 제공되기 때문에, 로그인을 하지 않으면 대시보드 페이지에 접근할 수 없도록 한 것입니다.

그러나 문제가 발생한 이유는 토큰이 만료된 후에도 서버에 만료된 토큰값을 포함한 GET 요청을 계속 보내기 때문입니다. 이로 인해 토큰 인증 오류(401 오류)가 지속적으로 발생했습니다. 이러한 인증 오류로 인해 데이터를 가져오지 못해 렌더링 도중에 오류가 계속 발생한 것입니다.

🔓 해결

client.interceptors.response.use(
  (res) => res,
  (err) => {
    if (err.response && err.response.status === 500) {
      Sentry.withScope((scope) => {
        scope.setTag("api", "Network500Error"); // 태그 설정
        scope.setLevel("fatal"); // 레벨 설정
        Sentry.captureException(new Error("서버 500 에러 발생")); // 센트리로 보낼 에러 메세지
      });
    }
    if (err.response && err.response.status === 401) {
      localStorage.removeItem("token");
      localStorage.removeItem("user");
      alert("다시 로그인 해주세요.");
    }

    return Promise.reject(err);
  }
);

export default client;

axios에 포함된 인터셉터 기능을 활용하여, 응답값을 받기 전에 401 오류가 발생하는 경우 로컬스토리지에서 토큰과 사용자 정보를 삭제하고 로그인 페이지로 이동하도록 기능을 추가하여 문제를 해결해보았습니다.