Debugging-Fallstudie: Lösung eines Problems mit unendlichem Suspense durch fehlerhafte Nutzung von IndexedDB

Seit einigen Wochen nutzen wir im Frontend unseres Unternehmensprodukts intensiv IndexedDB. Danach sind wir auf ein Problem gestoßen, das sich nicht leicht lösen ließ, und ich möchte meine Debugging-Erfahrung bei der Behebung teilen.

Zusammenfassung in 3 Punkten

1. Die Bewahrung des Tatorts ist beim Debugging äußerst wichtig. Wenn man eine reproduzierbare Umgebung hat, sollte man sie nicht anfassen.
2. Wenn man IndexedDB so implementiert hat, dass Verbindungen erst beim Beenden der Sitzung geschlossen werden, muss man die Verbindung in den Event-Handlern blocked und versionchange unbedingt schließen.
3. (Ab React 18) Wenn man neben API-Aufrufen auch Code schreibt, der einen suspended-Zustand auslösen kann, sollte man darauf achten, nicht in unendlichem Suspense hängen zu bleiben. Zusätzlich zur Behandlung aus Punkt 2 haben wir die Implementierung so geändert, dass unabhängig vom Grund ein Fehler ausgelöst wird, wenn derselbe Suspense-Fallback länger als 10 Sekunden gerendert wird.