feat(test): custom errors on client

packages/astro/e2e/actions-blog.test.js

@@ -38,6 +38,22 @@ test.describe('Astro Actions - Blog', () => {
 		await expect(page.locator('p[data-error="body"]')).toBeVisible();
 	});
 
+	test('Comment action - custom error', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/blog/first-post/?commentPostIdOverride=bogus'));
+
+		const authorInput = page.locator('input[name="author"]');
+		const bodyInput = page.locator('textarea[name="body"]');
+		await authorInput.fill('Ben');
+		await bodyInput.fill('This should be long enough.');
+
+		const submitButton = page.getByLabel('Post comment');
+		await submitButton.click();
+
+		const unexpectedError = page.locator('p[data-error="unexpected"]');
+		await expect(unexpectedError).toBeVisible();
+		await expect(unexpectedError).toContainText('NOT_FOUND: Post not found');
+	});
+
 	test('Comment action - success', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/blog/first-post/'));
 

packages/astro/e2e/fixtures/actions-blog/src/actions/index.ts

@@ -1,5 +1,6 @@
 import { db, Comment, Likes, eq, sql } from 'astro:db';
-import { defineAction, z } from 'astro:actions';
+import { ActionError, defineAction, z } from 'astro:actions';
+import { getCollection } from 'astro:content';
 
 export const server = {
 	blog: {
@@ -29,6 +30,13 @@ export const server = {
 				body: z.string().min(10),
 			}),
 			handler: async ({ postId, author, body }) => {
+				if (!(await getCollection('blog')).find(b => b.id === postId)) {
+					throw new ActionError({
+						code: 'NOT_FOUND',
+						message: 'Post not found',
+					});
+				}
+
 				const comment = await db
 					.insert(Comment)
 					.values({

packages/astro/e2e/fixtures/actions-blog/src/components/PostComment.tsx

@@ -10,6 +10,7 @@ export function PostComment({
 }) {
 	const [comments, setComments] = useState<{ author: string; body: string }[]>([]);
 	const [bodyError, setBodyError] = useState<string | undefined>(serverBodyError);
+	const [unexpectedError, setUnexpectedError] = useState<string | undefined>(undefined);
 
 	return (
 		<>
@@ -22,14 +23,15 @@ export function PostComment({
 					const { data, error } = await actions.blog.comment.safe(formData);
 					if (isInputError(error)) {
 						return setBodyError(error.fields.body?.join(' '));
+					} else if (error) {
+						return setUnexpectedError(`${error.code}: ${error.message}`);
 					}
-					if (data) {
-						setBodyError(undefined);
-						setComments((c) => [data, ...c]);
-					}
+					setBodyError(undefined);
+					setComments((c) => [data, ...c]);
 					form.reset();
 				}}
 			>
+				{unexpectedError && <p data-error="unexpected" style={{ color: 'red' }}>{unexpectedError}</p>}
 				<input {...getActionProps(actions.blog.comment)} />
 				<input type="hidden" name="postId" value={postId} />
 				<label className="sr-only" htmlFor="author">

packages/astro/e2e/fixtures/actions-blog/src/pages/blog/[...slug].astro

@@ -27,6 +27,9 @@ const comment = Astro.getActionResult(actions.blog.comment);
 const comments = await db.select().from(Comment).where(eq(Comment.postId, post.id));
 
 const initialLikes = await db.select().from(Likes).where(eq(Likes.postId, post.id)).get();
+
+// Used to force validation errors for testing
+const commentPostIdOverride = Astro.url.searchParams.get('commentPostIdOverride');
 ---
 
 <BlogPost {...post.data}>
@@ -36,7 +39,7 @@ const initialLikes = await db.select().from(Likes).where(eq(Likes.postId, post.i
 
 	<h2>Comments</h2>
 	<PostComment
-		postId={post.id}
+		postId={commentPostIdOverride ?? post.id}
 		serverBodyError={isInputError(comment?.error)
 			? comment.error.fields.body?.toString()
 			: undefined}