prefer JSON error responses over HTML in fetch case

.changeset/odd-months-grow.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+Prefer JSON responses when returning errors if accept header is `*/*`

packages/kit/src/runtime/server/utils.js

@@ -194,8 +194,8 @@ export function handle_fatal_error(event, options, error) {
 
 	// ideally we'd use sec-fetch-dest instead, but Safari — quelle surprise — doesn't support it
 	const type = negotiate(event.request.headers.get('accept') || 'text/html', [
-		'text/html',
-		'application/json'
+		'application/json',
+		'text/html'
 	]);
 
 	if (event.url.pathname.endsWith(DATA_SUFFIX) || type === 'application/json') {

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

@@ -149,15 +149,39 @@ test.describe('Errors', () => {
 	});
 
 	test('throw error(...) in endpoint', async ({ request, read_errors }) => {
-		const res = await request.get('/errors/endpoint-throw-error');
+		// HTML
+		{
+			const res = await request.get('/errors/endpoint-throw-error', {
+				headers: {
+					accept: 'text/html'
+				}
+			});
+
+			const error = read_errors('/errors/endpoint-throw-error');
+			expect(error).toBe(undefined);
+
+			expect(res.status()).toBe(401);
+			expect(await res.text()).toContain(
+				'This is the static error page with the following message: You shall not pass'
+			);
+		}
 
-		const error = read_errors('/errors/endpoint-throw-error');
-		expect(error).toBe(undefined);
+		// JSON (default)
+		{
+			const res = await request.get('/errors/endpoint-throw-error');
 
-		expect(await res?.text()).toContain(
-			'This is the static error page with the following message: You shall not pass'
-		);
-		expect(res?.status()).toBe(401);
+			const error = read_errors('/errors/endpoint-throw-error');
+			expect(error).toBe(undefined);
+
+			expect(res.status()).toBe(401);
+			expect(await res.json()).toEqual({
+				status: 401,
+				message: 'You shall not pass',
+
+				// TODO this is gross, fix it
+				__is_http_error: true
+			});
+		}
 	});
 
 	test('throw redirect(...) in endpoint', async ({ page, read_errors }) => {
@@ -170,13 +194,38 @@ test.describe('Errors', () => {
 		expect(await page.textContent('h1')).toBe('the answer is 42');
 	});
 
-	test('error thrown in handle results in a rendered error page', async ({ request }) => {
-		const res = await request.get('/errors/error-in-handle');
+	test('error thrown in handle results in a rendered error page or JSON response', async ({
+		request
+	}) => {
+		// HTML
+		{
+			const res = await request.get('/errors/error-in-handle', {
+				headers: {
+					accept: 'text/html'
+				}
+			});
+
+			expect(res.status()).toBe(500);
+			expect(await res.text()).toContain(
+				'This is the static error page with the following message: Error in handle'
+			);
+		}
+
+		// JSON (default)
+		{
+			const res = await request.get('/errors/error-in-handle');
 
-		expect(await res.text()).toContain(
-			'This is the static error page with the following message: Error in handle'
-		);
-		expect(res.status()).toBe(500);
+			const error = await res.json();
+
+			expect(typeof error.stack).toBe('string');
+			delete error.stack;
+
+			expect(res.status()).toBe(500);
+			expect(error).toEqual({
+				name: 'Error',
+				message: 'Error in handle'
+			});
+		}
 	});
 });