Người dùng mất mạng giữa chừng thì frontend nên xử lý thế nào?

Hai việc: cho người dùng biết và tự phục hồi khi mạng trở lại.

Phát hiện. navigator.onLine cùng sự kiện online / offline cho biết máy có kết nối mạng hay không:

useEffect(() => {
  const sync = () => setOnline(navigator.onLine)
  addEventListener('online', sync)
  addEventListener('offline', sync)
  return () => { removeEventListener('online', sync); removeEventListener('offline', sync) }
}, [])

Lưu ý giới hạn: onLine === true chỉ nghĩa là máy có kết nối tới mạng, không đảm bảo ra được internet hay server còn sống. Vì vậy nó dùng để hiển thị banner, còn nguồn sự thật vẫn là request có thành công hay không.

Xử lý.

• Hiện banner "Đang mất kết nối" và vô hiệu hoá các nút gửi dữ liệu, thay vì để request thất bại im lặng.
• Khi sự kiện online bắn thì tự gọi lại các query đang lỗi, không bắt người dùng bấm F5.
• Retry có backoff cho lỗi mạng và 5xx (1s, 2s, 4s…), tối đa 2–3 lần. Không retry lỗi 4xx — sai dữ liệu hay thiếu quyền thì thử lại vẫn hỏng.
• Chỉ retry tự động các thao tác đọc. Với POST tạo đơn hàng, retry mù có thể tạo hai đơn; muốn retry an toàn thì API cần khoá idempotency.
• Với biểu mẫu đang nhập dở, lưu nháp cục bộ để mất mạng không xoá công sức người dùng.