Bulletproof the update auto-refresh with fallback mechanisms (related to #671)

After the initial fix, added multiple layers of reliability to ensure updates
ALWAYS auto-refresh, even in edge cases:

1. Fallback polling: GlobalUpdateProgressWatcher now polls /api/updates/status
   every 5 seconds as a safety net in case WebSocket events are dropped, missed,
   or the tab connects mid-update. This ensures tabs that join late or have
   WebSocket issues still detect in-progress updates.

2. Manual reload button: Added "Reload Now" button in UpdateProgressModal that
   appears after 5+ health check attempts during restart. Gives users an escape
   hatch if auto-reload is delayed (slow DNS, reverse proxy issues, etc.).

3. Already protected: Modal close button only shows when update is complete,
   preventing users from accidentally closing it mid-update.

These changes address all failure modes identified:
- Tabs without WebSocket: covered by polling fallback
- Tabs joining mid-update: covered by polling fallback
- Health check delays: covered by manual reload button
- User accidentally closing modal: already prevented

The combination of WebSocket events (primary), polling (fallback), health checks
(restart detection), and manual reload (escape hatch) should make this bulletproof.
This commit is contained in:
rcourtman 2025-11-08 23:19:51 +00:00
parent 706822ed58
commit c004c4517f
2 changed files with 50 additions and 6 deletions

View file

@ -121,8 +121,30 @@ function GlobalUpdateProgressWatcher() {
const navigate = useNavigate();
const [showProgressModal, setShowProgressModal] = createSignal(false);
const [hasAutoOpened, setHasAutoOpened] = createSignal(false);
let pollInterval: number | undefined;
// Watch for update progress events from WebSocket
// Fallback polling in case WebSocket events are missed
const pollUpdateStatus = async () => {
try {
const status = await UpdatesAPI.getUpdateStatus();
const inProgress = isUpdateInProgress(status.status);
if (inProgress && !showProgressModal() && !hasAutoOpened()) {
logger.info('Update in progress detected via polling fallback, showing progress modal', {
status: status.status,
message: status.message,
});
setShowProgressModal(true);
setHasAutoOpened(true);
} else if (!inProgress && hasAutoOpened()) {
setHasAutoOpened(false);
}
} catch (error) {
// Silently ignore polling errors
}
};
// Watch for update progress events from WebSocket (primary mechanism)
createEffect(() => {
const progress = wsContext?.updateProgress?.() as UpdateStatus | null;
@ -148,6 +170,18 @@ function GlobalUpdateProgressWatcher() {
}
});
// Start fallback polling on mount, stop on cleanup
onMount(() => {
// Poll every 5 seconds as a safety net
pollInterval = setInterval(pollUpdateStatus, 5000) as unknown as number;
});
onCleanup(() => {
if (pollInterval) {
clearInterval(pollInterval);
}
});
return (
<UpdateProgressModal
isOpen={showProgressModal()}

View file

@ -307,11 +307,21 @@ export function UpdateProgressModal(props: UpdateProgressModalProps) {
<svg class="w-5 h-5 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<div class="text-sm text-blue-800 dark:text-blue-200">
<Show when={wsDisconnected()} fallback={
<span>Pulse is restarting with the new version...</span>
}>
<span>Waiting for Pulse to complete restart. This page will reload automatically.</span>
<div class="flex-1">
<div class="text-sm text-blue-800 dark:text-blue-200">
<Show when={wsDisconnected()} fallback={
<span>Pulse is restarting with the new version...</span>
}>
<span>Waiting for Pulse to complete restart. This page will reload automatically.</span>
</Show>
</div>
<Show when={wsDisconnected() && healthCheckAttempts > 5}>
<button
onClick={() => window.location.reload()}
class="mt-2 px-3 py-1.5 text-xs font-medium text-white bg-blue-600 hover:bg-blue-700 rounded transition-colors"
>
Reload Now
</button>
</Show>
</div>
</div>