Cache an error from app.submit() and show it on frontend (gradio-app#…

…8115)

* Cache an error from app.submit() and show it on frontend

* Fix typing

* add changeset

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

.changeset/rich-bikes-crash.md

@@ -0,0 +1,6 @@
+---
+"@gradio/app": patch
+"gradio": patch
+---
+
+feat:Cache an error from app.submit() and show it on frontend

js/app/src/Blocks.svelte

@@ -264,13 +264,30 @@
 			if (api_recorder_visible) {
 				api_calls = [...api_calls, payload];
 			}
-			const submission = app
-				.submit(
+
+			let submission: ReturnType<typeof app.submit>;
+			try {
+				submission = app.submit(
 					payload.fn_index,
 					payload.data as unknown[],
 					payload.event_data,
 					payload.trigger_id
-				)
+				);
+			} catch (e) {
+				const fn_index = 0; // Mock value for fn_index
+				messages = [new_message(String(e), fn_index, "error"), ...messages];
+				loading_status.update({
+					status: "error",
+					fn_index,
+					eta: 0,
+					queue: false,
+					queue_position: null
+				});
+				set_status($loading_status);
+				return;
+			}
+
+			submission
 				.on("data", ({ data, fn_index }) => {
 					if (dep.pending_request && dep.final_event) {
 						dep.pending_request = false;