feat: Add detailed error message on UI when failed stream response (#634

) * feat: add error handling to usePostMessageStreaming and display in ChatPage * remove commentout
aws-samples · Dec 6, 2024 · 062a1c9 · 062a1c9
1 parent eca2c66
commit 062a1c9
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 18 deletions.
diff --git a/frontend/src/hooks/usePostMessageStreaming.ts b/frontend/src/hooks/usePostMessageStreaming.ts
@@ -15,8 +15,10 @@ const usePostMessageStreaming = create<{
     dispatch: (completion: string) => void;
     thinkingDispatch: (event: AgentEvent) => void;
   }) => Promise<string>;
-}>(() => {
+  errorDetail: string | null;
+}>((set) => {
   return {
+    errorDetail: null,
     post: async ({ input, dispatch, thinkingDispatch }) => {
       const token = (await fetchAuthSession()).tokens?.idToken?.toString();
       const payloadString = JSON.stringify({
@@ -136,7 +138,13 @@ const usePostMessageStreaming = create<{
                 case PostStreamingStatus.ERROR:
                   ws.close();
                   console.error(data);
-                  throw new Error(i18next.t('error.predict.invalidResponse'));
+                  set({
+                    errorDetail:
+                      data.reason || i18next.t('error.predict.invalidResponse'),
+                  });
+                  throw new Error(
+                    data.reason || i18next.t('error.predict.invalidResponse')
+                  );
                 default:
                   dispatch('');
                   break;

diff --git a/frontend/src/pages/ChatPage.tsx b/frontend/src/pages/ChatPage.tsx
@@ -37,7 +37,10 @@ import StatusSyncBot from '../components/StatusSyncBot';
 import Alert from '../components/Alert';
 import useBotSummary from '../hooks/useBotSummary';
 import useModel from '../hooks/useModel';
-import { AgentState, AgentToolsProps } from '../features/agent/xstates/agentThink';
+import {
+  AgentState,
+  AgentToolsProps,
+} from '../features/agent/xstates/agentThink';
 import { getRelatedDocumentsOfToolUse } from '../features/agent/utils/AgentUtils';
 import { SyncStatus } from '../constants';
 import { BottomHelper } from '../features/helper/components/BottomHelper';
@@ -46,12 +49,13 @@ import {
   DisplayMessageContent,
   PutFeedbackRequest,
 } from '../@types/conversation';
-
+import usePostMessageStreaming from '../hooks/usePostMessageStreaming';
 
 const ChatPage: React.FC = () => {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const { open: openSnackbar } = useSnackbar();
+  const { errorDetail } = usePostMessageStreaming();
 
   const {
     agentThinking,
@@ -323,11 +327,13 @@ const ChatPage: React.FC = () => {
   }> = React.memo((props) => {
     const { chatContent: message } = props;
 
-    const isAgentThinking = useMemo(() => (
-      [AgentState.THINKING, AgentState.LEAVING].some(v => (
-        v === agentThinking.value
-      ))
-    ), []);
+    const isAgentThinking = useMemo(
+      () =>
+        [AgentState.THINKING, AgentState.LEAVING].some(
+          (v) => v === agentThinking.value
+        ),
+      []
+    );
 
     const tools: AgentToolsProps[] | undefined = useMemo(() => {
       if (isAgentThinking) {
@@ -361,8 +367,14 @@ const ChatPage: React.FC = () => {
 
         if (bot?.hasKnowledge) {
           const pseudoToolUseId = message.id;
-          const relatedDocumentsOfVectorSearch = getRelatedDocumentsOfToolUse(relatedDocuments, pseudoToolUseId);
-          if (relatedDocumentsOfVectorSearch != null && relatedDocumentsOfVectorSearch.length > 0) {
+          const relatedDocumentsOfVectorSearch = getRelatedDocumentsOfToolUse(
+            relatedDocuments,
+            pseudoToolUseId
+          );
+          if (
+            relatedDocumentsOfVectorSearch != null &&
+            relatedDocumentsOfVectorSearch.length > 0
+          ) {
             return [
               {
                 tools: {
@@ -382,11 +394,13 @@ const ChatPage: React.FC = () => {
       }
     }, [isAgentThinking, message]);
 
-    const relatedDocumentsForCitation = useMemo(() => (
-      isAgentThinking
-        ? agentThinking.context.relatedDocuments
-        : relatedDocuments
-    ), [isAgentThinking]);
+    const relatedDocumentsForCitation = useMemo(
+      () =>
+        isAgentThinking
+          ? agentThinking.context.relatedDocuments
+          : relatedDocuments,
+      [isAgentThinking]
+    );
 
     return (
       <ChatMessage
@@ -506,7 +520,7 @@ const ChatPage: React.FC = () => {
                 <div className="mb-12 mt-2 flex flex-col items-center">
                   <div className="flex items-center font-bold text-red">
                     <PiWarningCircleFill className="mr-1 text-2xl" />
-                    {t('error.answerResponse')}
+                    {errorDetail ?? t('error.answerResponse')}
                   </div>
 
                   <Button
@@ -527,7 +541,8 @@ const ChatPage: React.FC = () => {
         </section>
       </div>
 
-      <div className={`bottom-0 z-0 flex w-full flex-col items-center justify-center ${messages.length === 0 ? 'absolute top-1/2 -translate-y-1/2' : ''}`}>
+      <div
+        className={`bottom-0 z-0 flex w-full flex-col items-center justify-center ${messages.length === 0 ? 'absolute top-1/2 -translate-y-1/2' : ''}`}>
         {bot && bot.syncStatus !== SyncStatus.SUCCEEDED && (
           <div className="mb-8 w-1/2">
             <Alert