From cdb7bfa66260afc79b829b617492a01a709a86ef Mon Sep 17 00:00:00 2001
From: Martin Trapp <94928215+martrapp@users.noreply.github.com>
Date: Mon, 8 Jan 2024 16:23:17 +0100
Subject: [PATCH] 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 <contact@florian-lefebvre.dev>

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

Co-authored-by: Arsh <69170106+lilnasy@users.noreply.github.com>

---------

Co-authored-by: Florian Lefebvre <contact@florian-lefebvre.dev>
Co-authored-by: Arsh <69170106+lilnasy@users.noreply.github.com>
---
 .changeset/big-knives-own.md                  |  5 +++++
 .../view-transitions/src/pages/404.astro      |  7 +++++++
 .../view-transitions/src/pages/one.astro      |  1 +
 packages/astro/e2e/view-transitions.test.js   | 19 +++++++++++++++++++
 .../src/vite-plugin-astro-server/route.ts     |  5 ++++-
 5 files changed, 36 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/big-knives-own.md
 create mode 100644 packages/astro/e2e/fixtures/view-transitions/src/pages/404.astro

diff --git a/.changeset/big-knives-own.md b/.changeset/big-knives-own.md
new file mode 100644
index 000000000000..06f8b9cdff62
--- /dev/null
+++ b/.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 
diff --git a/packages/astro/e2e/fixtures/view-transitions/src/pages/404.astro b/packages/astro/e2e/fixtures/view-transitions/src/pages/404.astro
new file mode 100644
index 000000000000..a0622e4a303d
--- /dev/null
+++ b/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>
diff --git a/packages/astro/e2e/fixtures/view-transitions/src/pages/one.astro b/packages/astro/e2e/fixtures/view-transitions/src/pages/one.astro
index b78565c86db9..e75c29f6350d 100644
--- a/packages/astro/e2e/fixtures/view-transitions/src/pages/one.astro
+++ b/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>
diff --git a/packages/astro/e2e/view-transitions.test.js b/packages/astro/e2e/view-transitions.test.js
index 125caf00cd3e..271f17e86b29 100644
--- a/packages/astro/e2e/view-transitions.test.js
+++ b/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);
+	});
 });
diff --git a/packages/astro/src/vite-plugin-astro-server/route.ts b/packages/astro/src/vite-plugin-astro-server/route.ts
index e37850acce24..e249f3f97543 100644
--- a/packages/astro/src/vite-plugin-astro-server/route.ts
+++ b/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);
 }