디버깅 사례 공유: 잘못된 IndexedDB 사용으로 인한 무한 Suspense 문제 해결

회사 제품에서 몇 주 전부터 프론트엔드에 IndexedDB를 많이 사용하기 시작했는데요. 그 이후 맞닥뜨려 해결하기 쉽지 않았던 문제를 디버깅한 경험을 공유합니다.

3줄 요약

1. 현장 보존은 디버깅에 굉장히 중요하다. 재현되는 환경을 보유했다면 건드리지 말자.
2. IndexedDB를 사용할 때, 세션을 종료해야만 커넥션이 닫히는 형태로 구현했다면 반드시 blocked 와 versionchange 이벤트 핸들러에서 커넥션을 닫아줘야 한다.
3. (React 18 이상 기준) API를 호출하는 것 외에도 suspended 상태를 유발할 수 있는 코드를 작성하고 있다면 무한 Suspense에 빠지지 않게 조심해야 한다. 우리는 2번의 처리에 더해, 이유를 막론하고 동일한 Suspense fallback이 10초 이상 렌더링되고 있다면 에러를 던지도록 구현을 변경했다.