fix: gateway error not showing in ui

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")
-        ) {
-          setShowCreditCardAlert(true);
-        } else {
-          toast({
-            type: "error",
-            description: error.message,
-          });
-        }
+      if (error.message?.includes("AI Gateway requires a valid credit card")) {
+        setShowCreditCardAlert(true);
+      } else if (error instanceof ChatbotError) {
+        toast({
+          type: "error",
+          description: error.message,
+        });
+      } else {
+        toast({
+          type: "error",
+          description: error.message || "Oops, an error occurred!",
+        });
       }
     },
   });