Network errors show a retry option

Network failures are not edge cases — they happen routinely on mobile connections, during backend deployments, and when third-party services degrade. CWE-755 (Improper Handling of Exceptional Conditions) applies when error states are handled for success paths but not for network failures. ISO 25010 reliability.fault-tolerance requires that faults be recoverable. A component that shows a loading spinner indefinitely on a network failure, or renders nothing at all, strands users in an ambiguous state with no self-service recovery. Users without a retry button must reload the entire page, losing any other in-progress work.

Add explicit error states with retry buttons to all data-fetching components. With TanStack Query:

const { data, error, refetch, isError } = useQuery({
  queryKey: ['items'],
  queryFn: fetchItems,
  retry: 3,
  retryDelay: attemptIndex => Math.min(1000 * 2 ** attemptIndex, 30000),
})

if (isError) return (
  <div>
    <p>Failed to load. Check your connection.</p>
    <button onClick={() => refetch()}>Try again</button>
  </div>
)

For manual fetch calls without a library, store a retry counter in state and re-trigger the fetch on button click. Never let a component stay in a loading spinner state indefinitely — always transition to an error state with a retry action after a timeout.