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);
 }