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.
43 lines
2.1 KiB
TypeScript
43 lines
2.1 KiB
TypeScript
import { lazy, Suspense } from 'react'
|
|
import { useSettingsStore } from '../../store/settingsStore'
|
|
import { MapView } from './MapView'
|
|
import ErrorBoundary from '../shared/ErrorBoundary'
|
|
|
|
// MapLibre/Mapbox pull in a ~230 KB (gzip) GL engine. Lazy-load the GL renderer so
|
|
// Leaflet-only installs never download it — it ships only once a GL provider is picked.
|
|
const MapViewGL = lazy(() => import('./MapViewGL').then(m => ({ default: m.MapViewGL })))
|
|
|
|
// Auto-selects the map renderer based on user settings. Keeps the existing
|
|
// Leaflet MapView untouched so the Mapbox GL variant can mature iteratively
|
|
// behind a toggle. Atlas is not affected — it imports Leaflet directly.
|
|
//
|
|
// Offline maps: only the Leaflet renderer supports full pre-download (raster
|
|
// tiles via sync/tilePrefetcher.ts). GL maps are best-effort offline — their
|
|
// vector tiles are cached opportunistically by the Service Worker as you view
|
|
// them online (see the GL tile rules in vite.config.js), not prefetched.
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
export function MapViewAuto(props: any) {
|
|
const provider = useSettingsStore(s => s.settings.map_provider)
|
|
const token = useSettingsStore(s => s.settings.mapbox_access_token)
|
|
// Fall back to Leaflet when Mapbox is selected but no token is set,
|
|
// so trip planner never shows an empty map due to a missing token.
|
|
const glProvider = provider === 'maplibre-gl' ? 'maplibre-gl'
|
|
: provider === 'mapbox-gl' && token ? 'mapbox-gl'
|
|
: null
|
|
if (glProvider) {
|
|
// Render the previous Leaflet map as the fallback so there's no blank flash
|
|
// while the GL chunk loads on first use.
|
|
return (
|
|
// Outside the Suspense on purpose: Suspense handles the pending promise,
|
|
// a rejected one (chunk gone after a deploy) throws past it. Falling back
|
|
// to Leaflet keeps a usable map instead of an error card.
|
|
<ErrorBoundary boundaryId="map:gl" fallback={<MapView {...props} />}>
|
|
<Suspense fallback={<MapView {...props} />}>
|
|
<MapViewGL {...props} glProvider={glProvider} />
|
|
</Suspense>
|
|
</ErrorBoundary>
|
|
)
|
|
}
|
|
return <MapView {...props} />
|
|
}
|