WIP: Exception handling for events work, but need correct status.

Author: ciscoheat

src/lib/client/superForm.ts

@@ -334,10 +334,7 @@ const initialForms = new WeakMap<
 >();
 
 const defaultOnError = (event: { result: { error: unknown } }) => {
-	console.warn(
-		'Unhandled error caught by Superforms, use onError event to handle it:',
-		event.result.error
-	);
+	throw event.result.error;
 };
 
 const defaultFormOptions = {
@@ -660,6 +657,16 @@ export function superForm<
 		return options.SPA === true || typeof options.SPA === 'object';
 	}
 
+	function Form_errorStatus(defaultStatus?: number) {
+		return (
+			defaultStatus ||
+			(typeof options.SPA === 'boolean' || typeof options.SPA === 'string'
+				? undefined
+				: options.SPA?.failStatus) ||
+			500
+		);
+	}
+
 	async function Form_validate(
 		opts: {
 			adapter?: FormOptions<T, M>['validators'];
@@ -1633,11 +1640,7 @@ export function superForm<
 			function clientValidationResult(validation: SuperFormValidated<T, M, In>) {
 				const validationResult = { ...validation, posted: true };
 
-				const status = validationResult.valid
-					? 200
-					: ((typeof options.SPA === 'boolean' || typeof options.SPA === 'string'
-							? undefined
-							: options.SPA?.failStatus) ?? 400);
+				const status = validationResult.valid ? 200 : Form_errorStatus();
 
 				const data = { form: validationResult };
 
@@ -1665,6 +1668,46 @@ export function superForm<
 				}
 			}
 
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			async function triggerOnError(result: { type: 'error'; status?: number; error: any }) {
+				if (options.applyAction) {
+					if (options.onError == 'apply') {
+						await applyAction(result);
+					} else {
+						// Transform to failure, to avoid data loss
+						// Set the data to the error result, so it will be
+						// picked up in page.subscribe in superForm.
+						const failResult = {
+							type: 'failure',
+							status: Form_errorStatus(Math.floor(result.status ?? NaN)),
+							data: result
+						} as const;
+						await applyAction(failResult);
+					}
+				}
+
+				// Check if the error message should be replaced
+				if (options.onError !== 'apply') {
+					const data = { result, message: Message };
+
+					for (const onErrorEvent of formEvents.onError) {
+						if (
+							onErrorEvent !== 'apply' &&
+							(onErrorEvent != defaultOnError || !options.flashMessage?.onError)
+						) {
+							await onErrorEvent(data);
+						}
+					}
+				}
+
+				if (options.flashMessage && options.flashMessage.onError) {
+					await options.flashMessage.onError({
+						result,
+						flashMessage: options.flashMessage.module.getFlash(page)
+					});
+				}
+			}
+
 			function cancel(
 				opts: { resetTimers?: boolean } = {
 					resetTimers: true
@@ -1689,7 +1732,12 @@ export function superForm<
 				currentRequest = submit.controller;
 
 				for (const event of formEvents.onSubmit) {
-					await event(submit);
+					try {
+						await event(submit);
+					} catch (error) {
+						cancel();
+						triggerOnError({ type: 'error', error, status: Form_errorStatus() });
+					}
 				}
 			}
 
@@ -1821,7 +1869,7 @@ export function superForm<
 						? (event.result as ActionResult)
 						: {
 								type: 'error',
-								status: parseInt(String(event.result.status)) || 500,
+								status: Form_errorStatus(parseInt(String(event.result.status))),
 								error: event.result.error instanceof Error ? event.result.error : event.result
 							};
 
@@ -1843,15 +1891,27 @@ export function superForm<
 								cancel();
 							});
 
