agent_coder
51ded06fde
- F5 [stability/regression]: the round-1 F2 fix re-rendered the root with <PostHogProvider><App/></PostHogProvider> after the analytics chunk loaded. In the ChunkLoadErrorBoundary child slot the element TYPE changes App -> PostHogProvider, so React does NOT reconcile in place — it REMOUNTS the whole App: every mount effect runs twice (websocket connect/disconnect, origin tracking, subscriptions) and local state / focus / scroll / in-progress input is lost on cloud cold-load (e.g. typing in /login before analytics loads). And it was USELESS: the app has ZERO consumers of the PostHog React context (no usePostHog / useFeatureFlag* / PostHogFeature), and PostHogProvider given an initialized client is a no-op — all capture goes through the posthog singleton. Fix: initAnalytics now inits the posthog SINGLETON only (no posthog-js/react import, no second render); renderApp() renders <App/> once. First paint stays instant, cloud analytics behavior unchanged, no remount. - F6 [test]: exported isChunkLoadError + chunk-load-error-boundary.test.ts — pins the detector (ChunkLoadError name + the 3 dynamic-import failure messages, case-insensitive → true; null/undefined/ordinary errors → false) so a false-negative that re-blanks the app on a real chunk-404 is caught. Gate: client tsc 0, chunk-load + sanitize tests 14 passed. Entry chunk unchanged. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
72 lines
2.9 KiB
TypeScript
72 lines
2.9 KiB
TypeScript
import { ReactNode } from "react";
|
|
import { ErrorBoundary } from "react-error-boundary";
|
|
import { Button, Center, Stack, Text } from "@mantine/core";
|
|
|
|
const RELOAD_FLAG = "chunk-reload-attempted";
|
|
|
|
// Heuristic detection of a failed dynamic import. Since the code-splitting work,
|
|
// every route (plus Aside / AiChatWindow) is React.lazy: when a new deploy
|
|
// replaces the hashed chunks, a tab left open on the old index.html requests a
|
|
// chunk URL that now 404s, and React.lazy rejects. Browsers / Vite surface these
|
|
// with a ChunkLoadError name or one of these messages.
|
|
export function isChunkLoadError(error: unknown): boolean {
|
|
if (!error) return false;
|
|
const name = (error as { name?: string }).name ?? "";
|
|
const message = (error as { message?: string }).message ?? "";
|
|
return (
|
|
name === "ChunkLoadError" ||
|
|
/Failed to fetch dynamically imported module/i.test(message) ||
|
|
/error loading dynamically imported module/i.test(message) ||
|
|
/Importing a module script failed/i.test(message)
|
|
);
|
|
}
|
|
|
|
function handleError(error: unknown) {
|
|
if (!isChunkLoadError(error)) return;
|
|
// A stale-chunk 404 is cured by a full reload that re-fetches index.html and
|
|
// the new chunk manifest. Auto-reload once, guarding against a reload loop
|
|
// (e.g. a genuinely missing chunk) with a one-shot sessionStorage flag. If the
|
|
// flag is already set we fall through to the manual recovery UI below.
|
|
try {
|
|
if (sessionStorage.getItem(RELOAD_FLAG)) return;
|
|
sessionStorage.setItem(RELOAD_FLAG, "1");
|
|
} catch {
|
|
// sessionStorage unavailable (private mode / disabled): skip the automatic
|
|
// reload rather than risk an unguarded loop; the fallback UI still recovers.
|
|
return;
|
|
}
|
|
window.location.reload();
|
|
}
|
|
|
|
// Root-level boundary that sits ABOVE every route-level Suspense boundary so a
|
|
// lazy route/component chunk failure is caught here instead of unmounting the
|
|
// whole tree into a blank white screen. Per-feature ErrorBoundaries (page.tsx,
|
|
// transclusion, page-embed) remain in place underneath for their local errors.
|
|
export function ChunkLoadErrorBoundary({ children }: { children: ReactNode }) {
|
|
return (
|
|
<ErrorBoundary
|
|
onError={handleError}
|
|
fallbackRender={({ error }) => {
|
|
const chunk = isChunkLoadError(error);
|
|
return (
|
|
<Center h="100vh" p="md">
|
|
<Stack align="center" gap="sm" maw={420}>
|
|
<Text fw={600}>
|
|
{chunk ? "A new version is available" : "Something went wrong"}
|
|
</Text>
|
|
<Text size="sm" c="dimmed" ta="center">
|
|
{chunk
|
|
? "Please reload the page to load the latest version."
|
|
: "An unexpected error occurred. Reloading the page may help."}
|
|
</Text>
|
|
<Button onClick={() => window.location.reload()}>Reload</Button>
|
|
</Stack>
|
|
</Center>
|
|
);
|
|
}}
|
|
>
|
|
{children}
|
|
</ErrorBoundary>
|
|
);
|
|
}
|