🛡️ fix: Improve Error Handling and Null Safety in SSE Event Processing (#10751)

* 🔧 fix: Handle null content parts in message processing

- Added checks to filter out null content parts in various message handling functions, ensuring robustness against undefined values.
- Updated the `extractMessageContent`, `useContentHandler`, `useEventHandlers`, and `useStepHandler` hooks to prevent errors caused by null parts.
- Enhanced the `getAllContentText` utility to only include valid content types, improving overall message integrity.

* 🔧 fix: Enhance error handling in event and SSE handlers

- Wrapped critical sections in try-catch blocks within `useEventHandlers` and `useSSE` hooks to improve error management and prevent application crashes.
- Added console error logging for better debugging and tracking of issues during message processing and conversation aborting.
- Ensured that UI states like `setIsSubmitting` and `setShowStopButton` are correctly updated in case of errors, maintaining a consistent user experience.

* 🔧 fix: Filter out null and empty content in message export

- Enhanced the `useExportConversation` hook to filter out null content parts and empty strings during message processing, ensuring only valid content is included in the export.
- This change improves the integrity of exported conversations by preventing unnecessary empty entries in the output.

client/src/components/Chat/Messages/HoverButtons.tsx

@@ -45,6 +45,9 @@ const extractMessageContent = (message: TMessage): string => {
   if (Array.isArray(message.content)) {
     return message.content
       .map((part) => {
+        if (part == null) {
+          return '';
+        }
         if (typeof part === 'string') {
           return part;
         }

client/src/hooks/Conversations/useExportConversation.ts

@@ -73,7 +73,9 @@ export default function useExportConversation({
     }
 
     return message.content
+      .filter((content) => content != null)
       .map((content) => getMessageContent(message.sender || '', content))
+      .filter((text) => text.length > 0)
       .map((text) => {
         return formatText(text[0], text[1]);
       })

client/src/hooks/SSE/useContentHandler.ts

@@ -33,9 +33,8 @@ export default function useContentHandler({ setMessages, getMessages }: TUseCont
 
       const _messages = getMessages();
       const messages =
-        _messages
+        _messages?.filter((m) => m.messageId !== messageId).map((msg) => ({ ...msg, thread_id })) ??
-          ?.filter((m) => m.messageId !== messageId)
+        [];
-          .map((msg) => ({ ...msg, thread_id })) ?? [];
       const userMessage = messages[messages.length - 1] as TMessage | undefined;
 
       const { initialResponse } = submission;
@@ -66,14 +65,17 @@ export default function useContentHandler({ setMessages, getMessages }: TUseCont
 
       response.content[index] = { type, [type]: part } as TMessageContentParts;
 
+      const lastContentPart = response.content[response.content.length - 1];
+      const initialContentPart = initialResponse.content?.[0];
       if (
         type !== ContentTypes.TEXT &&
-        initialResponse.content &&
+        initialContentPart != null &&
-        ((response.content[response.content.length - 1].type === ContentTypes.TOOL_CALL &&
+        lastContentPart != null &&
-          response.content[response.content.length - 1][ContentTypes.TOOL_CALL].progress === 1) ||
+        ((lastContentPart.type === ContentTypes.TOOL_CALL &&
-          response.content[response.content.length - 1].type === ContentTypes.IMAGE_FILE)
+          lastContentPart[ContentTypes.TOOL_CALL]?.progress === 1) ||
+          lastContentPart.type === ContentTypes.IMAGE_FILE)
       ) {
-        response.content.push(initialResponse.content[0]);
+        response.content.push(initialContentPart);
       }
 
       setMessages([...messages, response]);

client/src/hooks/SSE/useEventHandlers.ts

@@ -87,13 +87,15 @@ const createErrorMessage = ({
   let isValidContentPart = false;
   if (latestContent.length > 0) {
     const latestContentPart = latestContent[latestContent.length - 1];
-    const latestPartValue = latestContentPart?.[latestContentPart.type ?? ''];
+    if (latestContentPart != null) {
+      const latestPartValue = latestContentPart[latestContentPart.type ?? ''];
       isValidContentPart =
         latestContentPart.type !== ContentTypes.TEXT ||
         (latestContentPart.type === ContentTypes.TEXT && typeof latestPartValue === 'string')
           ? true
           : latestPartValue?.value !== '';
     }
+  }
   if (
     latestMessage?.conversationId &&
     latestMessage?.messageId &&
@@ -455,6 +457,7 @@ export default function useEventHandlers({
         isTemporary = false,
       } = submission;
 
+      try {
         if (responseMessage?.attachments && responseMessage.attachments.length > 0) {
           // Process each attachment through the attachmentHandler
           responseMessage.attachments.forEach((attachment) => {
@@ -470,13 +473,11 @@ export default function useEventHandlers({
           });
         }
 
-      setShowStopButton(false);
         setCompleted((prev) => new Set(prev.add(submission.initialResponse.messageId)));
 
         const currentMessages = getMessages();
         /* Early return if messages are empty; i.e., the user navigated away */
         if (!currentMessages || currentMessages.length === 0) {
-        setIsSubmitting(false);
           return;
         }
 
@@ -510,7 +511,6 @@ export default function useEventHandlers({
 
           setFinalMessages(currentConvoId, isNewChat ? [] : [...messages]);
           setDraft({ id: currentConvoId, value: requestMessage?.text });
-        setIsSubmitting(false);
           if (isNewChat) {
             navigate(`/c/${Constants.NEW_CONVO}`, { replace: true, state: { focusChat: true } });
           }
@@ -530,7 +530,8 @@ export default function useEventHandlers({
           setFinalMessages(conversation.conversationId, finalMessages);
         } else if (
           isAssistantsEndpoint(submissionConvo.endpoint) &&
-        (!submissionConvo.conversationId || submissionConvo.conversationId === Constants.NEW_CONVO)
+          (!submissionConvo.conversationId ||
+            submissionConvo.conversationId === Constants.NEW_CONVO)
         ) {
           queryClient.setQueryData<TMessage[]>(
             [QueryKeys.messages, conversation.conversationId],
@@ -569,7 +570,10 @@ export default function useEventHandlers({
               conversation.conversationId,
             ]);
             if (!cachedConvo) {
-            queryClient.setQueryData([QueryKeys.conversation, conversation.conversationId], update);
+              queryClient.setQueryData(
+                [QueryKeys.conversation, conversation.conversationId],
+                update,
+              );
             }
             return update;
           });
@@ -588,8 +592,10 @@ export default function useEventHandlers({
             navigate(`/c/${conversation.conversationId}`, { replace: true });
           }
         }
-
+      } finally {
+        setShowStopButton(false);
         setIsSubmitting(false);
+      }
     },
     [
       navigate,
@@ -722,16 +728,22 @@ export default function useEventHandlers({
         messages[messages.length - 2] != null
       ) {
         let requestMessage = messages[messages.length - 2];
-        const responseMessage = messages[messages.length - 1];
+        const _responseMessage = messages[messages.length - 1];
-        if (requestMessage.messageId !== responseMessage.parentMessageId) {
+        if (requestMessage.messageId !== _responseMessage.parentMessageId) {
           // the request message is the parent of response, which we search for backwards
           for (let i = messages.length - 3; i >= 0; i--) {
-            if (messages[i].messageId === responseMessage.parentMessageId) {
+            if (messages[i].messageId === _responseMessage.parentMessageId) {
               requestMessage = messages[i];
               break;
             }
           }
         }
+        /** Sanitize content array to remove undefined parts from interrupted streaming */
+        const responseMessage = {
+          ..._responseMessage,
+          content: _responseMessage.content?.filter((part) => part != null),
+        };
+        try {
           finalHandler(
             {
               conversation: {
@@ -742,6 +754,11 @@ export default function useEventHandlers({
             },
             submission,
           );
+        } catch (error) {
+          console.error('Error in finalHandler during abort:', error);
+          setShowStopButton(false);
+          setIsSubmitting(false);
+        }
         return;
       } else if (!isAssistantsEndpoint(endpoint)) {
         const convoId = conversationId || `_${v4()}`;
@@ -809,13 +826,14 @@ export default function useEventHandlers({
       }
     },
     [
-      finalHandler,
-      newConversation,
-      setIsSubmitting,
       token,
-      cancelHandler,
       getMessages,
       setMessages,
+      finalHandler,
+      cancelHandler,
+      newConversation,
+      setIsSubmitting,
+      setShowStopButton,
     ],
   );
 

client/src/hooks/SSE/useSSE.ts

@@ -124,7 +124,13 @@ export default function useSSE(
       if (data.final != null) {
         clearDraft(submission.conversation?.conversationId);
         const { plugins } = data;
+        try {
           finalHandler(data, { ...submission, plugins } as EventSubmission);
+        } catch (error) {
+          console.error('Error in finalHandler:', error);
+          setIsSubmitting(false);
+          setShowStopButton(false);
+        }
         (startupConfig?.balance?.enabled ?? false) && balanceQuery.refetch();
         console.log('final', data);
         return;
@@ -187,7 +193,8 @@ export default function useSSE(
       setCompleted((prev) => new Set(prev.add(streamKey)));
       const latestMessages = getMessages();
       const conversationId = latestMessages?.[latestMessages.length - 1]?.conversationId;
-      return await abortConversation(
+      try {
+        await abortConversation(
           conversationId ??
             userMessage.conversationId ??
             submission.conversation?.conversationId ??
@@ -195,6 +202,11 @@ export default function useSSE(
           submission as EventSubmission,
           latestMessages,
         );
+      } catch (error) {
+        console.error('Error during abort:', error);
+        setIsSubmitting(false);
+        setShowStopButton(false);
+      }
     });
 
     sse.addEventListener('error', async (e: MessageEvent) => {

client/src/hooks/SSE/useStepHandler.ts

@@ -313,6 +313,10 @@ export default function useStepHandler({
             ? messageDelta.delta.content[0]
             : messageDelta.delta.content;
 
+          if (contentPart == null) {
+            return;
+          }
+
           const currentIndex = calculateContentIndex(
             runStep.index,
             initialContent,
@@ -345,6 +349,10 @@ export default function useStepHandler({
             ? reasoningDelta.delta.content[0]
             : reasoningDelta.delta.content;
 
+          if (contentPart == null) {
+            return;
+          }
+
           const currentIndex = calculateContentIndex(
             runStep.index,
             initialContent,

client/src/utils/messages.ts

@@ -44,7 +44,7 @@ export const getAllContentText = (message?: TMessage | null): string => {
 
   if (message.content && message.content.length > 0) {
     return message.content
-      .filter((part) => part.type === ContentTypes.TEXT)
+      .filter((part) => part != null && part.type === ContentTypes.TEXT)
       .map((part) => {
         if (!('text' in part)) return '';
         const text = part.text;