fix(error pages): account for trailingSlash (#9126)

* account for trailingSlash

* add changeset

* add tests

* update lock file

Author: lilnasy

.changeset/old-pandas-travel.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fixes an issue where error pages were not shown when trailingSlash was set to "always".

packages/astro/src/core/app/index.ts

@@ -333,7 +333,8 @@ export class App {
 		request: Request,
 		{ status, response: originalResponse, skipMiddleware = false }: RenderErrorOptions
 	): Promise<Response> {
-		const errorRouteData = matchRoute('/' + status, this.#manifestData);
+		const errorRoutePath = `/${status}${this.#manifest.trailingSlash === "always" ? '/' : ''}`;
+		const errorRouteData = matchRoute(errorRoutePath, this.#manifestData);
 		const url = new URL(request.url);
 		if (errorRouteData) {
 			if (errorRouteData.prerender) {

packages/astro/test/custom-404-server.test.js

@@ -7,7 +7,7 @@ describe('Custom 404', () => {
 
 	before(async () => {
 		fixture = await loadFixture({
-			root: './fixtures/custom-404/',
+			root: './fixtures/custom-404-static/',
 			site: 'http://example.com',
 		});
 	});
@@ -42,4 +42,15 @@ describe('Custom 404', () => {
 			expect($('p').text()).to.equal('/a');
 		});
 	});
+	
+	describe('build', () => {
+		before(async () => {
+			await fixture.build();
+		})
+
+		it('builds to 404.html', async () => {
+			const html = await fixture.readFile('/404.html');
+			expect(html).to.be.ok;
+		});
+	});
 });

packages/astro/test/custom-404.test.js packages/astro/test/custom-404-static.test.js

@@ -4,12 +4,12 @@ import testAdapter from './test-adapter.js';
 import * as cheerio from 'cheerio';
 
 describe('404 and 500 pages', () => {
-	/** @type {import('./test-utils').Fixture} */
+	/** @type {import('./test-utils.js').Fixture} */
 	let fixture;
 
 	before(async () => {
 		fixture = await loadFixture({
-			root: './fixtures/ssr-api-route-custom-404/',
+			root: './fixtures/ssr-error-pages/',
 			output: 'server',
 			adapter: testAdapter(),
 			// test suite was authored when inlineStylesheets defaulted to never
@@ -18,8 +18,9 @@ describe('404 and 500 pages', () => {
 	});
 
 	describe('Development', () => {
-		/** @type {import('./test-utils').DevServer} */
+		/** @type {import('./test-utils.js').DevServer} */
 		let devServer;
+
 		before(async () => {
 			devServer = await fixture.startDevServer();
 		});
@@ -39,12 +40,15 @@ describe('404 and 500 pages', () => {
 	});
 
 	describe('Production', () => {
+		/** @type {import('./test-utils.js').App} */
+		let app;
+
 		before(async () => {
 			await fixture.build({});
+			app = await fixture.loadTestAdapterApp();
 		});
 
 		it('404 page returned when a route does not match', async () => {
-			const app = await fixture.loadTestAdapterApp();
 			const request = new Request('http://example.com/some/fake/route');
 			const response = await app.render(request);
 			expect(response.status).to.equal(404);
@@ -54,29 +58,26 @@ describe('404 and 500 pages', () => {
 		});
 
 		it('404 page returned when a route does not match and passing routeData', async () => {
-			const app = await fixture.loadTestAdapterApp();
 			const request = new Request('http://example.com/some/fake/route');
 			const routeData = app.match(request);
-			const response = await app.render(request, routeData);
+			const response = await app.render(request, { routeData });
 			expect(response.status).to.equal(404);
 			const html = await response.text();
 			const $ = cheerio.load(html);
 			expect($('h1').text()).to.equal('Something went horribly wrong!');
 		});
 
 		it('404 page returned when a route does not match and imports are included', async () => {
-			const app = await fixture.loadTestAdapterApp();
 			const request = new Request('http://example.com/blog/fake/route');
 			const routeData = app.match(request);
-			const response = await app.render(request, routeData);
+			const response = await app.render(request, { routeData });
 			expect(response.status).to.equal(404);
 			const html = await response.text();
 			const $ = cheerio.load(html);
 			expect($('head link')).to.have.a.lengthOf(1);
 		});
 
 		it('404 page returned when there is an 404 response returned from route', async () => {
-			const app = await fixture.loadTestAdapterApp();
 			const request = new Request('http://example.com/causes-404');
 			const response = await app.render(request);
 			expect(response.status).to.equal(404);
@@ -86,7 +87,6 @@ describe('404 and 500 pages', () => {
 		});
 
 		it('500 page returned when there is an error', async () => {
-			const app = await fixture.loadTestAdapterApp();
 			const request = new Request('http://example.com/causes-error');
 			const response = await app.render(request);
 			expect(response.status).to.equal(500);
@@ -96,7 +96,6 @@ describe('404 and 500 pages', () => {
 		});
 
 		it('Returns 404 when hitting an API route with the wrong method', async () => {
-			const app = await fixture.loadTestAdapterApp();
 			const request = new Request('http://example.com/api/route', {
 				method: 'PUT',
 			});
@@ -108,3 +107,54 @@ describe('404 and 500 pages', () => {
 		});
 	});
 });
+
+describe('trailing slashes for error pages', () => {
+	/** @type {import('./test-utils.js').Fixture} */
+	let fixture;
+
+	before(async () => {
+		fixture = await loadFixture({
+			root: './fixtures/ssr-error-pages/',
+			output: 'server',
+			adapter: testAdapter(),
+			trailingSlash: 'always'
+		});
+	});
+
+	describe('Development', () => {
+		/** @type {import('./test-utils.js').DevServer} */
+		let devServer;
+
+		before(async () => {
+			devServer = await fixture.startDevServer();
+		});
+
+		it('renders 404 page when a route does not match the request', async () => {
+			const response = await fixture.fetch('/ashbfjkasn');
+			expect(response).to.deep.include({ status: 404 });
+			const html = await response.text();
+			expect(html).to.not.be.empty;
+			const $ = cheerio.load(html);
+			expect($('h1').text()).to.equal(`Something went horribly wrong!`);
+		});
+	});
+
+	describe('Production', () => {
+		/** @type {import('./test-utils.js').App} */
+		let app;
+
+		before(async () => {
+			await fixture.build({});
+			app = await fixture.loadTestAdapterApp();
+		});
+
+		it('renders 404 page when a route does not match the request', async () => {
+			const response = await app.render(new Request('http://example.com/ajksalscla'));
+			expect(response).to.deep.include({ status: 404 });
+			const html = await response.text();
+			expect(html).to.not.be.empty;
+			const $ = cheerio.load(html);
+			expect($('h1').text()).to.equal('Something went horribly wrong!');
+		})
+	});
+});