fix: render the nearest error page when a form submission receives a non-ActionResult error response

.changeset/curly-cats-smile.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: render the nearest error page when a form submission receives a non-ActionResult error response

packages/kit/src/runtime/app/forms/client.js

@@ -1,4 +1,5 @@
 /** @import { ActionResult, SubmitFunction } from './types.js' */
+import { HttpError, SvelteKitError } from '@sveltejs/kit/internal';
 import { DEV } from 'esm-env';
 import { noop } from '../../../utils/functions.js';
 import { refreshAll } from '../navigation/index.js';
@@ -186,9 +187,40 @@ export function enhance(form_element, submit = noop) {
 			// detect new deployments from the response header
 			notify_version(response.headers.get('x-sveltekit-version'));
 
-			result = deserialize(await response.text());
-			if (result.type === 'error' || result.type === 'failure') {
-				result.status = response.status;
+			const text = await response.text();
+
+			/** @type {any} */
+			let parsed;
+			try {
+				// an empty body carries no result for an error response
+				parsed = text === '' && !response.ok ? undefined : deserialize(text);
+			} catch (error) {
+				// only an error response may have a non-ActionResult body, e.g. an HTML error page
+				if (response.ok) throw error;
+			}
+
+			if (
+				parsed?.type === 'success' ||
+				parsed?.type === 'failure' ||
+				parsed?.type === 'redirect' ||
+				parsed?.type === 'error'
+			) {
+				result = parsed;
+				if (result.type === 'error' || result.type === 'failure') {
+					result.status = response.status;
+				}
+			} else if (!response.ok) {
+				// the action never ran, e.g. the CSRF check or a proxy rejected the request.
+				// an `App.Error`-shaped body is an expected error, anything else goes through `handleError`
+				throw parsed && typeof parsed === 'object' && typeof parsed.message === 'string'
+					? new HttpError({ ...parsed, status: response.status })
+					: new SvelteKitError(
+							response.status,
+							response.statusText,
+							typeof parsed === 'string' ? parsed : response.statusText
+						);
+			} else {
+				result = parsed;
 			}
 		} catch (error) {
 			if (/** @type {any} */ (error)?.name === 'AbortError') return;

packages/kit/test/apps/basics/src/routes/actions/enhance-non-action-response/+error.svelte

@@ -0,0 +1,6 @@
+<script>
+	import { page } from '$app/state';
+</script>
+
+<h1>{page.status}</h1>
+<p>{page.error?.message}</p>

packages/kit/test/apps/basics/src/routes/actions/enhance-non-action-response/+page.svelte

@@ -0,0 +1,15 @@
+<script>
+	import { enhance } from '$app/forms';
+</script>
+
+<form method="POST" action="/actions/enhance-non-action-response/reject" use:enhance>
+	<button class="json">Submit</button>
+</form>
+
+<form method="POST" action="/actions/enhance-non-action-response/reject?body=html" use:enhance>
+	<button class="html">Submit</button>
+</form>
+
+<form method="POST" action="/actions/enhance-non-action-response/reject?body=empty" use:enhance>
+	<button class="empty">Submit</button>
+</form>

packages/kit/test/apps/basics/src/routes/actions/enhance-non-action-response/reject/+server.js

@@ -0,0 +1,20 @@
+import { json } from '@sveltejs/kit';
+
+/** @type {import('./$types').RequestHandler} */
+export function POST({ url }) {
+	const body = url.searchParams.get('body');
+
+	if (body === 'html') {
+		return new Response('<!DOCTYPE html><h1>upstream error</h1>', {
+			status: 502,
+			statusText: 'Bad Gateway',
+			headers: { 'content-type': 'text/html' }
+		});
+	}
+
+	if (body === 'empty') {
+		return new Response(null, { status: 403, statusText: 'Forbidden' });
+	}
+
+	return json({ message: 'Cross-site POST form submissions are forbidden' }, { status: 403 });
+}

packages/kit/test/apps/basics/test/test.js

@@ -1255,6 +1255,31 @@
 		await expect(page.locator('input[name=username]')).toHaveValue('');
 	});
 
+	test('use:enhance renders an error page for a non-ActionResult error response', async ({
+		page,
+		javaScriptEnabled
+	}) => {
+		test.skip(!javaScriptEnabled, 'Skip when JavaScript is disabled');
+		await page.goto('/actions/enhance-non-action-response');
+		await page.locator('button.json').click();
+
+		await expect(page.locator('h1')).toHaveText('403');
+		await expect(page.locator('p')).toHaveText('Cross-site POST form submissions are forbidden');
+
+		await page.goto('/actions/enhance-non-action-response');
+		await page.locator('button.html').click();
+
+		await expect(page.locator('h1')).toHaveText('502');
+		// the suffix comes from the `handleError` hook in hooks.client.js
+		await expect(page.locator('p')).toHaveText('Bad Gateway (502 Bad Gateway)');
+
+		await page.goto('/actions/enhance-non-action-response');
+		await page.locator('button.empty').click();
+
+		await expect(page.locator('h1')).toHaveText('403');
+		await expect(page.locator('p')).toHaveText('Forbidden (403 Forbidden)');
+	});
+
 	test('use:enhance abort controller', async ({ page, javaScriptEnabled }) => {
 		await page.goto('/actions/enhance');
 
@@ -1293,7 +1318,7 @@
 		await expect(page.locator('button[formmethod="dialog"]')).not.toBeVisible();
 	});
 
 	test('use:enhance button with name', async ({ page }) => {
 		await page.goto('/actions/enhance');
 
 		expect(await page.textContent('pre.formdata1')).toBe(JSON.stringify(null));