Svelte keyed-each duplicate keys silently kill hydration
Debugging a UI where keyboard shortcuts mysteriously stopped working and navigation appeared blank, despite tests passing and SSR markup looking correct
A Svelte {#each items as item (key)} block requires keys to be unique. If duplicates appear, Svelte throws during hydration — and because hydration aborts mid-stream, ALL onMount callbacks on that page silently fail to run. Symptoms: SSR HTML renders fine (the page LOOKS correct), but the entire client-side script never executes — no event listeners, no reactive updates, no keyboard handlers, nothing. The error logs to console but is otherwise invisible: page navigation appears to produce a blank/frozen page, every page-level interaction fails. The trap: when an append-only audit log feeds a UI list, normal usage patterns (e.g., resolve → undo → resolve again on the same identifier) appends duplicate records. The on-disk format is fine (append-only is correct for audit), but the listing function must dedupe before handing data to the UI. Lost about an hour debugging keyboard handler logic, capture vs bubble phase, env vars, and global-shortcut conflicts before checking the browser console for the actual error.
When ANY page-level interaction (shortcuts, click handlers, reactive updates) stops working in Svelte and SSR markup looks correct, FIRST check the browser console for hydration errors before debugging the interaction itself. Hydration failures cascade silently and break unrelated things. Also: any UI list fed from an append-only log needs a dedup step in the read path.