From b845b1ca01363d511f7f6f3e65a628e8e6190b4c Mon Sep 17 00:00:00 2001
From: Henry Li <henry1943@163.com>
Date: Mon, 12 May 2025 20:56:38 +0800
Subject: [PATCH] fix: add error handling for podcast generation (#59)

Co-authored-by: Jiang Feng <jiangfeng.11@bytedance.com>
---
 .../app/chat/components/message-list-view.tsx | 45 ++++++++++++-------
 web/src/core/store/store.ts                   | 22 ++++++++-
 2 files changed, 50 insertions(+), 17 deletions(-)

diff --git a/web/src/app/chat/components/message-list-view.tsx b/web/src/app/chat/components/message-list-view.tsx
index c4f2bf8..8d8c279 100644
--- a/web/src/app/chat/components/message-list-view.tsx
+++ b/web/src/app/chat/components/message-list-view.tsx
@@ -328,7 +328,7 @@ function PlanCard({
     <Card className={cn("w-full", className)}>
       <CardHeader>
         <CardTitle>
-          <Markdown animated>
+          <Markdown animate>
             {`### ${
               plan.title !== undefined && plan.title !== ""
                 ? plan.title
@@ -404,6 +404,9 @@ function PodcastCard({
   const isGenerating = useMemo(() => {
     return message.isStreaming;
   }, [message.isStreaming]);
+  const hasError = useMemo(() => {
+    return data?.error !== undefined;
+  }, [data]);
   const [isPlaying, setIsPlaying] = useState(false);
   return (
     <Card className={cn("w-[508px]", className)}>
@@ -411,15 +414,21 @@ function PodcastCard({
         <div className="text-muted-foreground flex items-center justify-between text-sm">
           <div className="flex items-center gap-2">
             {isGenerating ? <LoadingOutlined /> : <Headphones size={16} />}
-            <RainbowText animated={isGenerating}>
-              {isGenerating
-                ? "Generating podcast..."
-                : isPlaying
-                  ? "Now playing podcast..."
-                  : "Podcast"}
-            </RainbowText>
+            {!hasError ? (
+              <RainbowText animated={isGenerating}>
+                {isGenerating
+                  ? "Generating podcast..."
+                  : isPlaying
+                    ? "Now playing podcast..."
+                    : "Podcast"}
+              </RainbowText>
+            ) : (
+              <div className="text-red-500">
+                Error when generating podcast. Please try again.
+              </div>
+            )}
           </div>
-          {!isGenerating && (
+          {!hasError && !isGenerating && (
             <div className="flex">
               <Tooltip title="Download podcast">
                 <Button variant="ghost" size="icon" asChild>
@@ -441,13 +450,17 @@ function PodcastCard({
         </CardTitle>
       </CardHeader>
       <CardContent>
-        <audio
-          className="w-full"
-          src={audioUrl}
-          controls
-          onPlay={() => setIsPlaying(true)}
-          onPause={() => setIsPlaying(false)}
-        />
+        {audioUrl ? (
+          <audio
+            className="w-full"
+            src={audioUrl}
+            controls
+            onPlay={() => setIsPlaying(true)}
+            onPause={() => setIsPlaying(false)}
+          />
+        ) : (
+          <div className="w-full"></div>
+        )}
       </CardContent>
     </Card>
   );
diff --git a/web/src/core/store/store.ts b/web/src/core/store/store.ts
index 3078842..291e71f 100644
--- a/web/src/core/store/store.ts
+++ b/web/src/core/store/store.ts
@@ -294,7 +294,27 @@ export async function listenToPodcast(researchId: string) {
       };
       appendMessage(podcastMessage);
       // Generating podcast...
-      const audioUrl = await generatePodcast(reportMessage.content);
+      let audioUrl: string | undefined;
+      try {
+        audioUrl = await generatePodcast(reportMessage.content);
+      } catch (e) {
+        console.error(e);
+        useStore.setState((state) => ({
+          messages: new Map(useStore.getState().messages).set(
+            podCastMessageId,
+            {
+              ...state.messages.get(podCastMessageId)!,
+              content: JSON.stringify({
+                ...podcastObject,
+                error: e instanceof Error ? e.message : "Unknown error",
+              }),
+              isStreaming: false,
+            },
+          ),
+        }));
+        toast("An error occurred while generating podcast. Please try again.");
+        return;
+      }
       useStore.setState((state) => ({
         messages: new Map(useStore.getState().messages).set(podCastMessageId, {
           ...state.messages.get(podCastMessageId)!,