FEAT: added helpful error responses for fetchActionPlan and fetchResources (#92)

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: michelle-hadfield-nava

frontend/src/app/[locale]/generate-referrals/page.tsx

@@ -127,6 +127,9 @@ export default function Page() {
   const [actionPlan, setActionPlan] = useState<ActionPlan | null>(null);
   const [isGeneratingActionPlan, setIsGeneratingActionPlan] = useState(false);
   const [activeTab, setActiveTab] = useState("find-referrals");
+  const [errorMessage, setErrorMessage] = useState<string | undefined>(
+    undefined,
+  );
 
   const searchParams = useSearchParams();
 
@@ -177,14 +180,16 @@ export default function Page() {
 
     setLoading(true);
     setResult(null);
+    setErrorMessage(undefined);
     try {
       const request = clientDescription + getCollatedReferralOptions();
-      const { resultId, resources } = await fetchResources(
+      const { resultId, resources, errorMessage } = await fetchResources(
         request,
         userEmail,
         prompt_version_id,
       );
       setResultId(resultId);
+      setErrorMessage(errorMessage);
       onResources(resources);
     } catch (e: unknown) {
       const message = e instanceof Error ? e.message : "Unknown error";
@@ -210,6 +215,7 @@ export default function Page() {
     setClientDescription("");
     setSelectedResources([]);
     setActionPlan(null);
+    setErrorMessage(undefined);
   }
 
   function handleResourceSelection(resource: Resource, checked: boolean) {
@@ -236,12 +242,20 @@ export default function Page() {
 
     setIsGeneratingActionPlan(true);
     setActionPlan(null);
+    setErrorMessage(undefined);
 
     try {
-      const plan = await fetchActionPlan(selectedResources, userEmail);
+      const { actionPlan: plan, errorMessage: planError } =
+        await fetchActionPlan(selectedResources, userEmail);
       setActionPlan(plan);
+      if (planError) {
+        setErrorMessage(planError);
+      }
     } catch (error) {
       console.error("Error generating action plan:", error);
+      setErrorMessage(
+        "The server encountered an unexpected error. Please try again later.",
+      );
     } finally {
       setIsGeneratingActionPlan(false);
     }
@@ -549,7 +563,10 @@ export default function Page() {
                     {resultId && <EmailReferralsButton resultId={resultId} />}
                   </div>
                 </div>
-                <ResourcesList resources={result ?? []} />
+                <ResourcesList
+                  resources={result ?? []}
+                  errorMessage={errorMessage}
+                />
                 {result && result.length > 0 && (
                   <ActionPlanSection
                     resources={result}

frontend/src/components/ResourcesList.tsx

@@ -57,9 +57,15 @@ const normalizeUrl = (url: string) => {
   return `https://${trimmed}`;
 };
 
-const ResourcesList = ({ resources }: { resources: Resource[] }) => {
+const ResourcesList = ({
+  resources,
+  errorMessage,
+}: {
+  resources: Resource[];
+  errorMessage?: string;
+}) => {
   return resources.length === 0 ? (
-    <div className="m-3">No resources found.</div>
+    <div className="m-3">{errorMessage || "No resources found."}</div>
   ) : (
     <div className="mt-2">
       {resources.map((r, i) => (

frontend/src/util/fetchActionPlan.ts

@@ -52,7 +52,7 @@ function fixJsonControlCharacters(jsonString: string): string {
 export async function fetchActionPlan(
   resources: Resource[],
   userEmail: string,
-): Promise<ActionPlan | null> {
+): Promise<{ actionPlan: ActionPlan | null; errorMessage?: string }> {
   const apiDomain = await getApiDomain();
   const url = apiDomain + "generate_action_plan/run";
   const headers = {
@@ -78,7 +78,11 @@ export async function fetchActionPlan(
 
     if (!upstream.ok) {
       console.error("Failed to generate action plan:", upstream.statusText);
-      return null;
+      return {
+        actionPlan: null,
+        errorMessage:
+          "The server encountered an unexpected error. Please try again later.",
+      };
     }
 
     /* eslint-disable */
@@ -93,9 +97,23 @@ export async function fetchActionPlan(
     const actionPlan = JSON.parse(fixedJson);
     /* eslint-enable */
 
-    return actionPlan as ActionPlan;
+    return { actionPlan: actionPlan as ActionPlan };
   } catch (error) {
-    console.error("Error fetching action plan:", error);
-    return null;
+    clearTimeout(timer);
+    // Check if the error is due to timeout
+    if (error instanceof Error && error.name === "AbortError") {
+      return {
+        actionPlan: null,
+        errorMessage: "Request timed out, please try again.",
+      };
+    }
   }
+  // Generic error handling
+  console.error("Error fetching action plan");
+  clearTimeout(timer);
+  return {
+    actionPlan: null,
+    errorMessage:
+      "The server encountered an unexpected error. Please try again later.",
+  };
 }

frontend/src/util/fetchResources.ts

@@ -55,8 +55,37 @@ export async function fetchResources(
 
     /* eslint-enable */
 
-    return { resultId: resultUuid, resources: resourcesAsArray };
-  } catch {
-    return { resultId: "", resources: [] };
+    // Check if resources array is empty
+    if (resourcesAsArray.length === 0) {
+      return {
+        resultId: resultUuid,
+        resources: [],
+        errorMessage: "The API did not return any resource recommendations.",
+      };
+    }
+
+    // Success, return result
+    return {
+      resultId: resultUuid,
+      resources: resourcesAsArray,
+    };
+  } catch (error) {
+    clearTimeout(timer);
+    // Check if the error is due to timeout
+    if (error instanceof Error && error.name === "AbortError") {
+      return {
+        resultId: "",
+        resources: [],
+        errorMessage: "Request timed out, please try again.",
+      };
+    }
   }
+
+  // Generic error handling
+  return {
+    resultId: "",
+    resources: [],
+    errorMessage:
+      "The server encountered an unexpected error. Please try again later.",
+  };
 }