デバッグ事例共有: 誤った IndexedDB 利用による無限 Suspense 問題の解決

数週間前から会社の製品でフロントエンドに IndexedDB を多く使い始めたのですが、その後に直面し、解決が簡単ではなかった問題をデバッグした経験を共有します。

3行要約

1. 現場保存はデバッグに非常に重要だ。再現できる環境を保持しているなら触らないようにしよう。
2. IndexedDB を使う際、セッションを終了してはじめてコネクションが閉じる形で実装していたなら、必ず blocked と versionchange イベントハンドラーでコネクションを閉じておくべきだ。
3. （React 18 以上基準）API を呼び出すこと以外にも suspended 状態を引き起こしうるコードを書いているなら、無限 Suspense に陥らないよう注意が必要だ。私たちは 2 番の処理に加えて、理由を問わず同じ Suspense fallback が 10 秒以上レンダリングされている場合はエラーを投げるように実装を変更した。