Fixes an issue where view transitions to the 404-page did not work (#…

…9642)

* Add new e2e test

* Ensure cloned Response keeps its headers

* Add change set

* Update changeset

* Update .changeset/big-knives-own.md

Co-authored-by: Florian Lefebvre <[email protected]>

* Update packages/astro/src/vite-plugin-astro-server/route.ts

Co-authored-by: Arsh <[email protected]>

---------

Co-authored-by: Florian Lefebvre <[email protected]>
Co-authored-by: Arsh <[email protected]>

.changeset/big-knives-own.md

@@ -0,0 +1,5 @@
+---
+"astro": patch
+---
+
+Fixes an issue where View Transitions did not work when navigating to the 404 page 

packages/astro/e2e/fixtures/view-transitions/src/pages/404.astro

@@ -0,0 +1,7 @@
+---
+import Layout from '../components/Layout.astro';
+---
+<Layout>
+	<p id="FourOhFour">Page not found</p>
+</Layout>
+</script>

packages/astro/e2e/fixtures/view-transitions/src/pages/one.astro

@@ -11,6 +11,7 @@ import Layout from '../components/Layout.astro';
 	<a id="click-self" href="">go to top</a>
 	<a id="click-redirect-two" href="/redirect-two">go to redirect 2</a>
 	<a id="click-redirect-external" href="/redirect-external">go to a redirect external</a>
+	<a id="click-404" href="/undefined-page">go to undefined page</a>
 
 	<div id="test">test content</div>
 </Layout>

packages/astro/e2e/view-transitions.test.js

@@ -1187,4 +1187,23 @@ test.describe('View Transitions', () => {
 
 		expect(requests).toHaveLength(0);
 	});
+
+	test('view transition should also work with 404 page', async ({ page, astro }) => {
+		const loads = [];
+		page.addListener('load', (p) => {
+			loads.push(p.title());
+		});
+
+		// Go to page 1
+		await page.goto(astro.resolveUrl('/one'));
+		let p = page.locator('#one');
+		await expect(p, 'should have content').toHaveText('Page 1');
+
+		// go to 404
+		await page.click('#click-404');
+		p = page.locator('#FourOhFour');
+		await expect(p, 'should have content').toHaveText('Page not found');
+
+		expect(loads.length, 'There should only be 1 page load').toEqual(1);
+	});
 });

packages/astro/src/vite-plugin-astro-server/route.ts

@@ -370,7 +370,10 @@ export async function handleRoute({
 	// Apply the `status` override to the response object before responding.
 	// Response.status is read-only, so a clone is required to override.
 	if (status && response.status !== status && (status === 404 || status === 500)) {
-		response = new Response(response.body, { ...response, status });
+		response = new Response(response.body, {
+			status: status,
+			headers: response.headers
+		});
 	}
 	await writeSSRResult(request, response, incomingResponse);
 }