[fix] Handle 4xx and 5xx statuses without requiring Error instance (#…

…1811)

.changeset/quiet-waves-compete.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+Handle 4xx and 5xx statuses without requiring `Error` instance

packages/kit/src/runtime/load.js

@@ -3,11 +3,19 @@
  * @returns {import('types/internal').NormalizedLoadOutput}
  */
 export function normalize(loaded) {
-	// TODO should this behaviour be dev-only?
+	const has_error_status =
+		loaded.status && loaded.status >= 400 && loaded.status <= 599 && !loaded.redirect;
+	if (loaded.error || has_error_status) {
+		const status = loaded.status;
+
+		if (!loaded.error && has_error_status) {
+			return {
+				status,
+				error: new Error()
+			};
+		}
 
-	if (loaded.error) {
 		const error = typeof loaded.error === 'string' ? new Error(loaded.error) : loaded.error;
-		const status = loaded.status;
 
 		if (!(error instanceof Error)) {
 			return {

packages/kit/test/apps/basics/src/routes/errors/_tests.js

@@ -211,4 +211,29 @@ export default function (test, is_dev) {
 			assert.ok(!has_stack_trace, 'Stack trace is visible');
 		}
 	});
+
+	test(
+		'server-side 4xx status without error from load()',
+		'/errors/load-status-without-error-server',
+		async ({ page, response }) => {
+			assert.equal(await page.textContent('footer'), 'Custom layout');
+			assert.equal(await page.textContent('#message'), 'This is your custom error page saying: ""');
+			assert.equal(response.status(), 401);
+		}
+	);
+
+	test(
+		'client-side 4xx status without error from load()',
+		'/errors/load-status-without-error-client',
+		async ({ page, js }) => {
+			if (js) {
+				assert.equal(await page.textContent('footer'), 'Custom layout');
+				assert.equal(
+					await page.textContent('#message'),
+					'This is your custom error page saying: ""'
+				);
+				assert.equal(await page.innerHTML('h1'), '401', 'Should set status code');
+			}
+		}
+	);
 }

packages/kit/test/apps/basics/src/routes/errors/load-status-without-error-client.svelte

@@ -0,0 +1,8 @@
+<script context="module">
+	export async function load() {
+		if (typeof window !== 'undefined') {
+			return { status: 401 };
+		}
+		return {};
+	}
+</script>

packages/kit/test/apps/basics/src/routes/errors/load-status-without-error-server.svelte

@@ -0,0 +1,6 @@
+<script context="module">
+	/** @type {import('@sveltejs/kit').Load} */
+	export async function load() {
+		return { status: 401 };
+	}
+</script>