fix: respect page options when rendering an error page as a result of an error thrown from a load function on the server (#13695)

* fix

* changeset

* edit changeset

* add test

* use the page options for the nearest error page

Author: eltigerchino

.changeset/khaki-queens-provide.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: ensure that `ssr` and `csr` page options apply to error pages rendered as a result of a load function error on the server

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

@@ -15,6 +15,7 @@ import { render_response } from './render.js';
 import { respond_with_error } from './respond_with_error.js';
 import { get_data_json } from '../data/index.js';
 import { DEV } from 'esm-env';
+import { PageNodes } from '../../../utils/page_nodes.js';
 
 /**
  * The maximum request depth permitted before assuming we're stuck in an infinite loop
@@ -93,10 +94,13 @@ export async function render_page(event, page, options, manifest, state, nodes,
 		/** @type {import('./types.js').Fetched[]} */
 		const fetched = [];
 
+		const ssr = nodes.ssr();
+		const csr = nodes.csr();
+
 		// renders an empty 'shell' page if SSR is turned off and if there is
 		// no server data to prerender. As a result, the load functions and rendering
 		// only occur client-side.
-		if (nodes.ssr() === false && !(state.prerendering && should_prerender_data)) {
+		if (ssr === false && !(state.prerendering && should_prerender_data)) {
 			// if the user makes a request through a non-enhanced form, the returned value is lost
 			// because there is no SSR or client-side handling of the response
 			if (DEV && action_result && !event.request.headers.has('x-sveltekit-action')) {
@@ -117,7 +121,7 @@ export async function render_page(event, page, options, manifest, state, nodes,
 				fetched,
 				page_config: {
 					ssr: false,
-					csr: nodes.csr()
+					csr
 				},
 				status,
 				error: null,
@@ -171,8 +175,6 @@ export async function render_page(event, page, options, manifest, state, nodes,
 			});
 		});
 
-		const csr = nodes.csr();
-
 		/** @type {Array<Promise<Record<string, any> | null>>} */
 		const load_promises = nodes.data.map((node, i) => {
 			if (load_error) throw load_error;
@@ -244,16 +246,22 @@ export async function render_page(event, page, options, manifest, state, nodes,
 							let j = i;
 							while (!branch[j]) j -= 1;
 
+							const layouts = compact(branch.slice(0, j + 1));
+							const nodes = new PageNodes(layouts.map((layout) => layout.node));
+
 							return await render_response({
 								event,
 								options,
 								manifest,
 								state,
 								resolve_opts,
-								page_config: { ssr: true, csr: true },
+								page_config: {
+									ssr: nodes.ssr(),
+									csr: nodes.csr()
+								},
 								status,
 								error,
-								branch: compact(branch.slice(0, j + 1)).concat({
+								branch: layouts.concat({
 									node,
 									data: null,
 									server_data: null
@@ -294,16 +302,14 @@ export async function render_page(event, page, options, manifest, state, nodes,
 			});
 		}
 
-		const ssr = nodes.ssr();
-
 		return await render_response({
 			event,
 			options,
 			manifest,
 			state,
 			resolve_opts,
 			page_config: {
-				csr: nodes.csr(),
+				csr,
 				ssr
 			},
 			status,

packages/kit/test/apps/basics/src/routes/errors/load-error-page-options/+error.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+</script>
+
+<h1>{$page.error.message}</h1>

packages/kit/test/apps/basics/src/routes/errors/load-error-page-options/+layout.js

@@ -0,0 +1,2 @@
+// disables csr for the error page
+export const csr = false;

packages/kit/test/apps/basics/src/routes/errors/load-error-page-options/csr/+layout.js

@@ -0,0 +1 @@
+export const csr = true;

packages/kit/test/apps/basics/src/routes/errors/load-error-page-options/csr/+page.js

@@ -0,0 +1,3 @@
+export function load() {
+	throw new Error('Crashing now');
+}

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

@@ -462,6 +462,17 @@ test.describe('Errors', () => {
 			});
 		}
 	});
+
+	test('error thrown from load on the server respects page options when rendering the error page', async ({
+		request
+	}) => {
+		const res = await request.get('/errors/load-error-page-options/csr');
+		expect(res.status()).toBe(500);
+		const content = await res.text();
+		expect(content).toContain('Crashing now');
+		// the hydration script should not be present if the csr page option is respected
+		expect(content).not.toContain('kit.start(app');
+	});
 });
 
 test.describe('Load', () => {