fix: gateway error not showing in ui (#1441)

app/(chat)/api/chat/route.ts

@@ -220,7 +220,17 @@ export async function POST(request: Request) {
           });
         }
       },
-      onError: () => "Oops, an error occurred!",
+      onError: (error) => {
+        if (
+          error instanceof Error &&
+          error.message?.includes(
+            "AI Gateway requires a valid credit card on file to service requests",
+          )
+        ) {
+          return "AI Gateway requires a valid credit card on file to service requests. Please visit https://vercel.com/d?to=%2F%5Bteam%5D%2F%7E%2Fai%3Fmodal%3Dadd-credit-card to add a card and unlock your free credits.";
+        }
+        return "Oops, an error occurred!";
+      },
     });
 
     return createUIMessageStreamResponse({

components/chat.tsx

@@ -138,17 +138,18 @@ export function Chat({
       mutate(unstable_serialize(getChatHistoryPaginationKey));
     },
     onError: (error) => {
-      if (error instanceof ChatbotError) {
+      if (error.message?.includes("AI Gateway requires a valid credit card")) {
-        if (
+        setShowCreditCardAlert(true);
-          error.message?.includes("AI Gateway requires a valid credit card")
+      } else if (error instanceof ChatbotError) {
-        ) {
+        toast({
-          setShowCreditCardAlert(true);
+          type: "error",
-        } else {
+          description: error.message,
-          toast({
+        });
-            type: "error",
+      } else {
-            description: error.message,
+        toast({
-          });
+          type: "error",
-        }
+          description: error.message || "Oops, an error occurred!",
+        });
       }
     },
   });