Feat: SnackGame API 연동 및 에러 핸들링 개선

[dev-dong-su]

💻 개요

• 신규 피처

• 231

  📋 변경 및 추가 사항

  에러 핸들링 개선

  기존에 message만 노출하던 RetryError, ErrorPage를 수정해 error code도 보여줄 수 있도록 변경했습니다.

  export interface FallbackProps {
  error?: Error & { code?: string };
  resetErrorBoundary?: () => void;
  message?: string;
  }

  누락된 RankingPage QueryBoundary추가

  RankingPage에 QueryBoundary가 누락된걸로 보여 컴포넌트 단위의 핸들링을 위해 QueryBoundary를 추가했습니다.

Pixi 에러 핸들링 전략

Pixi 의 경우 React 환경 바깥에서 동작하는 객체이기 때문에 내부에서 발생한 오류가 Errorboundary로 전파되지 않습니다. 이를 해결하기 위해 이벤트 기반 통신을 지원하는 Pixi의 EventEmitter 객체를 사용했습니다. 아래는 SnackGame 에러 핸들링을 도식화 한 그림입니다. EventEmitter의 이벤트는 SnackGameBase 렌더링 시 useEffect에 의해 등록되고 해제됩니다. Pixi에서는 기본적으로 try - catch를 사용해 비동기 작업의 에러를 잡고 EventEmitter의 emit 메서드를 통해 error 객체를 전달해 이벤트를 트리거 합니다. Emitter에 등록된 handler 함수가 useError의 setError 함수를 호출하고 useErrror의 useEffect 내부에서 error를 throw합니다. useEffect 내부에서 Error를 throw 하기에 React 라이프 사이클 내에서 발생한 오류로 식별하고 ErrorBoundary가 에러를 잡아낼 수 있게 됩니다.

Pixi API연동

기본적인 API 호출은 기존과 동일하게 axios를 사용해 호출합니다. API는 시작, 정지, 재시작, 종료와 같은 게임 상태를 관리하기에 응답들은 모두 storage 함수를 통해 localstorage에 저장됩니다. PuasePopup, SettingPopup등 일시 정지, 재시작과 관련된 요소들은 localstorage에 저장된 game-stats를 참고해 api를 호출 여부를 결정하고 호출하게 됩니다. 각 API호출 후 게임 상태를 반영하기 위해 API응답을 storage에 저장하게 됩니다.

    try {
      const gameStats = storage.getObject('game-stats');
      if (!gameStats) throw new Error('세션을 찾을 수 없습니다.');
      const data = await gamePause(gameStats.sessionId);
      storage.setObject('game-stats', { ...data });
    } catch (error) {
      eventEmitter.emit('error', error);
    }

💬 To. 리뷰어