fix: handle Supabase 403 error when listing branches for free tier users (#2527)

src/components/SupabaseConnector.tsx

@@ -37,7 +37,9 @@ import connectSupabaseDark from "../../assets/supabase/connect-supabase-dark.svg
 // @ts-ignore
 import connectSupabaseLight from "../../assets/supabase/connect-supabase-light.svg";
 
-import { ExternalLink, Plus, RefreshCw, Trash2 } from "lucide-react";
+import { ExternalLink, Info, Plus, RefreshCw, Trash2 } from "lucide-react";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { getErrorMessage } from "@/lib/errors";
 import {
   Tooltip,
   TooltipTrigger,
@@ -66,6 +68,7 @@ export function SupabaseConnector({ appId }: { appId: number }) {
     isFetchingProjects,
     projectsError,
     isLoadingBranches,
+    branchesError,
     isSettingAppProject,
     refetchOrganizations,
     refetchProjects,
@@ -205,49 +208,58 @@ export function SupabaseConnector({ appId }: { appId: number }) {
           <div className="space-y-4">
             <div className="space-y-2">
               <Label htmlFor="supabase-branch-select">Database Branch</Label>
-              <Select
-                value={app.supabaseProjectId || ""}
-                onValueChange={async (supabaseBranchProjectId) => {
-                  try {
-                    const branch = branches.find(
-                      (b) => b.projectRef === supabaseBranchProjectId,
-                    );
-                    if (!branch) {
-                      throw new Error("Branch not found");
+              {branchesError ? (
+                <Alert>
+                  <Info className="h-4 w-4" />
+                  <AlertDescription>
+                    {getErrorMessage(branchesError)}
+                  </AlertDescription>
+                </Alert>
+              ) : (
+                <Select
+                  value={app.supabaseProjectId || ""}
+                  onValueChange={async (supabaseBranchProjectId) => {
+                    try {
+                      const branch = branches.find(
+                        (b) => b.projectRef === supabaseBranchProjectId,
+                      );
+                      if (!branch) {
+                        throw new Error("Branch not found");
+                      }
+                      // Keep the same organizationSlug from the app
+                      await setAppProject({
+                        projectId: branch.projectRef,
+                        parentProjectId: branch.parentProjectRef,
+                        appId,
+                        organizationSlug: app.supabaseOrganizationSlug,
+                      });
+                      toast.success("Branch selected");
+                      await refreshApp();
+                    } catch (error) {
+                      toast.error("Failed to set branch: " + error);
                     }
-                    // Keep the same organizationSlug from the app
-                    await setAppProject({
-                      projectId: branch.projectRef,
-                      parentProjectId: branch.parentProjectRef,
-                      appId,
-                      organizationSlug: app.supabaseOrganizationSlug,
-                    });
-                    toast.success("Branch selected");
-                    await refreshApp();
-                  } catch (error) {
-                    toast.error("Failed to set branch: " + error);
-                  }
-                }}
-                disabled={isLoadingBranches || isSettingAppProject}
-              >
-                <SelectTrigger
-                  id="supabase-branch-select"
-                  data-testid="supabase-branch-select"
+                  }}
+                  disabled={isLoadingBranches || isSettingAppProject}
                 >
-                  <SelectValue placeholder="Select a branch" />
-                </SelectTrigger>
-                <SelectContent>
-                  {branches.map((branch) => (
-                    <SelectItem
-                      key={branch.projectRef}
-                      value={branch.projectRef}
-                    >
-                      {branch.name}
-                      {branch.isDefault && " (Default)"}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
+                  <SelectTrigger
+                    id="supabase-branch-select"
+                    data-testid="supabase-branch-select"
+                  >
+                    <SelectValue placeholder="Select a branch" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {branches.map((branch) => (
+                      <SelectItem
+                        key={branch.projectRef}
+                        value={branch.projectRef}
+                      >
+                        {branch.name}
+                        {branch.isDefault && " (Default)"}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              )}
             </div>
 
             <Button variant="destructive" onClick={handleUnsetProject}>

src/hooks/useSupabase.ts

@@ -103,7 +103,6 @@ export function useSupabase(options: UseSupabaseOptions = {}) {
       return Array.isArray(list) ? list : [];
     },
     enabled: !!branchesProjectId,
-    meta: { showErrorToast: true },
   });
 
   // Mutation: Load edge function logs for a Supabase project

src/lib/errors.ts

+/**
+ * Extracts a user-friendly error message from an Error object.
+ *
+ * Electron IPC errors are wrapped as:
+ *   "Error invoking remote method '<channel>': Error: <actual message>"
+ *
+ * This strips the IPC wrapper and returns just the meaningful message.
+ */
+export function getErrorMessage(error: unknown): string {
+  const raw =
+    error instanceof Error ? error.message : String(error ?? "Unknown error");
+  return raw.replace(/^Error invoking remote method '.*?':\s*Error:\s*/, "");
+}

src/supabase_admin/supabase_management_client.ts

@@ -704,6 +704,14 @@ export async function listSupabaseBranches({
     `List Supabase branches for ${supabaseProjectId}`,
   );
 
+  if (response.status === 403) {
+    // 403 Forbidden means the user doesn't have access to branches (e.g., free tier)
+    logger.info(
+      `Branches not available for project ${supabaseProjectId} (403 Forbidden - likely free tier)`,
+    );
+    throw new Error("Branches are only supported for Supabase paid customers");
+  }
+
   if (response.status !== 200) {
     throw await createResponseError(response, "list branches");
   }