Fixed signature of App.Error.

Author: ciscoheat

CHANGELOG.md

@@ -11,6 +11,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - The [clearOnSubmit](https://superforms.rocks/concepts/submit-behavior#clearonsubmit) option didn't clear the errors when supposed to. To avoid a breaking change, **the default option for clearOnSubmit is now** `message`, not `errors-and-message`, as it didn't work anyway.
 
+### 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 }`.
+
 ## [2.10.5] - 2024-03-18
 
 ### Added

src/lib/client/superForm.ts

@@ -126,7 +126,7 @@ export type FormOptions<
 				result: {
 					type: 'error';
 					status?: number;
-					error: App.Error;
+					error: App.Error | { message: string };
 				};
 		  }) => MaybePromise<unknown | void>);
 	onChange: (event: ChangeEvent<T>) => void;

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

@@ -0,0 +1,28 @@
+import { superValidate } from '$lib/index.js';
+import { zod } from '$lib/adapters/zod.js';
+import { userSchema } from './schema.js';
+import { error, fail } from '@sveltejs/kit';
+
+export const load = async () => {
+	const form = await superValidate({ name: 'some name' }, zod(userSchema));
+
+	return { form };
+};
+
+export const actions = {
+	default: async ({ request }) => {
+		const form = await superValidate(request, zod(userSchema));
+		console.dir(form, { depth: 10 }); //debug
+
+		if (!form.valid) {
+			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' });
+		}
+	}
+};

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

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { defaults, superForm } from '$lib/index.js';
+	import { userSchema } from './schema.js';
+	import { zod } from '$lib/adapters/zod.js';
+
+	const formData = defaults({ name: 'First name' }, zod(userSchema));
+
+	let error: string;
+
+	export const spForm = superForm(formData, {
+		onError: (e) => {
+			console.log(e.result.error);
+			// @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;
+</script>
+
+<p id="error">ERROR:{error}</p>
+
+<form use:enhance method="POST">
+	<input name="name" bind:value={$form.name} />
+	<button type="submit">Save</button>
+	<br /><input type="checkbox" name="exception" bind:checked={$form.exception} /> Throw exception
+</form>

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

@@ -0,0 +1,6 @@
+import { z } from 'zod';
+
+export const userSchema = z.object({
+	name: z.string(),
+	exception: z.boolean()
+});