feat(dashboard): lazy routes, Needs-you strip, URL state, exact numbers
- Workspace, SettingsHub, SessionDetail and the Workflow sub-tab are lazy (main bundle 2,166 kB -> ~920 kB), wrapped in RouteErrorBoundary: a stale chunk after a self-update reloads once (vite:preloadError too), any other error shows a Reload panel instead of a blank page. - Live refresh: lib/throttle.ts + hooks/useLiveRefresh.ts replace trailing debounces that froze under a steady event stream; refresh skips hidden tabs and refetches after a WebSocket reconnect. Monitor loads only while shown, with one batched GET /api/agents?session_ids= instead of N+1; a failing endpoint is an inline error, not a blank Dashboard. - NeedsYouStrip on Monitor and above Analytics. Tabs, filters, page, sort and search live in the URL (Dashboard, Sessions, Activity, SessionDetail). - Sessions: tool / workspace / date-range filters, CSV/JSON export (formula-neutralised), focusable row links, Open in workspace (the dead /run links are gone), stale responses dropped, error + Retry. - Fixes: "NaNs" durations, 30/7-day charts skipping idle days, weekday labels west of UTC (now averages), cache hit rate denominator, billable tokens vs cache reads, exact tool-call counts, "To" date = end of day, invalid ?from= no longer throws, recent list no longer shrinks to 15, stable message keys, transcript switch races. - Light-theme-unreadable bg-black code panels and dark-only DAG fills use tokens; status configs and chart colours use theme tokens; Health tab and other literals translated. - Server (additive): GET /api/agents?session_ids=, GET /api/sessions awaiting=1&from=&to=, stats tool_call_count/distinct_tool_count, event rows carry session/agent labels.
This commit is contained in:
@@ -0,0 +1,60 @@
|
||||
/**
|
||||
* @file RouteErrorBoundary.test.tsx
|
||||
* @description The route error boundary: a failed lazy chunk (stale assets after
|
||||
* a self-update) reloads the page once; any other error — or a second chunk
|
||||
* failure — shows the themed Reload fallback instead of a blank app.
|
||||
* @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
|
||||
*/
|
||||
|
||||
import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import { RouteErrorBoundary, isChunkLoadError, reloadOnce } from "../RouteErrorBoundary";
|
||||
|
||||
function Boom({ error }: { error: Error }): never {
|
||||
throw error;
|
||||
}
|
||||
|
||||
let reload: ReturnType<typeof vi.fn>;
|
||||
beforeEach(() => {
|
||||
sessionStorage.clear();
|
||||
reload = vi.fn();
|
||||
vi.spyOn(console, "error").mockImplementation(() => {});
|
||||
});
|
||||
afterEach(() => vi.restoreAllMocks());
|
||||
|
||||
describe("RouteErrorBoundary", () => {
|
||||
it("recognises dynamic-import failures", () => {
|
||||
expect(
|
||||
isChunkLoadError(new TypeError("Failed to fetch dynamically imported module: /a.js"))
|
||||
).toBe(true);
|
||||
expect(isChunkLoadError(Object.assign(new Error("x"), { name: "ChunkLoadError" }))).toBe(true);
|
||||
expect(isChunkLoadError(new Error("Importing a module script failed."))).toBe(true);
|
||||
expect(isChunkLoadError(new Error("boom"))).toBe(false);
|
||||
});
|
||||
|
||||
it("reloads once on a chunk error, never twice in a row", () => {
|
||||
expect(reloadOnce(reload)).toBe(true);
|
||||
expect(reloadOnce(reload)).toBe(false);
|
||||
expect(reload).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("shows a Reload fallback for an ordinary render error", () => {
|
||||
render(
|
||||
<RouteErrorBoundary reload={reload}>
|
||||
<Boom error={new Error("boom")} />
|
||||
</RouteErrorBoundary>
|
||||
);
|
||||
expect(screen.getByRole("alert")).toHaveTextContent(/something went wrong/i);
|
||||
expect(screen.getByRole("button", { name: /reload/i })).toBeInTheDocument();
|
||||
expect(reload).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("reloads on a chunk error the first time", () => {
|
||||
render(
|
||||
<RouteErrorBoundary reload={reload}>
|
||||
<Boom error={new TypeError("Failed to fetch dynamically imported module: /x.js")} />
|
||||
</RouteErrorBoundary>
|
||||
);
|
||||
expect(reload).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user