fix(notes): render collection-missing error inline instead of throwing

This commit is contained in:
sjcoetzeesj-coder 2026-09-16 14:58:43 +02:00
parent 6101ac550d
commit e934770a03

View file

@ -3,8 +3,8 @@
// the Client Component <NotesList> which owns the CRUD UI state.
//
// Notes live in the ysterbaard_notes collection. If the collection is
// missing (PB returns 404) the page renders an actionable error so the
// user knows to create it in the admin UI.
// missing (PB returns 404) or any other load error happens, the page
// renders an inline error banner instead of crashing with a generic 500.
import { fetchCollection } from "@/lib/pb";
import type { YsterbaardNote } from "@/lib/types";
@ -13,30 +13,31 @@ import NotesList from "./NotesList";
export const dynamic = "force-dynamic";
async function loadNotes(): Promise<YsterbaardNote[]> {
async function loadNotes(): Promise<{ notes: YsterbaardNote[]; error: string | null }> {
try {
const list = await fetchCollection<YsterbaardNote>("ysterbaard_notes", {
page: 1,
perPage: 500,
sort: "-created",
});
return list.items ?? [];
return { notes: list.items ?? [], error: null };
} catch (err) {
// Surface the failure to the client so the page can show guidance.
const msg = err instanceof Error ? err.message : "Unknown PB error";
if (msg.includes("404") || msg.toLowerCase().includes("not found")) {
throw new Error(
"The ysterbaard_notes collection is missing on PocketBase. " +
return {
notes: [],
error:
"The ysterbaard_notes collection is missing on PocketBase. " +
"Open https://pb.agent.apphub.co.za/_/ and create it before " +
"using this tab. See docs/superpowers/specs/2026-09-16-notes-tab-design.md for the field spec.",
);
};
}
throw err;
return { notes: [], error: `Could not load notes: ${msg}` };
}
}
export default async function NotesPage() {
const notes = await loadNotes();
const { notes, error } = await loadNotes();
return (
<>
<PageHeader
@ -44,7 +45,15 @@ export default async function NotesPage() {
title="Notes"
subtitle="Things to do. Tick when done, edit, or delete."
/>
<NotesList initialNotes={notes} />
{error ? (
<div className="container-x py-6">
<div className="rounded-md border border-amber-300 bg-amber-50 text-amber-900 px-4 py-3 text-sm whitespace-pre-line">
{error}
</div>
</div>
) : (
<NotesList initialNotes={notes} />
)}
</>
);
}