Network errors show a retry option rather than silently failing
Why it matters
Network errors mid-stream — Wi-Fi dropouts, CDN hiccups, tunnel reconnects on mobile — will freeze the UI with isLoading stuck true if the error handler only catches HTTP-status errors and ignores TypeError: Failed to fetch. The user sees an animated typing indicator spinning forever with no recovery path short of a hard refresh, which also loses the partial response they had already generated. This is a routine failure mode on mobile networks and must be handled distinctly from API errors.
Severity rationale
High because a stuck UI with no retry path is indistinguishable from a broken product and happens routinely on mobile.
Remediation
In your chat hook at src/hooks/useChat.ts, branch explicitly on network-level errors (TypeError with a fetch-related message), always reset isLoading in the catch block, preserve any partial response already streamed, and attach a window.addEventListener('online', ...) to offer automatic recovery when connectivity returns.
catch (err) {
if (err instanceof TypeError && err.message.includes('fetch')) {
setError('Connection lost. Check your internet connection and try again.');
}
setIsLoading(false);
}
DetectionPro
The detection method for this pattern is part of AuditBuffet Pro.
The full method (what to look for, pass and fail conditions, and how results get reported) ships inside the AI Chat Visibility Audit. The pattern definition, severity rationale, and remediation remain openly licensed under CC-BY-4.0.
Taxons
History
- 2026-04-18·v1.0.0·Initial import from ai-chat-visibility·automated