fix: refactor audit to SSE streaming, improve error handling

- Changed from blocking JSON endpoint to SSE streaming (like sync-all/repair-icons) - Progress updates during each audit phase with item counts - Proper error handling with typed AuditEvent for every failure path - AbortController support for the client - Shows real-time progress for each check section
2026-07-21 15:33:15 +02:00
1 parent 19e4e10b1d
commit bebd65c056
@@ -8,7 +8,7 @@ import {
 	Loader2,
 	SearchX,
 } from "lucide-react";
-import { useCallback, useState } from "react";
+import { useCallback, useRef, useState } from "react";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
 import { adminFetch } from "@/lib/admin-fetch";
@@ -30,26 +30,27 @@ interface MissingFromSource {
 	itemName: string;
 }

-interface AuditResult {
-	issues: AuditIssue[];
-	missingFromSources: MissingFromSource[];
-	summary: {
-		totalItemsBase: number;
-		totalCatalogItems: number;
-		missingCatalog: number;
-		orphanedCatalog: number;
-		missingNitro: number;
-		missingIcon: number;
-		duplicates: number;
-		missingFromSourcesTotal: number;
-	};
+interface AuditSummary {
+	totalItemsBase: number;
+	totalCatalogItems: number;
+	missingCatalog: number;
+	orphanedCatalog: number;
+	missingNitro: number;
+	missingIcon: number;
+	duplicates: number;
+	missingFromSourcesTotal: number;
 }

-const ICON_COLORS: Record<string, string> = {
-	error: "text-[var(--admin-error)]",
-	warning: "text-[var(--admin-warning)]",
-	info: "text-[var(--admin-text-muted)]",
-};
+interface AuditEvent {
+	type: string;
+	message?: string;
+	current?: number;
+	total?: number;
+	section?: string;
+	issues?: AuditIssue[];
+	missingFromSources?: MissingFromSource[];
+	summary?: AuditSummary;
+}

 const TYPE_LABELS: Record<string, string> = {
 	missing_catalog: "No catalog entry",
@@ -58,53 +59,137 @@ const TYPE_LABELS: Record<string, string> = {
 	missing_icon: "Missing icon file",
 	duplicate_classname: "Duplicate classname",
 	source_fetch_failed: "Source fetch failed",
-	sources_list_failed: "Sources list failed",
 };

 export function AuditClient() {
 	const [loading, setLoading] = useState(false);
-	const [result, setResult] = useState<AuditResult | null>(null);
 	const [progress, setProgress] = useState("");
 	const [activeTab, setActiveTab] = useState<"issues" | "sources">("issues");

+	const [issues, setIssues] = useState<AuditIssue[]>([]);
+	const [missingFromSources, setMissingFromSources] = useState<
+		MissingFromSource[]
+	>([]);
+	const [summary, setSummary] = useState<AuditSummary | null>(null);
+
+	const [checkProgress, setCheckProgress] = useState<{
+		section: string;
+		current: number;
+		total: number;
+	} | null>(null);
+
+	const abortRef = useRef<AbortController | null>(null);
+
 	const runAudit = useCallback(async () => {
 		setLoading(true);
-		setResult(null);
 		setProgress("Starting audit…");
+		setIssues([]);
+		setMissingFromSources([]);
+		setSummary(null);
+		setCheckProgress(null);
+		setActiveTab("issues");
+
+		const abort = new AbortController();
+		abortRef.current = abort;

 		try {
 			const res = await adminFetch("/api/admin/import/audit", {
 				method: "POST",
-				headers: { "Content-Type": "application/json" },
-				body: JSON.stringify({}),
+				signal: abort.signal,
 			});

-			if (!res.ok) {
-				const data = await res.json().catch(() => ({}));
-				toast.error(data.error || "Audit failed");
-				setProgress("");
+			if (!res.body) {
+				toast.error("No response stream");
 				setLoading(false);
 				return;
 			}

-			const data = await res.json();
-			setResult(data);
-			toast.success("Audit complete");
-		} catch {
-			toast.error("Audit request failed");
+			const reader = res.body.getReader();
+			const decoder = new TextDecoder();
+			let buf = "";
+
+			while (true) {
+				const { value, done } = await reader.read();
+				if (done) break;
+				buf += decoder.decode(value, { stream: true });
+				const parts = buf.split("\n\n");
+				buf = parts.pop() ?? "";
+				for (const part of parts) {
+					if (!part.startsWith("data: ")) continue;
+					try {
+						const evt = JSON.parse(part.slice(6)) as AuditEvent;
+
+						if (evt.type === "progress") {
+							setProgress(evt.message ?? "");
+						}
+
+						if (evt.type === "items_loaded") {
+							setProgress(`Loaded ${evt.total} items_base entries`);
+						}
+
+						if (evt.type === "catalog_loaded") {
+							setProgress(`Loaded ${evt.total} catalog_items entries`);
+						}
+
+						if (evt.type === "checking") {
+							setProgress(`Checking ${evt.section}…`);
+							if (evt.total) {
+								setCheckProgress({
+									section: evt.section ?? "",
+									current: evt.current ?? 0,
+									total: evt.total,
+								});
+							}
+						}
+
+						if (evt.type === "batch_complete") {
+							setIssues(evt.issues ?? []);
+							setMissingFromSources(evt.missingFromSources ?? []);
+							if (evt.summary) setSummary(evt.summary);
+							setCheckProgress(null);
+							setProgress("Done");
+							if (
+								evt.issues &&
+								evt.issues.filter((i) => i.severity === "error").length > 0
+							) {
+								toast.error(
+									`${evt.issues.filter((i) => i.severity === "error").length} error(s) found`,
+								);
+							} else if (
+								evt.issues &&
+								evt.issues.filter((i) => i.severity === "warning").length > 0
+							) {
+								toast.warning("Warnings found");
+							} else {
+								toast.success("No issues found");
+							}
+						}
+
+						if (evt.type === "error") {
+							setProgress(`ERROR: ${evt.message ?? ""}`);
+							toast.error(evt.message ?? "Audit failed");
+						}
+					} catch {
+						// skip parse errors
+					}
+				}
+			}
+		} catch (err) {
+			if ((err as Error).name !== "AbortError") {
+				toast.error("Audit request failed");
+			}
 		} finally {
 			setLoading(false);
-			setProgress("");
+			abortRef.current = null;
 		}
 	}, []);

-	const hasIssues = result && result.issues.length > 0;
-	const errors = result?.issues.filter((i) => i.severity === "error") ?? [];
-	const warnings = result?.issues.filter((i) => i.severity === "warning") ?? [];
+	const errors = issues.filter((i) => i.severity === "error");
+	const warnings = issues.filter((i) => i.severity === "warning");

 	return (
 		<div className="space-y-6">
-			{!result && (
+			{!summary && (
 				<Button onClick={runAudit} disabled={loading} size="lg">
 					{loading ? (
 						<Loader2 className="w-4 h-4 animate-spin mr-2" />
@@ -115,21 +200,26 @@ export function AuditClient() {
 				</Button>
 			)}

-			{result && (
+			{loading && checkProgress && (
+				<div className="text-sm text-muted-foreground">
+					{checkProgress.section}: {checkProgress.current} /{" "}
+					{checkProgress.total}
+				</div>
+			)}
+
+			{summary && (
 				<>
 					{/* Summary cards */}
 					<div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
 						<div className="rounded-xl border bg-card p-4 space-y-1">
-							<div className="text-2xl font-bold">
-								{result.summary.totalItemsBase}
-							</div>
+							<div className="text-2xl font-bold">{summary.totalItemsBase}</div>
 							<div className="text-xs text-muted-foreground">
 								items_base entries
 							</div>
 						</div>
 						<div className="rounded-xl border bg-card p-4 space-y-1">
 							<div className="text-2xl font-bold">
-								{result.summary.totalCatalogItems}
+								{summary.totalCatalogItems}
 							</div>
 							<div className="text-xs text-muted-foreground">
 								catalog_items entries
@@ -160,64 +250,60 @@ export function AuditClient() {
 					{/* Quick stats */}
 					<div className="grid gap-2 sm:grid-cols-3 text-sm">
 						<div className="flex items-center gap-2">
-							{result.summary.missingCatalog > 0 ? (
+							{summary.missingCatalog > 0 ? (
+								<AlertCircle className="w-4 h-4 text-[var(--admin-warning)]" />
+							) : (
+								<CheckCircle2 className="w-4 h-4 text-[var(--admin-success)]" />
+							)}
+							<span>{summary.missingCatalog} items without catalog entry</span>
+						</div>
+						<div className="flex items-center gap-2">
+							{summary.orphanedCatalog > 0 ? (
+								<AlertCircle className="w-4 h-4 text-[var(--admin-error)]" />
+							) : (
+								<CheckCircle2 className="w-4 h-4 text-[var(--admin-success)]" />
+							)}
+							<span>{summary.orphanedCatalog} orphaned catalog references</span>
+						</div>
+						<div className="flex items-center gap-2">
+							{summary.missingNitro > 0 ? (
+								<AlertCircle className="w-4 h-4 text-[var(--admin-error)]" />
+							) : (
+								<CheckCircle2 className="w-4 h-4 text-[var(--admin-success)]" />
+							)}
+							<span>{summary.missingNitro} items without .nitro</span>
+						</div>
+						<div className="flex items-center gap-2">
+							{summary.missingIcon > 0 ? (
+								<AlertCircle className="w-4 h-4 text-[var(--admin-warning)]" />
+							) : (
+								<CheckCircle2 className="w-4 h-4 text-[var(--admin-success)]" />
+							)}
+							<span>{summary.missingIcon} items without icon</span>
+						</div>
+						<div className="flex items-center gap-2">
+							{summary.duplicates > 0 ? (
+								<AlertCircle className="w-4 h-4 text-[var(--admin-error)]" />
+							) : (
+								<CheckCircle2 className="w-4 h-4 text-[var(--admin-success)]" />
+							)}
+							<span>{summary.duplicates} duplicate classnames</span>
+						</div>
+						<div className="flex items-center gap-2">
+							{summary.missingFromSourcesTotal > 0 ? (
 								<AlertCircle className="w-4 h-4 text-[var(--admin-warning)]" />
 							) : (
 								<CheckCircle2 className="w-4 h-4 text-[var(--admin-success)]" />
 							)}
 							<span>
-								{result.summary.missingCatalog} items without catalog entry
-							</span>
-						</div>
-						<div className="flex items-center gap-2">
-							{result.summary.orphanedCatalog > 0 ? (
-								<AlertCircle className="w-4 h-4 text-[var(--admin-error)]" />
-							) : (
-								<CheckCircle2 className="w-4 h-4 text-[var(--admin-success)]" />
-							)}
-							<span>
-								{result.summary.orphanedCatalog} orphaned catalog references
-							</span>
-						</div>
-						<div className="flex items-center gap-2">
-							{result.summary.missingNitro > 0 ? (
-								<AlertCircle className="w-4 h-4 text-[var(--admin-error)]" />
-							) : (
-								<CheckCircle2 className="w-4 h-4 text-[var(--admin-success)]" />
-							)}
-							<span>{result.summary.missingNitro} items without .nitro</span>
-						</div>
-						<div className="flex items-center gap-2">
-							{result.summary.missingIcon > 0 ? (
-								<AlertCircle className="w-4 h-4 text-[var(--admin-warning)]" />
-							) : (
-								<CheckCircle2 className="w-4 h-4 text-[var(--admin-success)]" />
-							)}
-							<span>{result.summary.missingIcon} items without icon</span>
-						</div>
-						<div className="flex items-center gap-2">
-							{result.summary.duplicates > 0 ? (
-								<AlertCircle className="w-4 h-4 text-[var(--admin-error)]" />
-							) : (
-								<CheckCircle2 className="w-4 h-4 text-[var(--admin-success)]" />
-							)}
-							<span>{result.summary.duplicates} duplicate classnames</span>
-						</div>
-						<div className="flex items-center gap-2">
-							{result.summary.missingFromSourcesTotal > 0 ? (
-								<AlertCircle className="w-4 h-4 text-[var(--admin-warning)]" />
-							) : (
-								<CheckCircle2 className="w-4 h-4 text-[var(--admin-success)]" />
-							)}
-							<span>
-								{result.summary.missingFromSourcesTotal} items missing from
-								clone sources
+								{summary.missingFromSourcesTotal} items missing from clone
+								sources
 							</span>
 						</div>
 					</div>

 					{/* Tabs */}
-					{hasIssues || result.missingFromSources.length > 0 ? (
+					{issues.length > 0 || missingFromSources.length > 0 ? (
 						<div className="border-b border-border">
 							<div className="flex gap-4">
 								<button
@@ -229,7 +315,7 @@ export function AuditClient() {
 											: "border-transparent text-muted-foreground hover:text-foreground"
 									}`}
 								>
-									Issues ({result.issues.length})
+									Issues ({issues.length})
 								</button>
 								<button
 									type="button"
@@ -240,16 +326,16 @@ export function AuditClient() {
 											: "border-transparent text-muted-foreground hover:text-foreground"
 									}`}
 								>
-									Missing from sources ({result.missingFromSources.length})
+									Missing from sources ({missingFromSources.length})
 								</button>
 							</div>
 						</div>
 					) : null}

 					{/* Issues list */}
-					{activeTab === "issues" && hasIssues && (
+					{activeTab === "issues" && issues.length > 0 && (
 						<div className="space-y-2">
-							{result.issues.map((issue) => (
+							{issues.map((issue) => (
 								<div
 									key={issue.message}
 									className={`rounded-xl border p-4 text-sm ${
@@ -262,12 +348,24 @@ export function AuditClient() {
 								>
 									<div className="flex items-start gap-2">
 										<AlertCircle
-											className={`w-4 h-4 mt-0.5 shrink-0 ${ICON_COLORS[issue.severity]}`}
+											className={`w-4 h-4 mt-0.5 shrink-0 ${
+												issue.severity === "error"
+													? "text-[var(--admin-error)]"
+													: issue.severity === "warning"
+														? "text-[var(--admin-warning)]"
+														: "text-[var(--admin-text-muted)]"
+											}`}
 										/>
 										<div className="space-y-0.5 min-w-0">
 											<div className="flex items-center gap-2 flex-wrap">
 												<span
-													className={`font-medium ${ICON_COLORS[issue.severity]}`}
+													className={`font-medium ${
+														issue.severity === "error"
+															? "text-[var(--admin-error)]"
+															: issue.severity === "warning"
+																? "text-[var(--admin-warning)]"
+																: "text-[var(--admin-text-muted)]"
+													}`}
 												>
 													{TYPE_LABELS[issue.type] || issue.type}
 												</span>
@@ -291,9 +389,9 @@ export function AuditClient() {
 					)}

 					{/* Missing from sources list */}
-					{activeTab === "sources" && result.missingFromSources.length > 0 && (
+					{activeTab === "sources" && missingFromSources.length > 0 && (
 						<div className="space-y-2">
-							{result.missingFromSources.map((item) => (
+							{missingFromSources.map((item) => (
 								<div
 									key={`${item.sourceId}-${item.classname}`}
 									className="rounded-xl border bg-card p-3 text-sm flex items-center gap-2"
@@ -312,8 +410,8 @@ export function AuditClient() {
 					)}

 					{activeTab === "issues" &&
-						!hasIssues &&
-						result.missingFromSources.length === 0 && (
+						issues.length === 0 &&
+						missingFromSources.length === 0 && (
 							<div className="rounded-xl border bg-card p-12 text-center text-muted-foreground">
 								<CheckCircle2 className="w-12 h-12 mx-auto mb-3 text-[var(--admin-success)]" />
 								<p className="text-lg font-medium">No issues found</p>
@@ -324,8 +422,11 @@ export function AuditClient() {
 					<Button
 						variant="outline"
 						onClick={() => {
-							setResult(null);
+							setSummary(null);
+							setIssues([]);
+							setMissingFromSources([]);
 							setProgress("");
+							setCheckProgress(null);
 						}}
 					>
 						Run Again
@@ -333,7 +434,7 @@ export function AuditClient() {
 				</>
 			)}

-			{!loading && !result && (
+			{!loading && !summary && (
 				<div className="rounded-xl border bg-card p-12 text-center text-muted-foreground">
 					<SearchX className="w-12 h-12 mx-auto mb-3 opacity-40" />
 					<p>