Ensure error modal display as expected when using the queue (#4273)

.changeset/nice-parents-work.md

@@ -0,0 +1,5 @@
+---
+"@gradio/client": patch
+---
+
+Ensure websocket error messages are correctly handled.

CHANGELOG.md

@@ -8,6 +8,7 @@ No changes to highlight.
 - Fixed Gallery/AnnotatedImage components resaving identical images by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 4256](https://github.com/gradio-app/gradio/pull/4256)
 - Fixed Audio/Video/File components creating empty tempfiles on each run by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 4256](https://github.com/gradio-app/gradio/pull/4256)
 - Fixed the behavior of the `run_on_click` parameter in `gr.Examples` by [@abidlabs](https://github.com/abidlabs) in [PR 4258](https://github.com/gradio-app/gradio/pull/4258). 
+- Ensure error modal displays when the queue is enabled by [@pngwn](https://github.com/pngwn) in [PR 4273](https://github.com/gradio-app/gradio/pull/4273)
 - Ensure js client respcts the full root when making requests to the server by [@pngwn](https://github.com/pngwn) in [PR 4271](https://github.com/gradio-app/gradio/pull/4271)
 
 ## Other Changes:

client/js/src/client.ts

@@ -399,7 +399,7 @@ export async function client(
 									type: "data",
 									endpoint: _endpoint,
 									fn_index,
-									data: output.data,
+									data: data,
 									time: new Date()
 								});
 
@@ -1226,18 +1226,32 @@ function handle_message(
 				data: data.success ? data.output : null
 			};
 		case "process_completed":
-			return {
+			if ("error" in data.output) {
-				type: "complete",
+				return {
-				status: {
+					type: "update",
-					queue,
+					status: {
-					message: !data.success ? data.output.error : undefined,
+						queue,
-					stage: data.success ? "complete" : "error",
+						message: data.output.error as string,
-					code: data.code,
+						stage: "error",
-					progress_data: data.progress_data,
+						code: data.code,
-					eta: data.output.average_duration
+						success: data.success
-				},
+					}
-				data: data.success ? data.output : null
+				};
-			};
+			} else {
+				return {
+					type: "complete",
+					status: {
+						queue,
+						message: !data.success ? data.output.error : undefined,
+						stage: data.success ? "complete" : "error",
+						code: data.code,
+						progress_data: data.progress_data,
+						eta: data.output.average_duration
+					},
+					data: data.success ? data.output : null
+				};
+			}
+
 		case "process_starts":
 			return {
 				type: "update",

js/_cdn-test/package.json

@@ -3,8 +3,8 @@
 	"private": true,
 	"version": "0.0.0",
 	"scripts": {
-		"dev": "vite --port 3001 -c",
+		"dev": "vite --port 3001",
-		"build": "vite build -c",
+		"build": "vite build",
 		"preview": "vite preview  --port 3001"
 	},
 	"devDependencies": {

package.json

@@ -10,7 +10,7 @@
 		"build:cdn": "pnpm --filter @gradio/client build && pnpm --filter @gradio/app build:cdn --emptyOutDir",
 		"build:website": "pnpm --filter @gradio/app build:website --emptyOutDir",
 		"build:cdn-local": "TEST_CDN=TRUE pnpm build:cdn",
-		"preview:cdn-server": "sirv ../gradio/templates/cdn --single --port=4321 --cors",
+		"preview:cdn-server": "sirv ./gradio/templates/cdn --single --port=4321 --cors",
 		"preview:cdn-app": "pnpm --filter @gradio/cdn-test dev",
 		"preview:cdn-local": "run-p preview:cdn-server preview:cdn-app",
 		"format:check": "prettier --ignore-path .config/.prettierignore --check --plugin-search-dir=. .",