Added JS Error class to onError event.result.error

Author: ciscoheat

CHANGELOG.md

@@ -13,7 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
-- the `event.error` signature in [onError](https://superforms.rocks/concepts/events#onerror) was incorrect, it doesn't always include `App.Error`. It is now a union between `App.Error` and its default SvelteKit signature, `{ message: string }`.
+- the `event.result.error` signature in [onError](https://superforms.rocks/concepts/events#onerror) was incorrect, it doesn't always match `App.Error`. It is now a union between `App.Error`, The built-in JS `Error` class, and the default App.Error signature `{ message: string }`.
 
 ## [2.10.5] - 2024-03-18
 

src/lib/client/superForm.ts

@@ -126,7 +126,7 @@ export type FormOptions<
 				result: {
 					type: 'error';
 					status?: number;
-					error: App.Error | { message: string };
+					error: App.Error | Error | { message: string };
 				};
 		  }) => MaybePromise<unknown | void>);
 	onChange: (event: ChangeEvent<T>) => void;
@@ -270,16 +270,6 @@ export type ValidateOptions<
 	schema: ValidationAdapter<Out, In>;
 }>;
 
-type ValidationResponse<
-	Success extends Record<string, unknown> | undefined = Record<
-		string,
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		any
-	>,
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	Invalid extends Record<string, unknown> | undefined = Record<string, any>
-> = { result: ActionResult<Success, Invalid> };
-
 export type ChangeEvent<T extends Record<string, unknown>> =
 	| {
 			path: FormPath<T>;
@@ -1744,18 +1734,21 @@ export function superForm<
 				return chunks;
 			}
 
-			async function validationResponse(event: ValidationResponse) {
+			// event can be a record if an external request was returning JSON,
+			// or if it failed parsing the expected JSON.
+			async function validationResponse(event: { result: Record<string, unknown> }) {
 				let cancelled = false;
 				currentRequest = null;
 
 				// Check if an error was thrown in hooks, in which case it has no type.
-				let result: ActionResult = event.result.type
-					? event.result
-					: {
-							type: 'error',
-							status: 500,
-							error: event.result
-						};
+				let result: ActionResult =
+					'type' in event.result && 'status' in event.result
+						? (event.result as ActionResult)
+						: {
+								type: 'error',
+								status: parseInt(String(event.result.status)) || 500,
+								error: event.result.error instanceof Error ? event.result.error : event.result
+							};
 
 				const cancel = () => (cancelled = true);
 

src/routes/(v2)/v2/Navigation.svelte

@@ -54,7 +54,8 @@
 		'tainted-history',
 		'files-proxy',
 		'tainted-array',
-		'spa-clearonsubmit'
+		'spa-clearonsubmit',
+		'app-error'
 	].sort();
 </script>
 

src/routes/(v2)/v2/app-error/+page.server.ts

@@ -5,7 +5,6 @@ import { error, fail } from '@sveltejs/kit';
 
 export const load = async () => {
 	const form = await superValidate({ name: 'some name' }, zod(userSchema));
-
 	return { form };
 };
 
@@ -18,11 +17,14 @@ export const actions = {
 			return fail(400, { form });
 		}
 
-		if (form.data.exception) {
-			throw new Error('test-error');
-		} else {
-			// @ts-expect-error Does not follow the App.Error shape
-			error(502, { code: 'expected', title: 'Error title', message: 'Error' });
+		switch (form.data.exception) {
+			case 'error':
+				// @ts-expect-error Does not follow the App.Error shape
+				error(502, { code: 'expected', title: 'Error title', message: 'Error' });
+				break;
+
+			case 'exception':
+				throw new Error('test-error');
 		}
 	}
 };

src/routes/(v2)/v2/app-error/+page.svelte

@@ -1,27 +1,56 @@
 <script lang="ts">
-	import { defaults, superForm } from '$lib/index.js';
-	import { userSchema } from './schema.js';
-	import { zod } from '$lib/adapters/zod.js';
+	import { page } from '$app/stores';
+	import SuperDebug from '$lib/client/SuperDebug.svelte';
+	import { superForm } from '$lib/index.js';
 
-	const formData = defaults({ name: 'First name' }, zod(userSchema));
+	export let data;
 
 	let error: string;
 
-	export const spForm = superForm(formData, {
+	export const spForm = superForm(data.form, {
 		onError: (e) => {
-			console.log(e.result.error);
+			console.log(e.result);
 			// @ts-expect-error Does not follow the App.Error shape
 			error = 'code' in e.result.error ? e.result.error.code : e.result.error.message;
 		}
 	});
 
 	const { enhance, form } = spForm;
+
+	$: action =
+		$form.exception == 'json'
+			? '/v2/app-error/json'
+			: $form.exception == 'plain'
+				? '/v2/app-error/plain'
+				: undefined;
+
+	// eslint-disable-next-line svelte/valid-compile
+	$page;
 </script>
 
-<p id="error">ERROR:{error}</p>
+<SuperDebug data={$form} />
+
+<p id="error">ERROR:{error}:{$page.status}</p>
 
-<form use:enhance method="POST">
-	<input name="name" bind:value={$form.name} />
+<form method="POST" use:enhance {action}>
+	Name: <input name="name" bind:value={$form.name} />
+	<ul style="list-style-type:none">
+		<li>
+			<input type="radio" name="exception" value="error" bind:group={$form.exception} /> SvelteKit error
+			(502)
+		</li>
+		<li>
+			<input type="radio" name="exception" value="exception" bind:group={$form.exception} /> Exception
+			(500)
+		</li>
+		<li>
+			<input type="radio" name="exception" value="json" bind:group={$form.exception} /> 430 JSON response,
+			with 429 status (429)
+		</li>
+		<li>
+			<input type="radio" name="exception" value="plain" bind:group={$form.exception} /> 417 error response
+			(500)
+		</li>
+	</ul>
 	<button type="submit">Save</button>
-	<br /><input type="checkbox" name="exception" bind:checked={$form.exception} /> Throw exception
 </form>

src/routes/(v2)/v2/app-error/json/+server.ts

@@ -0,0 +1,6 @@
+import { json } from '@sveltejs/kit';
+import type { RequestHandler } from './$types.js';
+
+export const POST: RequestHandler = async () => {
+	return json({ code: 'rate_limited', status: 429 }, { status: 430 });
+};

src/routes/(v2)/v2/app-error/plain/+server.ts

@@ -0,0 +1,6 @@
+import { text } from '@sveltejs/kit';
+import type { RequestHandler } from './$types.js';
+
+export const POST: RequestHandler = async () => {
+	return text('Nope', { status: 417 });
+};

src/routes/(v2)/v2/app-error/schema.ts

@@ -2,5 +2,5 @@ import { z } from 'zod';
 
 export const userSchema = z.object({
 	name: z.string(),
-	exception: z.boolean()
+	exception: z.enum(['error', 'exception', 'json', 'plain'])
 });