feat: add error handling for AI generation failures

monkeyWie · monkeyWie · commit d32eeeeeb13e · 2025-08-08T16:06:35.000+08:00
diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
@@ -19,6 +19,7 @@
 
 ## Key Rules
 
+- Ignore code formatting and css class sorting lint issues, focus on functionality implementation
 - Pure SPA (Single Page Application) - no SSR
 - TypeScript required, implement proper error handling
 - Use `POST` + JSON for all API endpoints (not RESTful)
diff --git a/drizzle/migrations/0000_talented_sinister_six.sql b/drizzle/migrations/0000_talented_sinister_six.sql
@@ -81,7 +81,7 @@ CREATE TABLE `generations` (
 	`model` text NOT NULL,
 	`status` text DEFAULT 'pending',
 	`file_ids` text,
-	`error_message` text,
+	`error_reason` text,
 	`generation_time` integer,
 	`cost` real,
 	`created_at` text NOT NULL,
diff --git a/drizzle/migrations/meta/0000_snapshot.json b/drizzle/migrations/meta/0000_snapshot.json
@@ -1,7 +1,7 @@
 {
   "version": "6",
   "dialect": "sqlite",
-  "id": "82d26b97-e90c-4c86-bdd8-6215bf6402ca",
+  "id": "2505c767-2fae-4df3-a6de-f59692802ad9",
   "prevId": "00000000-0000-0000-0000-000000000000",
   "tables": {
     "account": {
@@ -545,8 +545,8 @@
           "notNull": false,
           "autoincrement": false
         },
-        "error_message": {
-          "name": "error_message",
+        "error_reason": {
+          "name": "error_reason",
           "type": "text",
           "primaryKey": false,
           "notNull": false,
diff --git a/drizzle/migrations/meta/_journal.json b/drizzle/migrations/meta/_journal.json
@@ -5,8 +5,8 @@
     {
       "idx": 0,
       "version": "6",
-      "when": 1754554963016,
-      "tag": "0000_known_glorian",
+      "when": 1754622954861,
+      "tag": "0000_talented_sinister_six",
       "breakpoints": true
     }
   ]
diff --git a/src/app/i18n/locales/en.json b/src/app/i18n/locales/en.json
@@ -43,6 +43,19 @@
 			"createChat": "Failed to create chat - no available AI models",
 			"noModel": "No available AI models - please configure providers first",
 			"createNewChat": "Failed to create new chat - please select a provider and model"
+		},
+		"generation": {
+			"failed": "Generation failed",
+			"configError": "Provider configuration error",
+			"configErrorDesc": "Please check your provider settings and try again",
+			"apiError": "API request failed",
+			"apiErrorDesc": "The service is temporarily unavailable, please try again later",
+			"timeoutError": "Request timeout",
+			"timeoutErrorDesc": "The request took too long, please try again",
+			"unknownError": "Unknown error",
+			"unknownErrorDesc": "An unexpected error occurred, please try again",
+			"goToSettings": "Go to Settings",
+			"retry": "Retry"
 		}
 	},
 	"navigation": {
diff --git a/src/app/i18n/locales/zh.json b/src/app/i18n/locales/zh.json
@@ -43,6 +43,19 @@
 			"createChat": "创建对话失败 - 没有可用的AI模型",
 			"noModel": "没有可用的AI模型 - 请先配置提供商",
 			"createNewChat": "创建新对话失败 - 请选择提供商和模型"
+		},
+		"generation": {
+			"failed": "生成失败",
+			"configError": "提供商配置有误",
+			"configErrorDesc": "请检查您的提供商设置后重试",
+			"apiError": "API请求失败",
+			"apiErrorDesc": "服务暂时不可用，请稍后重试",
+			"timeoutError": "请求超时",
+			"timeoutErrorDesc": "请求时间过长，请重试",
+			"unknownError": "未知错误",
+			"unknownErrorDesc": "发生了意外错误，请重试",
+			"goToSettings": "前往设置",
+			"retry": "重试"
 		}
 	},
 	"navigation": {
diff --git a/src/app/routes/chat/-components/chat/ChatMessageItem.tsx b/src/app/routes/chat/-components/chat/ChatMessageItem.tsx
@@ -7,6 +7,7 @@ import { cn } from "@/app/lib/utils";
 import type { chatService } from "@/server/service/chat";
 import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { GenerationErrorItem } from "./GenerationErrorItem";
 
 // Type inference from service functions
 type ChatData = NonNullable<Awaited<ReturnType<typeof chatService.getChatById>>>;
@@ -70,6 +71,7 @@ export function ChatMessageItem({ message, user, allMessages, onMessageUpdate }:
 		return date;
 	})();
 	const isMessageGenerating = message.generation?.status === "pending" || message.generation?.status === "generating";
+	const isMessageFailed = message.generation?.status === "failed";
 
 	// Get current message's images for display
 	const currentMessageImages = message.generation?.resultUrls;
@@ -199,6 +201,22 @@ export function ChatMessageItem({ message, user, allMessages, onMessageUpdate }:
 									<Skeleton className="h-4 w-3/4" />
 								</div>
 							</div>
+						) : isMessageFailed && !isUser ? (
+							<div className="space-y-3">
+								{/* Show original prompt if available */}
+								{message.content && (
+									<p className="whitespace-pre-wrap break-words leading-relaxed">{message.content}</p>
+								)}
+								{/* Show error card */}
+								<GenerationErrorItem
+									errorReason={message.generation?.errorReason || "UNKNOWN"}
+									provider={message.generation?.provider}
+									onRetry={() => {
+										// TODO: Implement retry functionality
+										console.log("Retry generation for message:", message.id);
+									}}
+								/>
+							</div>
 						) : (
 							<>
 								{message.content && (
diff --git a/src/app/routes/chat/-components/chat/GenerationErrorItem.tsx b/src/app/routes/chat/-components/chat/GenerationErrorItem.tsx
@@ -0,0 +1,106 @@
+import { Button } from "@/app/components/ui/button";
+import { cn } from "@/app/lib/utils";
+import type { ErrorReason } from "@/server/db/schemas/chat";
+import { ProviderIcon } from "@lobehub/icons";
+import { useNavigate } from "@tanstack/react-router";
+import { RefreshCw, Settings } from "lucide-react";
+import { useTranslation } from "react-i18next";
+
+interface GenerationErrorItemProps {
+	errorReason: ErrorReason;
+	provider?: string;
+	onRetry?: () => void;
+	className?: string;
+}
+
+export function GenerationErrorItem({ errorReason, provider, onRetry, className }: GenerationErrorItemProps) {
+	const { t } = useTranslation();
+	const navigate = useNavigate();
+
+	// Determine error type and corresponding messages
+	const getErrorInfo = (reason: ErrorReason) => {
+		switch (reason) {
+			case "CONFIG_INVALID":
+			case "CONFIG_ERROR":
+				return {
+					title: t("chat.generation.configError"),
+					description: t("chat.generation.configErrorDesc"),
+					buttonText: t("chat.generation.goToSettings"),
+					buttonIcon: Settings,
+					buttonAction: "config" as const,
+				};
+			case "API_ERROR":
+				return {
+					title: t("chat.generation.apiError"),
+					description: t("chat.generation.apiErrorDesc"),
+					buttonText: t("chat.generation.retry"),
+					buttonIcon: RefreshCw,
+					buttonAction: "retry" as const,
+				};
+			case "TIMEOUT":
+				return {
+					title: t("chat.generation.timeoutError"),
+					description: t("chat.generation.timeoutErrorDesc"),
+					buttonText: t("chat.generation.retry"),
+					buttonIcon: RefreshCw,
+					buttonAction: "retry" as const,
+				};
+			default:
+				return {
+					title: t("chat.generation.unknownError"),
+					description: t("chat.generation.unknownErrorDesc"),
+					buttonText: t("chat.generation.retry"),
+					buttonIcon: RefreshCw,
+					buttonAction: "retry" as const,
+				};
+		}
+	};
+
+	const errorInfo = getErrorInfo(errorReason);
+
+	const handleButtonClick = () => {
+		if (errorInfo.buttonAction === "config") {
+			// Navigate to provider settings
+			if (provider) {
+				navigate({
+					to: "/settings/provider/$providerId",
+					params: { providerId: provider },
+				});
+			} else {
+				navigate({
+					to: "/settings/provider",
+				});
+			}
+		} else {
+			// Retry action
+			onRetry?.();
+		}
+	};
+
+	const ButtonIcon = errorInfo.buttonIcon;
+
+	return (
+		<div className={cn("flex h-48 w-80 flex-col px-2 text-center", className)}>
+			{/* Provider Icon Block */}
+			{provider && (
+				<div className="mb-6 flex flex-1 items-center justify-center">
+					<ProviderIcon provider={provider} size={44} type="avatar" />
+				</div>
+			)}
+
+			{/* Error Content Block */}
+			<div className="mb-6 flex flex-1 flex-col items-center justify-center space-y-2 px-2">
+				<h3 className="font-semibold text-foreground text-lg leading-tight">{errorInfo.title}</h3>
+				<p className="text-muted-foreground text-sm leading-relaxed">{errorInfo.description}</p>
+			</div>
+
+			{/* Action Button Block */}
+			<div className="flex flex-1 items-center justify-center">
+				<Button onClick={handleButtonClick} className="h-10 gap-2 px-6 font-medium text-sm">
+					<ButtonIcon className="h-4 w-4" />
+					{errorInfo.buttonText}
+				</Button>
+			</div>
+		</div>
+	);
+}
diff --git a/src/server/ai/provider/cloudflare.ts b/src/server/ai/provider/cloudflare.ts
@@ -114,6 +114,13 @@ const Cloudflare: AiProvider = {
 		});
 
 		if (!resp.ok) {
+			if (resp.status === 401 || resp.status === 404) {
+				return {
+					errorReason: "CONFIG_ERROR",
+					images: [],
+				};
+			}
+
 			const errorText = await resp.text();
 			throw new Error(`Cloudflare API error: ${resp.status} ${resp.statusText} - ${errorText}`);
 		}
diff --git a/src/server/ai/provider/fal.ts b/src/server/ai/provider/fal.ts
@@ -1,6 +1,5 @@
-import { ServiceException } from "@/server/lib/exception";
 import { fetchUrlToDataURI } from "@/server/lib/util";
-import { fal } from "@fal-ai/client";
+import { ApiError, fal } from "@fal-ai/client";
 import type { AiProvider, ApiProviderSettings, ApiProviderSettingsItem } from "../types/provider";
 import { type ProviderSettingsType, chooseAblility, doParseSettings, findModel } from "../types/provider";
 
@@ -56,15 +55,27 @@ const Fal: AiProvider = {
 		}
 
 		fal.config({ credentials: apiKey });
-		const resp = await fal.run(request.modelId + endpoint, {
-			input: {
-				prompt: request.prompt,
-				image_url: genType === "i2i" ? request.images?.[0] : undefined,
-				image_urls: genType === "mi2i" ? request.images : undefined,
-			},
-		});
 
-		console.log("Fal response:", resp);
+		let resp: Awaited<ReturnType<typeof fal.run>>;
+		try {
+			resp = await fal.run(request.modelId + endpoint, {
+				input: {
+					prompt: request.prompt,
+					image_url: genType === "i2i" ? request.images?.[0] : undefined,
+					image_urls: genType === "mi2i" ? request.images : undefined,
+				},
+			});
+		} catch (error) {
+			if (error instanceof ApiError) {
+				if (error.status === 401 || error.status === 404) {
+					return {
+						errorReason: "CONFIG_ERROR",
+						images: [],
+					};
+				}
+			}
+			throw error;
+		}
 
 		return {
 			images: await Promise.all(
diff --git a/src/server/ai/provider/openai.ts b/src/server/ai/provider/openai.ts
@@ -77,24 +77,34 @@ const OpenAI: AiProvider = {
 		const client = new openai.OpenAI({ baseURL, apiKey, dangerouslyAllowBrowser: true });
 
 		let generateResult: openai.ImagesResponse;
-		switch (chooseAblility(request, findModel(OpenAI, request.modelId).ability)) {
-			case "t2i":
-				// Text-to-image generation
-				generateResult = await client.images.generate({
-					model: request.modelId,
-					prompt: request.prompt,
-					n: request.n || 1,
-				});
-				break;
-			default:
-				// Image editing
-				generateResult = await client.images.edit({
-					model: request.modelId,
-					image: request.images!.map(createImageStreamFromDataUri),
-					prompt: request.prompt,
-					n: request.n || 1,
-				});
-				break;
+		try {
+			switch (chooseAblility(request, findModel(OpenAI, request.modelId).ability)) {
+				case "t2i":
+					// Text-to-image generation
+					generateResult = await client.images.generate({
+						model: request.modelId,
+						prompt: request.prompt,
+						n: request.n || 1,
+					});
+					break;
+				default:
+					// Image editing
+					generateResult = await client.images.edit({
+						model: request.modelId,
+						image: request.images!.map(createImageStreamFromDataUri),
+						prompt: request.prompt,
+						n: request.n || 1,
+					});
+					break;
+			}
+		} catch (e) {
+			if (e instanceof openai.AuthenticationError || e instanceof openai.NotFoundError) {
+				return {
+					errorReason: "CONFIG_ERROR",
+					images: [],
+				};
+			}
+			throw e;
 		}
 
 		return {
diff --git a/src/server/ai/types/api.ts b/src/server/ai/types/api.ts
@@ -1,3 +1,4 @@
+import type { ErrorReason } from "@/server/db/schemas";
 import z from "zod/v4";
 
 export const TypixGenerateRequestSchema = z.object({
@@ -11,5 +12,6 @@ export const TypixGenerateRequestSchema = z.object({
 export type TypixGenerateRequest = z.infer<typeof TypixGenerateRequestSchema>;
 
 export type TypixChatApiResponse = {
+	errorReason?: ErrorReason; // Optional error reason if generation failed
 	images: string[]; // Array of generated image base64 Data URI
 };
diff --git a/src/server/ai/types/provider.ts b/src/server/ai/types/provider.ts
diff --git a/src/server/db/schemas/chat.ts b/src/server/db/schemas/chat.ts
diff --git a/src/server/service/chat/index.ts b/src/server/service/chat/index.ts

Original file line number	Diff line number	Diff line change
`@@ -5,8 +5,8 @@`
`5`	`5`	`{`
`6`	`6`	`"idx": 0,`
`7`	`7`	`"version": "6",`
`8`		`- "when": 1754554963016,`
`9`		`- "tag": "0000_known_glorian",`
	`8`	`+ "when": 1754622954861,`
	`9`	`+ "tag": "0000_talented_sinister_six",`
`10`	`10`	`"breakpoints": true`
`11`	`11`	`}`
`12`	`12`	`]`