mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-19 13:36:48 +00:00
Maurice
39b6d9f786
* feat(client): catch render errors instead of blanking the page
There were no error boundaries anywhere, so one throw during render unmounted the
whole tree and left the user staring at a white page with no way back.
ErrorBoundary holds the state in a class — getDerivedStateFromError has no hook
equivalent — and renders a function component for the visible half, so the panel
can translate normally. TranslationContext isn't exported, so contextType was not
an option anyway.
Two things it does beyond showing a message. A chunk that 404s after a deploy gets
one reload rather than a retry button: React.lazy caches the rejected promise, so
retrying re-throws immediately. And the reload happens once per session, or a
genuinely missing chunk would spin the tab.
The global handlers in main.tsx cover what no boundary reaches — event handlers
and async code. They filter axios errors: the interceptor already redirects on
401/403 and there are 600+ toast.error call sites, so reporting again would mean
double toasts and, for the redirects, loops.
* feat(client): isolate routes, widgets and the shell chrome
The route boundary goes on the single line where all 16 protected routes render
their content, inside MobileShell rather than around it: the navigation survives,
so a broken page is something the user can walk away from instead of a dead end.
The mobile --m-* tokens live on the shell's .m-root too, so a fallback outside it
would render invisible.
key={location.pathname}, not resetKeys — ProtectedRoute is the same component at
the same position for every protected route, so otherwise a failure could follow
the user across a navigation.
The public routes render outside ProtectedRoute and were therefore uncovered,
including /login (where people land when everything else failed) and the two
anonymous share pages. PublicRoute wraps those seven.
The five global widgets and the shell chrome get fallback={null} each: a broken
widget should disappear quietly, and if BottomNav dies the user loses the very
thing they need to leave the route.
* feat(client): isolate the GL maps and the plugin frame
Both map wrappers put the boundary outside their Suspense, not inside: Suspense
handles a pending promise, a rejected one throws straight past it. Falling back to
the Leaflet renderer keeps a usable map rather than showing an error card — the
same downgrade the Suspense fallback already does while loading.
PluginFrame is third-party code rendering in our tree; a throw there should cost
the plugin, not the page. resetKeys={[pluginId]} so switching plugins clears it.
The locale loader had no .catch (TranslationContext.tsx). After a deploy the chunk
can be gone, which produced an unhandled rejection and left the UI silently on the
previous language. It now keeps the strings it has and says so in the console.
57 lines
2.0 KiB
TypeScript
57 lines
2.0 KiB
TypeScript
/**
|
|
* Recognising — and surviving — a lazy chunk that no longer exists.
|
|
*
|
|
* After a deploy the old index file still references hashed chunks that are gone
|
|
* from the server, so a dynamic import fails for anyone with the tab still open.
|
|
* React.lazy caches the rejected promise on the lazy object, which means retrying
|
|
* the same render fails instantly and forever: the only cure is a reload that
|
|
* fetches the new index.
|
|
*
|
|
* Kept out of the component module so main.tsx can use it without pulling React in.
|
|
*/
|
|
|
|
const RELOAD_MARKER = 'trek:chunk-reload';
|
|
|
|
/** Vite's own message, plus what Chrome/Firefox/Safari say for a failed module fetch. */
|
|
const CHUNK_ERROR_PATTERNS = [
|
|
'failed to fetch dynamically imported module',
|
|
'error loading dynamically imported module',
|
|
'importing a module script failed',
|
|
'unable to preload css',
|
|
'dynamically imported module',
|
|
];
|
|
|
|
export function isChunkLoadError(error: unknown): boolean {
|
|
if (!error) return false;
|
|
const message = error instanceof Error ? error.message : String(error);
|
|
const haystack = message.toLowerCase();
|
|
return CHUNK_ERROR_PATTERNS.some(p => haystack.includes(p));
|
|
}
|
|
|
|
/**
|
|
* Reload once per session for a given chunk failure, then give up and let the
|
|
* fallback show. Without the marker a chunk that is genuinely missing — a broken
|
|
* deploy, a proxy serving stale assets — would put the tab in a reload loop.
|
|
*/
|
|
export function reloadOnceForChunk(): boolean {
|
|
try {
|
|
if (sessionStorage.getItem(RELOAD_MARKER)) return false;
|
|
sessionStorage.setItem(RELOAD_MARKER, String(Date.now()));
|
|
} catch {
|
|
// Private mode or a blocked storage partition: reloading blind would risk a
|
|
// loop, so prefer showing the fallback with its manual reload button.
|
|
return false;
|
|
}
|
|
window.location.reload();
|
|
return true;
|
|
}
|
|
|
|
/** Called once the app has rendered successfully, so the next deploy can heal too. */
|
|
export function clearChunkReloadMarker(): void {
|
|
try {
|
|
sessionStorage.removeItem(RELOAD_MARKER);
|
|
} catch {
|
|
// Nothing to clear if storage is unavailable.
|
|
}
|
|
}
|