From 0a576c1008526d4552e936e917d669f5a60ef3c6 Mon Sep 17 00:00:00 2001
From: dancer <144584931+dancer@users.noreply.github.com>
Date: Mon, 2 Mar 2026 16:00:15 +0000
Subject: [PATCH] fix gateway error not showing in ui

---
 app/(chat)/api/chat/route.ts | 12 +++++++++++-
 components/chat.tsx          | 23 ++++++++++++-----------
 2 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/app/(chat)/api/chat/route.ts b/app/(chat)/api/chat/route.ts
index 80bd35e08a..1230af0182 100644
--- a/app/(chat)/api/chat/route.ts
+++ b/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({
diff --git a/components/chat.tsx b/components/chat.tsx
index 807864e923..ffc264c020 100644
--- a/components/chat.tsx
+++ b/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!",
+        });
       }
     },
   });