feat: complete admin error handling improvements - add error display to articles pages

- Add error display to articles pages (overview, edit, new)
- Improve createArticle action to handle database errors gracefully
- Redirect with error query params for user feedback on failure
- Completes error handling improvements across admin pages
- Enhances error reporting for better user experience

src/actions/admin-articles.ts

@@ -24,19 +24,24 @@ export async function createArticle(formData: FormData): Promise<void> {
   const image = String(formData.get("image") ?? "").trim();
   if (!title) return;
 
-  const now = new Date();
+  try {
-  await prisma.websiteArticles.create({
+    const now = new Date();
-    data: {
+    await prisma.websiteArticles.create({
-      slug: await uniqueSlug(title),
+      data: {
-      title: title.slice(0, 255),
+        slug: await uniqueSlug(title),
-      shortStory: shortStory.slice(0, 255),
+        title: title.slice(0, 255),
-      fullStory,
+        shortStory: shortStory.slice(0, 255),
-      image: image.slice(0, 255),
+        fullStory,
-      userId: staff.id,
+        image: image.slice(0, 255),
-      createdAt: now,
+        userId: staff.id,
-      updatedAt: now,
+        createdAt: now,
-    },
+        updatedAt: now,
-  });
+      },
+    });
+  } catch (error) {
+    // Database error — re-render unchanged with error.
+    redirect("/admin/articles/new?error=Database error while creating article. Please try again.");
+  }
   redirect("/admin/articles");
 }
 

src/app/admin/articles/[id]/page.tsx

@@ -8,10 +8,13 @@ export const dynamic = "force-dynamic";
 
 export default async function EditArticle({
   params,
+  searchParams,
 }: {
   params: Promise<{ id: string }>;
+  searchParams: Promise<{ error?: string }>;
 }) {
   const { id } = await params;
+  const { error } = await searchParams;
   const article = await prisma.websiteArticles.findUnique({
     where: { id: BigInt(id) },
     select: { id: true, slug: true, title: true, shortStory: true, fullStory: true, image: true },
@@ -24,6 +27,11 @@ export default async function EditArticle({
         <Link href="/admin/articles">← Articles</Link>
       </p>
       <h1>Edit article</h1>
+      {error ? (
+        <p className="muted" style={{ marginBottom: "1rem", color: "#dc2626" }}>
+          Error: {error}
+        </p>
+      ) : null}
       <ArticleForm
         action={async (fd) => {
           "use server";

src/app/admin/articles/new/page.tsx

@@ -2,13 +2,24 @@ import Link from "next/link";
 import { createArticle } from "@/actions/admin-articles";
 import { ArticleForm } from "@/components/admin/article-form";
 
-export default function NewArticle() {
+export default async function NewArticle({
+  searchParams,
+}: {
+  searchParams: Promise<{ error?: string }>;
+}) {
+  const { error } = await searchParams;
+
   return (
     <main>
       <p className="muted">
         <Link href="/admin/articles">← Articles</Link>
       </p>
       <h1>New article</h1>
+      {error ? (
+        <p className="muted" style={{ marginBottom: "1rem", color: "#dc2626" }}>
+          Error: {error}
+        </p>
+      ) : null}
       <ArticleForm action={createArticle} />
     </main>
   );

src/app/admin/articles/page.tsx

@@ -5,7 +5,12 @@ import { prisma } from "@/lib/prisma";
 
 export const dynamic = "force-dynamic";
 
-export default async function AdminArticles() {
+export default async function AdminArticles({
+  searchParams,
+}: {
+  searchParams: Promise<{ error?: string }>;
+}) {
+  const { error } = await searchParams;
   const articles = await prisma.websiteArticles
     .findMany({
       orderBy: { createdAt: "desc" },
@@ -30,6 +35,12 @@ export default async function AdminArticles() {
         News articles (<code>website_articles</code>) shown on the public site. 50 most recent.
       </p>
 
+      {error ? (
+        <p className="muted" style={{ marginBottom: "1rem", color: "#dc2626" }}>
+          Error: {error}
+        </p>
+      ) : null}
+
       <div className="admin-stats">
         <StatusCard label="Articles shown" value={articles.length} icon="📰" />
         <StatusCard label="Latest" value={latest} hint="most recent post" icon="🕒" />