fix: stale chunk auto-reload + image paste upload UX
- Add lazyWithRetry wrapper for all lazy-loaded routes to auto-reload on stale chunk errors after deploys (prevents ErrorBoundary flash) - Show toast notification when image paste/upload fails due to storage not configured (503), instead of silent tiny error thumbnails - Remove failed uploads from thumbnail strip on 503 (was showing confusing retry icon) - Pass completed upload IDs in navigation state from dashboard input - Suppress Sentry dialog for chunk load errors (deploy artifacts) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
34
frontend/src/lib/lazyWithRetry.ts
Normal file
34
frontend/src/lib/lazyWithRetry.ts
Normal file
@@ -0,0 +1,34 @@
|
||||
import { lazy } from 'react'
|
||||
|
||||
/**
|
||||
* Wraps React.lazy with retry logic for stale chunk errors after deployments.
|
||||
* On first failure, reloads the page once to get fresh asset manifest.
|
||||
*/
|
||||
export function lazyWithRetry<T extends React.ComponentType<unknown>>(
|
||||
importFn: () => Promise<{ default: T }>,
|
||||
) {
|
||||
return lazy(() =>
|
||||
importFn().catch((error: Error) => {
|
||||
const isChunkError =
|
||||
error.message.includes('dynamically imported module') ||
|
||||
error.message.includes('Loading chunk') ||
|
||||
error.message.includes('importing a module script failed') ||
|
||||
error.message.includes('loading css chunk')
|
||||
|
||||
if (!isChunkError) throw error
|
||||
|
||||
// Only auto-reload once per 10 seconds to prevent loops
|
||||
const key = 'rf_lazy_chunk_reload'
|
||||
const lastReload = sessionStorage.getItem(key)
|
||||
const now = Date.now()
|
||||
|
||||
if (!lastReload || now - Number(lastReload) > 10_000) {
|
||||
sessionStorage.setItem(key, String(now))
|
||||
window.location.reload()
|
||||
}
|
||||
|
||||
// If we already reloaded recently and it still fails, let it propagate
|
||||
throw error
|
||||
}),
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user