+				function setErrorResult(error: unknown, data: { result: ActionResult }) {
+					data.result = {
+						type: 'error',
+						error,
+						status: result.status && result.status >= 400 ? result.status : Form_errorStatus()
+					};
+				}
+
 				for (const event of formEvents.onResult) {
-					await event(data);
+					try {
+						await event(data);
+					} catch (error) {
+						setErrorResult(error, data);
+					}
 				}
 
 				// In case it was modified in the event
 				result = data.result;
 
 				if (!cancelled) {
-					if ((result.type === 'success' || result.type == 'failure') && result.data) {
+					if ((result.type === 'success' || result.type === 'failure') && result.data) {
 						const forms = Context_findValidationForms(result.data);
 						if (!forms.length) {
 							throw new SuperFormError(
@@ -1871,7 +1931,11 @@ export function superForm<
 							};
 
 							for (const event of formEvents.onUpdate) {
-								await event(data);
+								try {
+									await event(data);
+								} catch (error) {
+									setErrorResult(error, data);
+								}
 							}
 
 							// In case it was modified in the event
@@ -1907,46 +1971,7 @@ export function superForm<
 								await Form_updateFromActionResult(result);
 							}
 						} else {
-							// Error result
-							if (options.applyAction) {
-								if (options.onError == 'apply') {
-									await applyAction(result);
-								} else {
-									// Transform to failure, to avoid data loss
-									// Set the data to the error result, so it will be
-									// picked up in page.subscribe in superForm.
-									const failResult = {
-										type: 'failure',
-										status: Math.floor(result.status || 500),
-										data: result
-									} as const;
-									await applyAction(failResult);
-								}
-							}
-
-							// Check if the error message should be replaced
-							if (options.onError !== 'apply') {
-								const data = { result, message: Message };
-
-								for (const onErrorEvent of formEvents.onError) {
-									if (
-										onErrorEvent !== 'apply' &&
-										(onErrorEvent != defaultOnError || !options.flashMessage?.onError)
-									) {
-										await onErrorEvent(data);
-									}
-								}
-							}
-						}
-
-						// Trigger flash message event if there was an error
-						if (options.flashMessage) {
-							if (result.type == 'error' && options.flashMessage.onError) {
-								await options.flashMessage.onError({
-									result,
-									flashMessage: options.flashMessage.module.getFlash(page)
-								});
-							}
+							await triggerOnError(result);
 						}
 					}
 				}

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

@@ -63,7 +63,8 @@
 		'discriminated-union',
 		'simple-tainted',
 		'validity-objects',
-		'issue-466'
+		'issue-466',
+		'spa-error'
 	].sort();
 </script>
 

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

@@ -0,0 +1,122 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { defaults, superForm } from '$lib/index.js';
+	import SuperDebug from '$lib/index.js';
+	import { arktype } from '$lib/adapters/arktype.js';
+	import { schema } from './schema.js';
+	import type { ActionResult } from '@sveltejs/kit';
+
+	const defaultData = { name: '', email: '' };
+	const adapter = arktype(schema, { defaults: defaultData });
+	const data = defaults(adapter);
+
+	let options = ['onSubmit', 'onResult', 'onUpdate'];
+	let option = 'onSubmit';
+
+	let error: Extract<ActionResult, { type: 'error' }>;
+
+	const {
+		form,
+		message,
+		enhance,
+		submitting,
+		options: formOptions
+	} = superForm(data, {
+		SPA: true,
+		validators: arktype(schema, { defaults: defaultData }),
+		async onSubmit() {
+			formOptions.SPA = true;
+			if (option == 'onSubmit') {
+				throw new Error('onSubmit error');
+			}
+		},
+		async onResult() {
+			if (option == 'onResult') {
+				formOptions.SPA = { failStatus: 501 };
+				throw new Error('onResult error');
+			}
+		},
+		async onUpdate() {
+			if (option == 'onUpdate') {
+				formOptions.SPA = { failStatus: 502 };
+				throw new Error('onUpdate error');
+			}
+		},
+		onError({ result }) {
+			error = result;
+		}
+	});
+</script>
+
+<SuperDebug data={{ $form, option }} />
+
+<h3>SPA onError</h3>
+
+{#if error}
+	<h4>ERROR {error.status}: {error.error}</h4>
+{/if}
+
+{#if $message}
+	<!-- eslint-disable-next-line svelte/valid-compile -->
+	<div class="status" class:error={$page.status >= 400} class:success={$page.status == 200}>
+		{$message}
+	</div>
+{/if}
+
+<div>
+	{#each options as opt}
+		<input type="radio" bind:group={option} value={opt} /> {opt}<br />
+	{/each}
+</div>
+
+<form method="POST" use:enhance>
+	<div class="submit">
+		<button>Submit</button>
+		{#if $submitting}Loading...{/if}
+	</div>
+</form>
+
+<hr />
+<p>
+	💥 <a target="_blank" href="https://superforms.rocks">Created with Superforms for SvelteKit</a> 💥
+</p>
+
+<style>
+	.submit {
+		display: flex;
+		align-items: center;
+	}
+
+	.submit button {
+		margin: 0 0.5rem;
+	}
+
+	.status {
+		color: white;
+		padding: 4px;
+		padding-left: 8px;
+		border-radius: 2px;
+		font-weight: 500;
+	}
+
+	.status.success {
+		background-color: seagreen;
+	}
+
+	.status.error {
+		background-color: #ff2a02;
+	}
+
+	a {
+		text-decoration: underline;
+	}
+
+	hr {
+		margin-top: 4rem;
+	}
+
+	form {
+		padding-top: 1rem;
+		padding-bottom: 1rem;
+	}
+</style>

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

@@ -0,0 +1,6 @@
+import { type } from 'arktype';
+
+export const schema = type({
+	name: 'string>=2',
+	email: 'string.email'
+});