perf: lazy-loads route components with ErrorBoundary and chunk prefetch

Author: wgordon17

src/app/App.tsx

@@ -1,17 +1,38 @@
-import { createSignal, createEffect, onMount, Show, type JSX } from "solid-js";
+import { createSignal, createEffect, onMount, Show, ErrorBoundary, lazy, type JSX } from "solid-js";
 import { Router, Route, Navigate, useNavigate } from "@solidjs/router";
-import { isAuthenticated, validateToken } from "./stores/auth";
+import { isAuthenticated, validateToken, AUTH_STORAGE_KEY } from "./stores/auth";
 import { config, initConfigPersistence, resolveTheme } from "./stores/config";
 import { initViewPersistence } from "./stores/view";
 import { evictStaleEntries } from "./stores/cache";
 import { initClientWatcher } from "./services/github";
 import LoginPage from "./pages/LoginPage";
 import OAuthCallback from "./pages/OAuthCallback";
-import DashboardPage from "./components/dashboard/DashboardPage";
-import OnboardingWizard from "./components/onboarding/OnboardingWizard";
-import SettingsPage from "./components/settings/SettingsPage";
 import PrivacyPage from "./pages/PrivacyPage";
 
+const DashboardPage = lazy(() => import("./components/dashboard/DashboardPage"));
+const OnboardingWizard = lazy(() => import("./components/onboarding/OnboardingWizard"));
+const SettingsPage = lazy(() => import("./components/settings/SettingsPage"));
+
+function ChunkErrorFallback() {
+  return (
+    <div class="min-h-screen flex items-center justify-center bg-base-200">
+      <div class="card bg-base-100 shadow-md p-8 flex flex-col items-center gap-4 max-w-sm">
+        <p class="text-error font-medium">Failed to load page</p>
+        <p class="text-sm text-base-content/60 text-center">
+          A new version may have been deployed. Reloading should fix this.
+        </p>
+        <button
+          type="button"
+          class="btn btn-neutral"
+          onClick={() => window.location.reload()}
+        >
+          Reload page
+        </button>
+      </div>
+    </div>
+  );
+}
+
 // Auth guard: redirects unauthenticated users to /login.
 // On page load, validates the localStorage token with GitHub API.
 function AuthGuard(props: { children: JSX.Element }) {
@@ -138,17 +159,25 @@ export default function App() {
     evictStaleEntries(24 * 60 * 60 * 1000).catch(() => {
       // Non-fatal — stale eviction failure is acceptable
     });
+
+    // Preload dashboard chunk in parallel with token validation to avoid
+    // a sequential waterfall (validateToken → chunk fetch)
+    if (localStorage.getItem?.(AUTH_STORAGE_KEY)) {
+      void import("./components/dashboard/DashboardPage");
+    }
   });
 
   return (
-    <Router>
-      <Route path="/" component={RootRedirect} />
-      <Route path="/login" component={LoginPage} />
-      <Route path="/oauth/callback" component={OAuthCallback} />
-      <Route path="/onboarding" component={() => <AuthGuard><OnboardingWizard /></AuthGuard>} />
-      <Route path="/dashboard" component={() => <AuthGuard><DashboardPage /></AuthGuard>} />
-      <Route path="/settings" component={() => <AuthGuard><SettingsPage /></AuthGuard>} />
-      <Route path="/privacy" component={PrivacyPage} />
-    </Router>
+    <ErrorBoundary fallback={(err) => { console.error("[app] Route render failed:", err); return <ChunkErrorFallback />; }}>
+      <Router>
+        <Route path="/" component={RootRedirect} />
+        <Route path="/login" component={LoginPage} />
+        <Route path="/oauth/callback" component={OAuthCallback} />
+        <Route path="/onboarding" component={() => <AuthGuard><OnboardingWizard /></AuthGuard>} />
+        <Route path="/dashboard" component={() => <AuthGuard><DashboardPage /></AuthGuard>} />
+        <Route path="/settings" component={() => <AuthGuard><SettingsPage /></AuthGuard>} />
+        <Route path="/privacy" component={PrivacyPage} />
+      </Router>
+    </ErrorBoundary>
   );
 }

src/app/lib/sentry.ts

@@ -11,6 +11,7 @@ export function scrubUrl(url: string): string {
 
 /** Allowed console breadcrumb prefixes — drop everything else. */
 const ALLOWED_CONSOLE_PREFIXES = [
+  "[app]",
   "[auth]",
   "[api]",
   "[poll]",

src/app/pages/LoginPage.tsx

@@ -1,4 +1,4 @@
-import { createSignal, Show } from "solid-js";
+import { createSignal, onMount, Show } from "solid-js";
 import { useNavigate } from "@solidjs/router";
 import { setAuthFromPat, type GitHubUser } from "../stores/auth";
 import {
@@ -11,6 +11,15 @@ import { buildAuthorizeUrl } from "../lib/oauth";
 export default function LoginPage() {
   const navigate = useNavigate();
 
+  onMount(() => {
+    // Speculatively prefetch the dashboard chunk while the user is on the
+    // login page. By the time they authenticate, the chunk is cached.
+    const prefetch = () => void import("../components/dashboard/DashboardPage");
+    "requestIdleCallback" in window
+      ? requestIdleCallback(prefetch)
+      : setTimeout(prefetch, 2000);
+  });
+
   const [showPatForm, setShowPatForm] = createSignal(false);
   const [patInput, setPatInput] = createSignal("");
   const [patError, setPatError] = createSignal<string | null>(null);

tests/components/App.test.tsx

@@ -51,8 +51,12 @@ vi.mock("../../src/app/stores/cache", async (importOriginal) => {
 });
 
 // Mock heavy page/component dependencies
+let dashboardShouldThrow = false;
 vi.mock("../../src/app/components/dashboard/DashboardPage", () => ({
-  default: () => <div data-testid="dashboard-page">Dashboard</div>,
+  default: () => {
+    if (dashboardShouldThrow) throw new Error("chunk load failed");
+    return <div data-testid="dashboard-page">Dashboard</div>;
+  },
 }));
 vi.mock("../../src/app/components/onboarding/OnboardingWizard", () => ({
   default: () => <div data-testid="onboarding-wizard">Onboarding</div>,
@@ -73,6 +77,7 @@ describe("App", () => {
     vi.resetAllMocks();
     mockIsAuthenticated = false;
     mockValidateToken = async () => false;
+    dashboardShouldThrow = false;
     // Re-apply default mock implementations that are needed across tests
     vi.mocked(cacheStore.evictStaleEntries).mockResolvedValue(0);
     // Reset config to defaults
@@ -159,4 +164,28 @@ describe("App", () => {
   it("all routes are registered: /, /login, /oauth/callback, /onboarding, /dashboard, /settings", () => {
     expect(() => render(() => <App />)).not.toThrow();
   });
+
+  it("shows error fallback and logs when a lazy route component throws", async () => {
+    dashboardShouldThrow = true;
+    mockIsAuthenticated = true;
+    configStore.updateConfig({ onboardingComplete: true });
+
+    const spy = vi.spyOn(console, "error").mockImplementation(() => {});
+
+    render(() => <App />);
+
+    await waitFor(() => {
+      screen.getByText("Failed to load page");
+      screen.getByText("A new version may have been deployed. Reloading should fix this.");
+      screen.getByRole("button", { name: "Reload page" });
+    });
+
+    // Verify the error is logged (not silently swallowed) for observability
+    expect(spy).toHaveBeenCalledWith(
+      "[app] Route render failed:",
+      expect.any(Error),
+    );
+
+    spy.mockRestore();
+  });
 });