Fix: Dispatched errors from inside components bubble to top

CHANGELOG.md

@@ -144,6 +144,7 @@ def start_process(name):
 - Ensure code is correctly formatted and copy button is always present in Chatbot by [@pngwn](https://github.com/pngwn) in [PR 4527](https://github.com/gradio-app/gradio/pull/4527)
 - `show_label` will not automatically be set to `True` in `gr.BarPlot.update` by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 4531](https://github.com/gradio-app/gradio/pull/4531)
 - `gr.BarPlot` group text now respects darkmode by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 4531](https://github.com/gradio-app/gradio/pull/4531)
+- Fix dispatched errors from within components [@aliabid94](https://github.com/aliabid94) in [PR 4786](https://github.com/gradio-app/gradio/pull/4786)
 
 ## Other Changes:
 

js/app/src/Blocks.svelte

@@ -371,6 +371,7 @@
 	const is_external_url = (link: string | null) =>
 		link && new URL(link, location.href).origin !== location.origin;
 
+	let attached_error_listeners: number[] = [];
 	async function handle_mount() {
 		await tick();
 
@@ -417,6 +418,19 @@
 					handled_dependencies[i].push(id);
 				});
 		});
+		components.forEach((c) => {
+			if (!attached_error_listeners.includes(c.id)) {
+				if (c.instance) {
+					attached_error_listeners.push(c.id);
+					c.instance.$on("error", (event_data: any) => {
+						messages = [
+							new_message(event_data.detail, -1, "error"),
+							...messages
+						];
+					});
+				}
+			}
+		});
 	}
 
 	function handle_destroy(id: number) {

js/app/src/components/Audio/Audio.svelte

@@ -88,7 +88,7 @@
 			on:error={({ detail }) => {
 				loading_status = loading_status || {};
 				loading_status.status = "error";
-				loading_status.message = detail;
+				dispatch("error", detail);
 			}}
 		>
 			<UploadText type="audio" />

js/app/src/components/Image/Image.svelte

@@ -31,6 +31,7 @@
 
 	const dispatch = createEventDispatcher<{
 		change: undefined;
+		error: string;
 	}>();
 
 	$: value, dispatch("change");
@@ -78,7 +79,7 @@
 			on:error={({ detail }) => {
 				loading_status = loading_status || {};
 				loading_status.status = "error";
-				loading_status.message = detail;
+				dispatch("error", detail)
 			}}
 			{label}
 			{show_label}