Merge pull request #2183 from cheahjs/fix/streaming-error

feat: better handle openai errors, add error message to message

src/lib/apis/streaming/index.ts

@@ -6,6 +6,8 @@ type TextStreamUpdate = {
 	value: string;
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	citations?: any;
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	error?: any;
 };
 
 // createOpenAITextStream takes a responseBody with a SSE response,
@@ -47,6 +49,11 @@ async function* openAIStreamToIterator(
 			const parsedData = JSON.parse(data);
 			console.log(parsedData);
 
+			if (parsedData.error) {
+				yield { done: true, value: '', error: parsedData.error };
+				break;
+			}
+
 			if (parsedData.citations) {
 				yield { done: false, value: '', citations: parsedData.citations };
 				continue;

src/routes/(app)/+page.svelte

@@ -557,166 +557,146 @@
 
 		scrollToBottom();
 
-		const [res, controller] = await generateOpenAIChatCompletion(
+		try {
-			localStorage.token,
+			const [res, controller] = await generateOpenAIChatCompletion(
-			{
+				localStorage.token,
-				model: model.id,
+				{
-				stream: true,
+					model: model.id,
-				messages: [
+					stream: true,
-					$settings.system
+					messages: [
-						? {
+						$settings.system
-								role: 'system',
-								content: $settings.system
-						  }
-						: undefined,
-					...messages
-				]
-					.filter((message) => message)
-					.map((message, idx, arr) => ({
-						role: message.role,
-						...((message.files?.filter((file) => file.type === 'image').length > 0 ?? false) &&
-						message.role === 'user'
 							? {
-									content: [
+									role: 'system',
-										{
+									content: $settings.system
-											type: 'text',
-											text:
-												arr.length - 1 !== idx
-													? message.content
-													: message?.raContent ?? message.content
-										},
-										...message.files
-											.filter((file) => file.type === 'image')
-											.map((file) => ({
-												type: 'image_url',
-												image_url: {
-													url: file.url
-												}
-											}))
-									]
 							  }
-							: {
+							: undefined,
-									content:
+						...messages
-										arr.length - 1 !== idx ? message.content : message?.raContent ?? message.content
+					]
-							  })
+						.filter((message) => message)
-					})),
+						.map((message, idx, arr) => ({
-				seed: $settings?.options?.seed ?? undefined,
+							role: message.role,
-				stop:
+							...((message.files?.filter((file) => file.type === 'image').length > 0 ?? false) &&
-					$settings?.options?.stop ?? undefined
+							message.role === 'user'
-						? $settings?.options?.stop.map((str) =>
+								? {
-								decodeURIComponent(JSON.parse('"' + str.replace(/\"/g, '\\"') + '"'))
+										content: [
-						  )
+											{
-						: undefined,
+												type: 'text',
-				temperature: $settings?.options?.temperature ?? undefined,
+												text:
-				top_p: $settings?.options?.top_p ?? undefined,
+													arr.length - 1 !== idx
-				num_ctx: $settings?.options?.num_ctx ?? undefined,
+														? message.content
-				frequency_penalty: $settings?.options?.repeat_penalty ?? undefined,
+														: message?.raContent ?? message.content
-				max_tokens: $settings?.options?.num_predict ?? undefined,
+											},
-				docs: docs.length > 0 ? docs : undefined,
+											...message.files
-				citations: docs.length > 0
+												.filter((file) => file.type === 'image')
-			},
+												.map((file) => ({
-			model?.source?.toLowerCase() === 'litellm'
+													type: 'image_url',
-				? `${LITELLM_API_BASE_URL}/v1`
+													image_url: {
-				: `${OPENAI_API_BASE_URL}`
+														url: file.url
-		);
+													}
+												}))
+										]
+								  }
+								: {
+										content:
+											arr.length - 1 !== idx
+												? message.content
+												: message?.raContent ?? message.content
+								  })
+						})),
+					seed: $settings?.options?.seed ?? undefined,
+					stop:
+						$settings?.options?.stop ?? undefined
+							? $settings.options.stop.map((str) =>
+									decodeURIComponent(JSON.parse('"' + str.replace(/\"/g, '\\"') + '"'))
+							  )
+							: undefined,
+					temperature: $settings?.options?.temperature ?? undefined,
+					top_p: $settings?.options?.top_p ?? undefined,
+					num_ctx: $settings?.options?.num_ctx ?? undefined,
+					frequency_penalty: $settings?.options?.repeat_penalty ?? undefined,
+					max_tokens: $settings?.options?.num_predict ?? undefined,
+					docs: docs.length > 0 ? docs : undefined,
+					citations: docs.length > 0
+				},
+				model?.source?.toLowerCase() === 'litellm'
+					? `${LITELLM_API_BASE_URL}/v1`
+					: `${OPENAI_API_BASE_URL}`
+			);
 
-		// Wait until history/message have been updated
+			// Wait until history/message have been updated
-		await tick();
+			await tick();
 
-		scrollToBottom();
+			scrollToBottom();
 
-		if (res && res.ok && res.body) {
+			if (res && res.ok && res.body) {
-			const textStream = await createOpenAITextStream(res.body, $settings.splitLargeChunks);
+				const textStream = await createOpenAITextStream(res.body, $settings.splitLargeChunks);
 
-			for await (const update of textStream) {
+				for await (const update of textStream) {
-				const { value, done, citations } = update;
+					const { value, done, citations, error } = update;
-				if (done || stopResponseFlag || _chatId !== $chatId) {
+					if (error) {
-					responseMessage.done = true;
+						await handleOpenAIError(error, null, model, responseMessage);
-					messages = messages;
+						break;
+					}
+					if (done || stopResponseFlag || _chatId !== $chatId) {
+						responseMessage.done = true;
+						messages = messages;
 
-					if (stopResponseFlag) {
+						if (stopResponseFlag) {
-						controller.abort('User: Stop Response');
+							controller.abort('User: Stop Response');
+						}
+
+						break;
 					}
 
-					break;
+					if (citations) {
-				}
+						responseMessage.citations = citations;
+						continue;
+					}
 
-				if (citations) {
+					if (responseMessage.content == '' && value == '\n') {
-					responseMessage.citations = citations;
+						continue;
-					continue;
-				}
-
-				if (responseMessage.content == '' && value == '\n') {
-					continue;
-				} else {
-					responseMessage.content += value;
-					messages = messages;
-				}
-
-				if ($settings.notificationEnabled && !document.hasFocus()) {
-					const notification = new Notification(`OpenAI ${model}`, {
-						body: responseMessage.content,
-						icon: `${WEBUI_BASE_URL}/static/favicon.png`
-					});
-				}
-
-				if ($settings.responseAutoCopy) {
-					copyToClipboard(responseMessage.content);
-				}
-
-				if ($settings.responseAutoPlayback) {
-					await tick();
-					document.getElementById(`speak-button-${responseMessage.id}`)?.click();
-				}
-
-				if (autoScroll) {
-					scrollToBottom();
-				}
-			}
-
-			if ($chatId == _chatId) {
-				if ($settings.saveChatHistory ?? true) {
-					chat = await updateChatById(localStorage.token, _chatId, {
-						messages: messages,
-						history: history
-					});
-					await chats.set(await getChatList(localStorage.token));
-				}
-			}
-		} else {
-			if (res !== null) {
-				const error = await res.json();
-				console.log(error);
-				if ('detail' in error) {
-					toast.error(error.detail);
-					responseMessage.content = error.detail;
-				} else {
-					if ('message' in error.error) {
-						toast.error(error.error.message);
-						responseMessage.content = error.error.message;
 					} else {
-						toast.error(error.error);
+						responseMessage.content += value;
-						responseMessage.content = error.error;
+						messages = messages;
+					}
+
+					if ($settings.notificationEnabled && !document.hasFocus()) {
+						const notification = new Notification(`OpenAI ${model}`, {
+							body: responseMessage.content,
+							icon: `${WEBUI_BASE_URL}/static/favicon.png`
+						});
+					}
+
+					if ($settings.responseAutoCopy) {
+						copyToClipboard(responseMessage.content);
+					}
+
+					if ($settings.responseAutoPlayback) {
+						await tick();
+						document.getElementById(`speak-button-${responseMessage.id}`)?.click();
+					}
+
+					if (autoScroll) {
+						scrollToBottom();
+					}
+				}
+
+				if ($chatId == _chatId) {
+					if ($settings.saveChatHistory ?? true) {
+						chat = await updateChatById(localStorage.token, _chatId, {
+							messages: messages,
+							history: history
+						});
+						await chats.set(await getChatList(localStorage.token));
 					}
 				}
 			} else {
-				toast.error(
+				await handleOpenAIError(null, res, model, responseMessage);
-					$i18n.t(`Uh-oh! There was an issue connecting to {{provider}}.`, {
-						provider: model.name ?? model.id
-					})
-				);
-				responseMessage.content = $i18n.t(`Uh-oh! There was an issue connecting to {{provider}}.`, {
-					provider: model.name ?? model.id
-				});
 			}
-
+		} catch (error) {
-			responseMessage.error = true;
+			await handleOpenAIError(error, null, model, responseMessage);
-			responseMessage.content = $i18n.t(`Uh-oh! There was an issue connecting to {{provider}}.`, {
-				provider: model.name ?? model.id
-			});
-			responseMessage.done = true;
-			messages = messages;
 		}
+		messages = messages;
 
 		stopResponseFlag = false;
 		await tick();
@@ -733,6 +713,44 @@
 		}
 	};
 
+	const handleOpenAIError = async (error, res: Response | null, model, responseMessage) => {
+		let errorMessage = '';
+		let innerError;
+
+		if (error) {
+			innerError = error;
+		} else if (res !== null) {
+			innerError = await res.json();
+		}
+		console.error(innerError);
+		if ('detail' in innerError) {
+			toast.error(innerError.detail);
+			errorMessage = innerError.detail;
+		} else if ('error' in innerError) {
+			if ('message' in innerError.error) {
+				toast.error(innerError.error.message);
+				errorMessage = innerError.error.message;
+			} else {
+				toast.error(innerError.error);
+				errorMessage = innerError.error;
+			}
+		} else if ('message' in innerError) {
+			toast.error(innerError.message);
+			errorMessage = innerError.message;
+		}
+
+		responseMessage.error = true;
+		responseMessage.content =
+			$i18n.t(`Uh-oh! There was an issue connecting to {{provider}}.`, {
+				provider: model.name ?? model.id
+			}) +
+			'\n' +
+			errorMessage;
+		responseMessage.done = true;
+
+		messages = messages;
+	};
+
 	const stopResponse = () => {
 		stopResponseFlag = true;
 		console.log('stopResponse');

src/routes/(app)/c/[id]/+page.svelte

@@ -561,165 +561,144 @@
 
 		scrollToBottom();
 
-		const [res, controller] = await generateOpenAIChatCompletion(
+		try {
-			localStorage.token,
+			const [res, controller] = await generateOpenAIChatCompletion(
-			{
+				localStorage.token,
-				model: model.id,
+				{
-				stream: true,
+					model: model.id,
-				messages: [
+					stream: true,
-					$settings.system
+					messages: [
-						? {
+						$settings.system
-								role: 'system',
-								content: $settings.system
-						  }
-						: undefined,
-					...messages
-				]
-					.filter((message) => message)
-					.map((message, idx, arr) => ({
-						role: message.role,
-						...((message.files?.filter((file) => file.type === 'image').length > 0 ?? false) &&
-						message.role === 'user'
 							? {
-									content: [
+									role: 'system',
-										{
+									content: $settings.system
-											type: 'text',
-											text:
-												arr.length - 1 !== idx
-													? message.content
-													: message?.raContent ?? message.content
-										},
-										...message.files
-											.filter((file) => file.type === 'image')
-											.map((file) => ({
-												type: 'image_url',
-												image_url: {
-													url: file.url
-												}
-											}))
-									]
 							  }
-							: {
+							: undefined,
-									content:
+						...messages
-										arr.length - 1 !== idx ? message.content : message?.raContent ?? message.content
+					]
-							  })
+						.filter((message) => message)
-					})),
+						.map((message, idx, arr) => ({
-				seed: $settings?.options?.seed ?? undefined,
+							role: message.role,
-				stop:
+							...((message.files?.filter((file) => file.type === 'image').length > 0 ?? false) &&
-					$settings?.options?.stop ?? undefined
+							message.role === 'user'
-						? $settings.options.stop.map((str) =>
+								? {
-								decodeURIComponent(JSON.parse('"' + str.replace(/\"/g, '\\"') + '"'))
+										content: [
-						  )
+											{
-						: undefined,
+												type: 'text',
-				temperature: $settings?.options?.temperature ?? undefined,
+												text:
-				top_p: $settings?.options?.top_p ?? undefined,
+													arr.length - 1 !== idx
-				num_ctx: $settings?.options?.num_ctx ?? undefined,
+														? message.content
-				frequency_penalty: $settings?.options?.repeat_penalty ?? undefined,
+														: message?.raContent ?? message.content
-				max_tokens: $settings?.options?.num_predict ?? undefined,
+											},
-				docs: docs.length > 0 ? docs : undefined,
+											...message.files
-				citations: docs.length > 0
+												.filter((file) => file.type === 'image')
-			},
+												.map((file) => ({
-			model?.source?.toLowerCase() === 'litellm'
+													type: 'image_url',
-				? `${LITELLM_API_BASE_URL}/v1`
+													image_url: {
-				: `${OPENAI_API_BASE_URL}`
+														url: file.url
-		);
+													}
+												}))
+										]
+								  }
+								: {
+										content:
+											arr.length - 1 !== idx
+												? message.content
+												: message?.raContent ?? message.content
+								  })
+						})),
+					seed: $settings?.options?.seed ?? undefined,
+					stop:
+						$settings?.options?.stop ?? undefined
+							? $settings.options.stop.map((str) =>
+									decodeURIComponent(JSON.parse('"' + str.replace(/\"/g, '\\"') + '"'))
+							  )
+							: undefined,
+					temperature: $settings?.options?.temperature ?? undefined,
+					top_p: $settings?.options?.top_p ?? undefined,
+					num_ctx: $settings?.options?.num_ctx ?? undefined,
+					frequency_penalty: $settings?.options?.repeat_penalty ?? undefined,
+					max_tokens: $settings?.options?.num_predict ?? undefined,
+					docs: docs.length > 0 ? docs : undefined,
+					citations: docs.length > 0
+				},
+				model?.source?.toLowerCase() === 'litellm'
+					? `${LITELLM_API_BASE_URL}/v1`
+					: `${OPENAI_API_BASE_URL}`
+			);
 
-		// Wait until history/message have been updated
+			// Wait until history/message have been updated
-		await tick();
+			await tick();
 
-		scrollToBottom();
+			scrollToBottom();
 
-		if (res && res.ok && res.body) {
+			if (res && res.ok && res.body) {
-			const textStream = await createOpenAITextStream(res.body, $settings.splitLargeChunks);
+				const textStream = await createOpenAITextStream(res.body, $settings.splitLargeChunks);
 
-			for await (const update of textStream) {
+				for await (const update of textStream) {
-				const { value, done, citations } = update;
+					const { value, done, citations, error } = update;
-				if (done || stopResponseFlag || _chatId !== $chatId) {
+					if (error) {
-					responseMessage.done = true;
+						await handleOpenAIError(error, null, model, responseMessage);
-					messages = messages;
+						break;
+					}
+					if (done || stopResponseFlag || _chatId !== $chatId) {
+						responseMessage.done = true;
+						messages = messages;
 
-					if (stopResponseFlag) {
+						if (stopResponseFlag) {
-						controller.abort('User: Stop Response');
+							controller.abort('User: Stop Response');
+						}
+
+						break;
 					}
 
-					break;
+					if (citations) {
-				}
+						responseMessage.citations = citations;
+						continue;
+					}
 
-				if (citations) {
+					if (responseMessage.content == '' && value == '\n') {
-					responseMessage.citations = citations;
+						continue;
-					continue;
-				}
-
-				if (responseMessage.content == '' && value == '\n') {
-					continue;
-				} else {
-					responseMessage.content += value;
-					messages = messages;
-				}
-
-				if ($settings.notificationEnabled && !document.hasFocus()) {
-					const notification = new Notification(`OpenAI ${model}`, {
-						body: responseMessage.content,
-						icon: `${WEBUI_BASE_URL}/static/favicon.png`
-					});
-				}
-
-				if ($settings.responseAutoCopy) {
-					copyToClipboard(responseMessage.content);
-				}
-
-				if ($settings.responseAutoPlayback) {
-					await tick();
-					document.getElementById(`speak-button-${responseMessage.id}`)?.click();
-				}
-
-				if (autoScroll) {
-					scrollToBottom();
-				}
-			}
-
-			if ($chatId == _chatId) {
-				if ($settings.saveChatHistory ?? true) {
-					chat = await updateChatById(localStorage.token, _chatId, {
-						messages: messages,
-						history: history
-					});
-					await chats.set(await getChatList(localStorage.token));
-				}
-			}
-		} else {
-			if (res !== null) {
-				const error = await res.json();
-				console.log(error);
-				if ('detail' in error) {
-					toast.error(error.detail);
-					responseMessage.content = error.detail;
-				} else {
-					if ('message' in error.error) {
-						toast.error(error.error.message);
-						responseMessage.content = error.error.message;
 					} else {
-						toast.error(error.error);
+						responseMessage.content += value;
-						responseMessage.content = error.error;
+						messages = messages;
+					}
+
+					if ($settings.notificationEnabled && !document.hasFocus()) {
+						const notification = new Notification(`OpenAI ${model}`, {
+							body: responseMessage.content,
+							icon: `${WEBUI_BASE_URL}/static/favicon.png`
+						});
+					}
+
+					if ($settings.responseAutoCopy) {
+						copyToClipboard(responseMessage.content);
+					}
+
+					if ($settings.responseAutoPlayback) {
+						await tick();
+						document.getElementById(`speak-button-${responseMessage.id}`)?.click();
+					}
+
+					if (autoScroll) {
+						scrollToBottom();
+					}
+				}
+
+				if ($chatId == _chatId) {
+					if ($settings.saveChatHistory ?? true) {
+						chat = await updateChatById(localStorage.token, _chatId, {
+							messages: messages,
+							history: history
+						});
+						await chats.set(await getChatList(localStorage.token));
 					}
 				}
 			} else {
-				toast.error(
+				await handleOpenAIError(null, res, model, responseMessage);
-					$i18n.t(`Uh-oh! There was an issue connecting to {{provider}}.`, {
-						provider: model.name ?? model.id
-					})
-				);
-				responseMessage.content = $i18n.t(`Uh-oh! There was an issue connecting to {{provider}}.`, {
-					provider: model.name ?? model.id
-				});
 			}
-
+		} catch (error) {
-			responseMessage.error = true;
+			await handleOpenAIError(error, null, model, responseMessage);
-			responseMessage.content = $i18n.t(`Uh-oh! There was an issue connecting to {{provider}}.`, {
-				provider: model.name ?? model.id
-			});
-			responseMessage.done = true;
-			messages = messages;
 		}
 
 		stopResponseFlag = false;
@@ -737,6 +716,44 @@
 		}
 	};
 
+	const handleOpenAIError = async (error, res: Response | null, model, responseMessage) => {
+		let errorMessage = '';
+		let innerError;
+
+		if (error) {
+			innerError = error;
+		} else if (res !== null) {
+			innerError = await res.json();
+		}
+		console.error(innerError);
+		if ('detail' in innerError) {
+			toast.error(innerError.detail);
+			errorMessage = innerError.detail;
+		} else if ('error' in innerError) {
+			if ('message' in innerError.error) {
+				toast.error(innerError.error.message);
+				errorMessage = innerError.error.message;
+			} else {
+				toast.error(innerError.error);
+				errorMessage = innerError.error;
+			}
+		} else if ('message' in innerError) {
+			toast.error(innerError.message);
+			errorMessage = innerError.message;
+		}
+
+		responseMessage.error = true;
+		responseMessage.content =
+			$i18n.t(`Uh-oh! There was an issue connecting to {{provider}}.`, {
+				provider: model.name ?? model.id
+			}) +
+			'\n' +
+			errorMessage;
+		responseMessage.done = true;
+
+		messages = messages;
+	};
+
 	const stopResponse = () => {
 		stopResponseFlag = true;
 		console.log('stopResponse');