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
This commit is contained in:
remco committed 2026-07-01 21:32:59 +02:00
1 parent 0323c3fcaa
commit 4a06b30263
4 files changed
+51 -16

No files matched your search

+8
View File
@@ -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";
+12 -1
View File
@@ -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>
);
+13 -2
View File
@@ -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="🕒" />
@@ -88,4 +99,4 @@ export default async function AdminArticles() {
</section>
</main>
);
}
}