diff --git a/frontend/nginx.conf b/frontend/nginx.conf index e005e331..312acad6 100644 --- a/frontend/nginx.conf +++ b/frontend/nginx.conf @@ -8,12 +8,19 @@ server { gzip on; gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript; + # index.html — never cache (so deploys serve new chunk references) + location = /index.html { + add_header Cache-Control "no-cache, no-store, must-revalidate"; + add_header Pragma "no-cache"; + add_header Expires "0"; + } + # Handle SPA routing - serve index.html for all routes location / { try_files $uri $uri/ /index.html; } - # Cache static assets + # Cache hashed static assets (immutable — filenames change on rebuild) location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2)$ { expires 1y; add_header Cache-Control "public, immutable"; diff --git a/frontend/src/components/common/RouteError.tsx b/frontend/src/components/common/RouteError.tsx index e06c3082..71e9ae63 100644 --- a/frontend/src/components/common/RouteError.tsx +++ b/frontend/src/components/common/RouteError.tsx @@ -1,14 +1,44 @@ +import { useEffect } from 'react' import { useRouteError, isRouteErrorResponse, useNavigate } from 'react-router-dom' import { cn } from '@/lib/utils' +function isChunkLoadError(error: unknown): boolean { + if (!(error instanceof Error)) return false + const msg = error.message.toLowerCase() + return ( + msg.includes('failed to fetch dynamically imported module') || + msg.includes('importing a module script failed') || + msg.includes('loading chunk') || + msg.includes('loading css chunk') + ) +} + +const RELOAD_KEY = 'rf_chunk_reload' + export function RouteError() { const error = useRouteError() const navigate = useNavigate() + // Auto-reload once on chunk load failures (stale deploy) + useEffect(() => { + if (isChunkLoadError(error)) { + const lastReload = sessionStorage.getItem(RELOAD_KEY) + const now = Date.now() + // Only auto-reload if we haven't reloaded in the last 10 seconds (prevent loops) + if (!lastReload || now - Number(lastReload) > 10_000) { + sessionStorage.setItem(RELOAD_KEY, String(now)) + window.location.reload() + } + } + }, [error]) + let errorMessage = 'An unexpected error occurred' let errorDetails = '' - if (isRouteErrorResponse(error)) { + if (isChunkLoadError(error)) { + errorMessage = 'App Updated' + errorDetails = 'A new version was deployed. Please refresh the page.' + } else if (isRouteErrorResponse(error)) { errorMessage = error.status === 404 ? 'Page not found' : `Error ${error.status}` errorDetails = error.statusText || '' } else if (error instanceof Error) {