Chia sẻ ca debug: Giải quyết vấn đề Suspense vô hạn do sử dụng IndexedDB sai cách

Trong sản phẩm của công ty, vài tuần trước chúng tôi bắt đầu sử dụng IndexedDB rất nhiều ở phía frontend. Sau đó, chúng tôi đã gặp phải một vấn đề không dễ đối mặt và xử lý, nên xin chia sẻ trải nghiệm debug đó.

Tóm tắt trong 3 dòng

1. Giữ nguyên hiện trường là cực kỳ quan trọng khi debug. Nếu đã có môi trường tái hiện được lỗi thì đừng động vào nó.
2. Khi sử dụng IndexedDB, nếu được triển khai theo cách chỉ đóng connection khi kết thúc session, thì nhất định phải đóng connection trong các event handler blocked và versionchange.
3. (Theo React 18 trở lên) Nếu bạn đang viết code có thể gây ra trạng thái suspended ngoài việc gọi API, hãy cẩn thận để không rơi vào Suspense vô hạn. Ngoài việc xử lý mục 2, chúng tôi cũng đã thay đổi cách triển khai để ném lỗi nếu cùng một Suspense fallback bị render quá 10 giây, bất kể lý do là gì.