[FE] 네트워크 상태가 오프라인일 경우 토스트로 안내하는 기능

[pakxe]

issue

• close [FE] 네트워크 상태가 오프라인일 경우 토스트로 안내하는 기능 #562

구현 목적

네트워크 연결이 오프라인일 경우 현재는 아무 처리가 되어있지 않습니다. 따라서 오프라인일 때 네트워크 요청을 날리는 경우 무한 로딩이 발생하고 있는 상태인데요.

사용자에게 현재 네트워크 오프라인 상태임을 알리기 위해 오프라인 상태가 되면 토스트를 띄워주도록 합니다.

구현 내용

구현을 위해 필요한 과정은 다음과 같습니다.

1. 네트워크 상태를 감지해 토스트를 띄우기 위한 컴포넌트 제작

2. App.tsx에서 1번의 컴포넌트를 호출

1. 네트워크 상태를 감지해 토스트를 띄우기 위한 컴포넌트 제작

네트워크 상태를 실시간으로 감지하기 위해 mdn문서에 나와있는 'offline', 'online'이벤트를 사용해보았습니다.

컴포넌트가 렌더링될 때 useEffect를 사용해 offline, online 이벤트에 콜백함수를 장착합니다.

컴포넌트가 사라질 때는 클린업 함수를 사용해 offline, online 이벤트에 장착했던 콜백을 제거합니다.

const addNetworkStateEventListener = () => {
    window.addEventListener('online', handleNetworkOnline);
    window.addEventListener('offline', handleNetworkOffline);
  };

  const removeNetworkStateEventListener = () => {
    window.removeEventListener('online', handleNetworkOnline);
    window.removeEventListener('offline', handleNetworkOffline);
  };

  useEffect(() => {
    addNetworkStateEventListener();

    return removeNetworkStateEventListener;
  }, []);

2. App.tsx에서 1번의 컴포넌트를 호출

const App: React.FC = () => {
  return (
    <div>
       <NetworkStateCatcher /> // ⬅️ 여기!
       <Outlet />
    </div>
  );
};

구현 결과

2024-09-16.9.21.02.mov

[github-actions]

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-ethspwhxai.chromatic.com/

[jinhokim98]

네트워크 에러까지 신경 써준 디테일 너무 좋아요!
에러에 대해서 하나 더 짚어봐도 좋을 것 같은 내용이 있는데
에러가 터졌을 때 retry를 몇 회로 설정할 것인가!에 대해서도 논의해보면 좋을 것 같아요!

이러다 웨디 에러 처리의 장인, 마스터가 될 듯!!
(이런 웨디 꿀꺽한다면?ㅋㅋ)

[jinhokim98]

혹시 마지막에 null은 어떤 이유로 넣으신걸까요?

[soi-ha]

에러처리의 고수가 되어가는 웨-디

[github-actions]

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-vdkkrkwucn.chromatic.com/

[github-actions]

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-vpauvrgkgq.chromatic.com/