[fix] Cannot get props in errors returned by shadowed route #4303

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

@@ -648,7 +648,14 @@ export function create_client({ target, session, base, trailing_slash }) {
 							props = await res.json();
 						} else {
 							status = res.status;
-							error = new Error('Failed to load data');
+							let error_message = 'Failed to load data';
+							try {
+								const { error } = await res.json();
+								if ('string' === typeof error) error_message = error;
+							} catch (e) {
+								// ignore
+							}
+							error = new Error(error_message);
 						}
 					}
 

packages/kit/src/runtime/server/page/load_node.js

@@ -431,7 +431,9 @@ async function load_shadow_data(route, event, options, prerender) {
 			data.status = status;
 
 			if (status >= 400) {
-				data.error = new Error('Failed to load data');
+				let error_message = 'Failed to load data';
+				if ('string' === typeof body.error) error_message = body.error;
+				data.error = new Error(error_message);
 				return data;
 			}
 

packages/kit/test/apps/basics/src/routes/shadowed/error-message/__error.svelte

@@ -0,0 +1,14 @@
+<script context="module">
+	export function load({status, error}) {
+		return {
+			props: {status,error}
+		};
+	}
+</script>
+
+<script>
+	export let status,error;
+</script>
+
+<h1>{status}</h1>
+<p>{error.message}</p>

packages/kit/test/apps/basics/src/routes/shadowed/error-message/err.js

@@ -0,0 +1,8 @@
+export function get() {
+	return {
+		body: {
+			error: 'A custom error message'
+		},
+		status: 451
+	};
+}

packages/kit/test/apps/basics/src/routes/shadowed/error-message/err.svelte

@@ -0,0 +1 @@
+<p>you can't see me</p>

packages/kit/test/apps/basics/src/routes/shadowed/error-message/index.svelte

@@ -0,0 +1 @@
+<a href="/shadowed/error-message/err">shadow</a>

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

@@ -522,6 +522,20 @@ test.describe.parallel('Shadowed pages', () => {
 		await clicknav('[href="/shadowed/redirect/a"]');
 		expect(await page.textContent('h1')).toBe('done');
 	});
+
+	test('Display custom error message on client side shadow page', async ({ page, clicknav }) => {
+		await page.goto('/shadowed/error-message');
+		await clicknav('[href="/shadowed/error-message/err"]');
+		expect(await page.textContent('h1')).toBe('451');
+		expect(await page.textContent('p')).toBe('A custom error message');
+		await page.goto('/shadowed/error-message/shadow');
+	});
+
+	test('Display custom error message on server side shadow page', async ({ page }) => {
+		await page.goto('/shadowed/error-message/err');
+		expect(await page.textContent('h1')).toBe('451');
+		expect(await page.textContent('p')).toBe('A custom error message');
+	});
 });
 
 test.describe.parallel('Endpoints', () => {