fix(admin): surface API error message in toasts

web/sdk/admin/views/organizations/details/edit/billing.tsx

@@ -117,7 +117,7 @@ export function EditBillingPanel({ open = false, onClose }: EditBillingPanelProp
       onError: (error) => {
         toastManager.add({
           title: "Something went wrong",
-          description: error.message,
+          description: error.rawMessage,
           type: "error",
         });
         console.error("Unable to update billing details:", error);

web/sdk/admin/views/organizations/details/edit/kyc.tsx

@@ -86,7 +86,7 @@ export function EditKYCPanel({ open = false, onClose }: EditKYCPanelProps) {
       onClose();
     },
     onError: (error) => {
-      toastManager.add({ title: `Failed to update KYC details: ${error.message}`, type: "error" });
+      toastManager.add({ title: "Failed to update KYC details", description: error.rawMessage, type: "error" });
       console.error("Unable to update KYC details:", error);
     },
   });

web/sdk/admin/views/organizations/details/layout/add-tokens-dialog.tsx

@@ -71,7 +71,7 @@ export const AddTokensDialog = ({ onOpenChange }: InviteUsersDialogProps) => {
       onError: (error) => {
         toastManager.add({
           title: "Something went wrong",
-          description: error.message,
+          description: error.rawMessage,
           type: "error",
         });
         console.error("Unable to add tokens:", error);

web/sdk/admin/views/organizations/details/layout/invite-users-dialog.tsx

@@ -98,11 +98,11 @@ export const InviteUsersDialog = ({ onOpenChange }: InviteUsersDialogProps) => {
       handleConnectError(error, {
         AlreadyExists: () => toastManager.add({ title: 'Invitation already exists', type: "error" }),
         InvalidArgument: err =>
-          toastManager.add({ title: 'Invalid input', description: err.message, type: "error" }),
+          toastManager.add({ title: 'Invalid input', description: err.rawMessage, type: "error" }),
         PermissionDenied: () =>
           toastManager.add({ title: "You don't have permission to perform this action", type: "error" }),
         Default: err =>
-          toastManager.add({ title: 'Something went wrong', description: err.message, type: "error" })
+          toastManager.add({ title: 'Something went wrong', description: err.rawMessage, type: "error" })
       });
     }
   };

web/sdk/admin/views/organizations/details/members/remove-member.tsx

@@ -6,7 +6,7 @@ import {
 import { create } from "@bufbuild/protobuf";
 import { useMutation } from "@connectrpc/connect-query";
 import { Button, Dialog, Flex, Text, toastManager } from "@raystack/apsara-v1";
-import { ConnectError } from "@connectrpc/connect";
+import { handleConnectError } from "~/utils/error";
 import { useTerminology } from "../../../../hooks/useTerminology";
 
 interface RemoveMemberProps {
@@ -42,12 +42,20 @@ export const RemoveMember = ({
       }
       toastManager.add({ title: `${t.member({ case: "capital" })} removed successfully`, type: "success" });
     } catch (error) {
-      const message =
-        error instanceof ConnectError
-          ? error.message
-          : "Unknown error";
-      toastManager.add({ title: `Failed to remove ${t.member({ case: "lower" })}: ${message}`, type: "error" });
       console.error(error);
+      handleConnectError(error, {
+        PermissionDenied: () =>
+          toastManager.add({
+            title: "You don't have permission to perform this action",
+            type: "error",
+          }),
+        Default: (err) =>
+          toastManager.add({
+            title: `Failed to remove ${t.member({ case: "lower" })}`,
+            description: err.rawMessage,
+            type: "error",
+          }),
+      });
     }
   }
 

web/sdk/admin/views/organizations/details/projects/members/remove-member.tsx

@@ -9,6 +9,7 @@ import { useMutation } from "@connectrpc/connect-query";
 import styles from "./members.module.css";
 
 import { AlertDialog, Button, Flex, Text, toastManager } from "@raystack/apsara-v1";
+import { handleConnectError } from "~/utils/error";
 import { useTerminology } from "../../../../../hooks/useTerminology";
 
 interface RemoveMemberProps {
@@ -49,8 +50,20 @@ export const RemoveMember = ({
 
       toastManager.add({ title: `${t.member({ case: "capital" })} removed successfully`, type: "success" });
     } catch (error) {
-      toastManager.add({ title: `Failed to remove ${t.member({ case: "lower" })}`, type: "error" });
       console.error(error);
+      handleConnectError(error, {
+        PermissionDenied: () =>
+          toastManager.add({
+            title: "You don't have permission to perform this action",
+            type: "error",
+          }),
+        Default: (err) =>
+          toastManager.add({
+            title: `Failed to remove ${t.member({ case: "lower" })}`,
+            description: err.rawMessage,
+            type: "error",
+          }),
+      });
     } finally {
       setIsSubmitting(false);
     }

web/sdk/admin/views/organizations/details/projects/rename-project.tsx

@@ -10,6 +10,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm, Controller } from "react-hook-form";
 import React from "react";
 import { useMutation } from "@connectrpc/connect-query";
+import { handleConnectError } from "~/utils/error";
 import { useTerminology } from "../../../../hooks/useTerminology";
 
 const projectRenameSchema = z.object({
@@ -72,8 +73,25 @@ export function RenameProjectDialog({
         });
       }
     } catch (error) {
-      toastManager.add({ title: `Failed to rename ${t.project({ case: "lower" })}`, type: "error" });
       console.error(error);
+      handleConnectError(error, {
+        AlreadyExists: () =>
+          toastManager.add({
+            title: `${t.project({ case: "capital" })} with this name already exists`,
+            type: "error",
+          }),
+        PermissionDenied: () =>
+          toastManager.add({
+            title: "You don't have permission to perform this action",
+            type: "error",
+          }),
+        Default: (err) =>
+          toastManager.add({
+            title: `Failed to rename ${t.project({ case: "lower" })}`,
+            description: err.rawMessage,
+            type: "error",
+          }),
+      });
     }
   };
 

web/sdk/admin/views/organizations/details/projects/use-add-project-members.tsx

@@ -85,8 +85,8 @@ export function useAddProjectMembers({ projectId }: useAddProjectMembersProps) {
         handleConnectError(error, {
           AlreadyExists: () => toastManager.add({ title: `${memberLabel} already exists in this project`, type: "error" }),
           PermissionDenied: () => toastManager.add({ title: "You don't have permission to perform this action", type: "error" }),
-          InvalidArgument: (err) => toastManager.add({ title: 'Invalid input', description: err.message, type: "error" }),
-          Default: (err) => toastManager.add({ title: 'Something went wrong', description: err.message, type: "error" }),
+          InvalidArgument: (err) => toastManager.add({ title: 'Invalid input', description: err.rawMessage, type: "error" }),
+          Default: (err) => toastManager.add({ title: 'Something went wrong', description: err.rawMessage, type: "error" }),
         });
       }
     },

web/sdk/admin/views/organizations/details/security/block-organization.tsx

@@ -45,7 +45,7 @@ const BlockOrganizationDialog = () => {
       onError: (error) => {
         toastManager.add({
           title: "Something went wrong",
-          description: error.message,
+          description: error.rawMessage,
           type: "error",
         });
         console.error("Failed to block organization:", error);
@@ -71,7 +71,7 @@ const BlockOrganizationDialog = () => {
       onError: (error) => {
         toastManager.add({
           title: "Something went wrong",
-          description: error.message,
+          description: error.rawMessage,
           type: "error",
         });
         console.error("Failed to unblock organization:", error);

web/sdk/admin/views/organizations/details/security/domains-list.tsx

@@ -46,7 +46,7 @@ const DeleteDomainDialog = ({
       onError: (error) => {
         toastManager.add({
           title: "Something went wrong",
-          description: error.message,
+          description: error.rawMessage,
           type: "error",
         });
         console.error("Unable to delete domain:", error);

web/sdk/admin/views/preferences/details.tsx

@@ -13,6 +13,7 @@ import { useCallback, useEffect, useState } from "react";
 import Skeleton from "react-loading-skeleton";
 import dayjs from "dayjs";
 import { useMutation, createConnectQueryKey, useTransport } from "@connectrpc/connect-query";
+import { handleConnectError } from "~/utils/error";
 import { AdminServiceQueries, CreatePreferencesRequestSchema, ListPreferencesResponse } from "@raystack/proton/frontier";
 import { Preference, PreferenceTrait, PreferenceTrait_InputType } from "@raystack/proton/frontier";
 import { timestampDate } from "@bufbuild/protobuf/wkt";
@@ -185,8 +186,20 @@ export default function PreferenceDetails({
       }));
       toastManager.add({ title: "preference updated", type: "success" });
     } catch (err) {
-      console.error("ConnectRPC Error:", err);
-      toastManager.add({ title: "something went wrong", type: "error" });
+      console.error(err);
+      handleConnectError(err, {
+        PermissionDenied: () =>
+          toastManager.add({
+            title: "You don't have permission to perform this action",
+            type: "error",
+          }),
+        Default: (e) =>
+          toastManager.add({
+            title: "Something went wrong",
+            description: e.rawMessage,
+            type: "error",
+          }),
+      });
     }
   }, [name, value, createPreferences]);
 
@@ -231,6 +244,7 @@ export default function PreferenceDetails({
               trait={trait}
               value={value}
               onChange={setValue}
+              data-test-id="frontier-admin-preference-value-input"
             />
             <Button
               onClick={onSave}

web/sdk/admin/views/users/details/security/block-user.tsx

@@ -92,8 +92,8 @@ export const BlockUserDialog = () => {
     } catch (error) {
       handleConnectError(error, {
         PermissionDenied: () => toastManager.add({ title: "You don't have permission to perform this action", type: "error" }),
-        NotFound: (err) => toastManager.add({ title: 'Not found', description: err.message, type: "error" }),
-        Default: (err) => toastManager.add({ title: errorMessage, description: err.message, type: "error" }),
+        NotFound: (err) => toastManager.add({ title: 'Not found', description: err.rawMessage, type: "error" }),
+        Default: (err) => toastManager.add({ title: errorMessage, description: err.rawMessage, type: "error" }),
       });
     }
   };

web/sdk/admin/views/users/details/security/sessions/revoke-session-final-confirm.tsx

@@ -5,6 +5,7 @@ import {
   Flex,
   Text
 } from '@raystack/apsara-v1';
+import { handleConnectError } from '~/utils/error';
 import styles from './sessions.module.css';
 
 interface RevokeSessionFinalConfirmProps {
@@ -24,11 +25,19 @@ export const RevokeSessionFinalConfirm = ({
     try {
       onConfirm();
       onOpenChange(false);
-    } catch (error: any) {
-      toastManager.add({
-        title: 'Failed to revoke session',
-        description: error.message || 'Something went wrong',
-        type: "error",
+    } catch (error) {
+      handleConnectError(error, {
+        PermissionDenied: () =>
+          toastManager.add({
+            title: "You don't have permission to perform this action",
+            type: 'error',
+          }),
+        Default: (err) =>
+          toastManager.add({
+            title: 'Failed to revoke session',
+            description: err.rawMessage || 'Something went wrong',
+            type: 'error',
+          }),
       });
     }
   };

web/sdk/admin/views/users/list/invite-users.tsx

@@ -122,9 +122,9 @@ export const InviteUser = () => {
     } catch (error) {
       handleConnectError(error, {
         AlreadyExists: () => toastManager.add({ title: 'Invitation already exists', type: "error" }),
-        InvalidArgument: (err) => toastManager.add({ title: 'Invalid input', description: err.message, type: "error" }),
+        InvalidArgument: (err) => toastManager.add({ title: 'Invalid input', description: err.rawMessage, type: "error" }),
         PermissionDenied: () => toastManager.add({ title: "You don't have permission to perform this action", type: "error" }),
-        Default: (err) => toastManager.add({ title: 'Something went wrong', description: err.message, type: "error" }),
+        Default: (err) => toastManager.add({ title: 'Something went wrong', description: err.rawMessage, type: "error" }),
       });
     }
   };

web/sdk/admin/views/webhooks/webhooks/create/index.tsx

@@ -9,6 +9,7 @@ import { Form, FormSubmit } from "@radix-ui/react-form";
 import { CustomFieldName } from "../../../../components/CustomField";
 import events from "../../../../utils/webhook-events";
 import { useMutation } from "@connectrpc/connect-query";
+import { handleConnectError } from "~/utils/error";
 import {
   AdminServiceQueries,
   type WebhookRequestBody,
@@ -69,7 +70,19 @@ export default function CreateWebhooks({ open = false, onClose: onCloseProp }: C
       }
     } catch (err) {
       console.error("Failed to create webhook:", err);
-      toastManager.add({ title: "Something went wrong", type: "error" });
+      handleConnectError(err, {
+        PermissionDenied: () =>
+          toastManager.add({
+            title: "You don't have permission to perform this action",
+            type: "error",
+          }),
+        Default: (e) =>
+          toastManager.add({
+            title: "Something went wrong",
+            description: e.rawMessage,
+            type: "error",
+          }),
+      });
     }
   };
 

web/sdk/admin/views/webhooks/webhooks/delete/index.tsx

@@ -1,5 +1,6 @@
 import { Button, Dialog, Flex, Text, toastManager } from "@raystack/apsara-v1";
 import type { useMutation } from "@connectrpc/connect-query";
+import { handleConnectError } from "~/utils/error";
 
 interface DeleteWebhookDialogProps {
   isOpen: boolean;
@@ -23,7 +24,19 @@ export function DeleteWebhookDialog({
       onOpenChange(false);
     } catch (err) {
       console.error("Failed to delete webhook:", err);
-      toastManager.add({ title: "Failed to delete webhook", type: "error" });
+      handleConnectError(err, {
+        PermissionDenied: () =>
+          toastManager.add({
+            title: "You don't have permission to perform this action",
+            type: "error",
+          }),
+        Default: (e) =>
+          toastManager.add({
+            title: "Failed to delete webhook",
+            description: e.rawMessage,
+            type: "error",
+          }),
+      });
     }
   };
 

web/sdk/admin/views/webhooks/webhooks/update/index.tsx

@@ -9,6 +9,7 @@ import { Form, FormSubmit } from "@radix-ui/react-form";
 import { CustomFieldName } from "../../../../components/CustomField";
 import events from "../../../../utils/webhook-events";
 import { useMutation } from "@connectrpc/connect-query";
+import { handleConnectError } from "~/utils/error";
 import {
   AdminServiceQueries,
   type WebhookRequestBody,
@@ -85,7 +86,19 @@ export default function UpdateWebhooks({ open = false, webhookId: webhookIdProp,
       }
     } catch (err) {
       console.error("Failed to update webhook:", err);
-      toastManager.add({ title: "Something went wrong", type: "error" });
+      handleConnectError(err, {
+        PermissionDenied: () =>
+          toastManager.add({
+            title: "You don't have permission to perform this action",
+            type: "error",
+          }),
+        Default: (e) =>
+          toastManager.add({
+            title: "Something went wrong",
+            description: e.rawMessage,
+            type: "error",
+          }),
+      });
     }
   };