Standardize error with extras (#61)

stellar · Jan 3, 2024 · 7ccda5d · 7ccda5d
1 parent 3eaea58
commit 7ccda5d
Show file tree

Hide file tree

Showing 42 changed files with 242 additions and 146 deletions.
diff --git a/src/api/handleApiErrorString.ts b/src/api/handleApiErrorString.ts
diff --git a/src/apiQueries/useResetPassword.ts b/src/apiQueries/useResetPassword.ts
@@ -1,6 +1,7 @@
 import { useMutation } from "@tanstack/react-query";
 import { API_URL } from "constants/settings";
 import { fetchApi } from "helpers/fetchApi";
+import { normalizeApiError } from "helpers/normalizeApiError";
 import { AppError } from "types";
 
 type ResetPasswordProps = {
@@ -22,12 +23,18 @@ export const useResetPassword = () => {
         },
         {
           withoutAuth: true,
-          customCallback: (response) => {
+          customCallback: async (response) => {
             if (response.status === 200) {
               return true;
             }
 
-            return response;
+            const responseJson = await response.json();
+
+            if (responseJson?.error) {
+              throw normalizeApiError(responseJson);
+            }
+
+            return responseJson;
           },
         },
       );

diff --git a/src/components/DashboardAnalytics.tsx b/src/components/DashboardAnalytics.tsx
@@ -1,6 +1,7 @@
 import { Card, Notification } from "@stellar/design-system";
 import { InfoTooltip } from "components/InfoTooltip";
 import { AssetAmount } from "components/AssetAmount";
+import { ErrorWithExtras } from "components/ErrorWithExtras";
 
 import { useStatistics } from "apiQueries/useStatistics";
 import { percent } from "helpers/formatIntlNumber";
@@ -28,7 +29,7 @@ export const DashboardAnalytics = () => {
   if (error) {
     return (
       <Notification variant="error" title="Error">
-        {error.message}
+        <ErrorWithExtras appError={error} />
       </Notification>
     );
   }

diff --git a/src/components/DisbursementsTable.tsx b/src/components/DisbursementsTable.tsx
@@ -6,6 +6,7 @@ import { renderNumberOrDash } from "helpers/renderNumberOrDash";
 import { useSort } from "hooks/useSort";
 import { Table } from "components/Table";
 import { AssetAmount } from "components/AssetAmount";
+import { ErrorWithExtras } from "components/ErrorWithExtras";
 import {
   ActionStatus,
   Disbursement,
@@ -17,7 +18,7 @@ import {
 interface DisbursementsTableProps {
   disbursementItems: Disbursement[];
   searchParams: DisbursementsSearchParams | undefined;
-  apiError: string | boolean | undefined;
+  apiError: string | undefined;
   isFiltersSelected: boolean | undefined;
   status: ActionStatus | undefined;
   onSort?: (sort?: SortByDisbursements, direction?: SortDirection) => void;
@@ -52,7 +53,11 @@ export const DisbursementsTable: React.FC<DisbursementsTableProps> = ({
   if (apiError) {
     return (
       <Notification variant="error" title="Error">
-        {apiError}
+        <ErrorWithExtras
+          appError={{
+            message: apiError,
+          }}
+        />
       </Notification>
     );
   }

diff --git a/src/components/ErrorWithExtras.tsx b/src/components/ErrorWithExtras.tsx
@@ -0,0 +1,16 @@
+import { AppError } from "types";
+
+export const ErrorWithExtras = ({ appError }: { appError: AppError }) => {
+  return (
+    <>
+      <div>{appError.message}</div>
+      {appError.extras ? (
+        <ul className="ErrorExtras">
+          {Object.entries(appError.extras).map(([key, value]) => (
+            <li key={key}>{`${key}: ${value}`}</li>
+          ))}
+        </ul>
+      ) : null}
+    </>
+  );
+};
diff --git a/src/components/NewUserModal.tsx b/src/components/NewUserModal.tsx
@@ -8,6 +8,7 @@ import {
   Notification,
 } from "@stellar/design-system";
 import { InfoTooltip } from "components/InfoTooltip";
+import { ErrorWithExtras } from "components/ErrorWithExtras";
 import { USER_ROLES_ARRAY } from "constants/settings";
 import { userRoleText } from "helpers/userRoleText";
 import { usePrevious } from "hooks/usePrevious";
@@ -154,7 +155,11 @@ export const NewUserModal: React.FC<NewUserModalProps> = ({
         <Modal.Body>
           {errorMessage ? (
             <Notification variant="error" title="Error">
-              {errorMessage}
+              <ErrorWithExtras
+                appError={{
+                  message: errorMessage,
+                }}
+              />
             </Notification>
           ) : null}
 

diff --git a/src/components/PaymentsTable.tsx b/src/components/PaymentsTable.tsx
@@ -5,12 +5,13 @@ import { Routes } from "constants/settings";
 import { AssetAmount } from "components/AssetAmount";
 import { PaymentStatus } from "components/PaymentStatus";
 import { Table } from "components/Table";
+import { ErrorWithExtras } from "components/ErrorWithExtras";
 import { formatDateTime } from "helpers/formatIntlDateTime";
 import { ApiPayment } from "types";
 
 interface PaymentsTableProps {
   paymentItems: ApiPayment[];
-  apiError: string | boolean | undefined;
+  apiError: string | undefined;
   isFiltersSelected: boolean | undefined;
   isLoading: boolean;
 }
@@ -42,7 +43,11 @@ export const PaymentsTable = ({
   if (apiError) {
     return (
       <Notification variant="error" title="Error">
-        {apiError}
+        <ErrorWithExtras
+          appError={{
+            message: apiError,
+          }}
+        />
       </Notification>
     );
   }

diff --git a/src/components/QueryStatusHandler.tsx b/src/components/QueryStatusHandler.tsx
@@ -1,4 +1,5 @@
 import { Notification } from "@stellar/design-system";
+import { ErrorWithExtras } from "components/ErrorWithExtras";
 
 interface QueryStatusHandlerProps {
   isLoading?: boolean;
@@ -24,7 +25,11 @@ export const QueryStatusHandler = ({
   if (isError) {
     return (
       <Notification variant="error" title="Error">
-        {errorMessage}
+        <ErrorWithExtras
+          appError={{
+            message: errorMessage,
+          }}
+        />
       </Notification>
     );
   }

diff --git a/src/components/ReceiverInviteMessage/index.tsx b/src/components/ReceiverInviteMessage/index.tsx
@@ -10,6 +10,7 @@ import {
 import { useDispatch } from "react-redux";
 
 import { NotificationWithButtons } from "components/NotificationWithButtons";
+import { ErrorWithExtras } from "components/ErrorWithExtras";
 import { useUpdateSmsTemplate } from "apiQueries/useUpdateOrgSmsTemplate";
 import { useRedux } from "hooks/useRedux";
 import { AppDispatch } from "store";
@@ -181,7 +182,7 @@ export const ReceiverInviteMessage = () => {
     <>
       {isError ? (
         <Notification variant="error" title="Error">
-          {error.message}
+          <ErrorWithExtras appError={error} />
         </Notification>
       ) : null}
 

diff --git a/src/components/ReceiverWalletBalance.tsx b/src/components/ReceiverWalletBalance.tsx
@@ -2,6 +2,7 @@ import { Fragment } from "react";
 import { Loader, Notification } from "@stellar/design-system";
 import { useStellarAccountInfo } from "apiQueries/useStellarAccountInfo";
 import { AssetAmount } from "components/AssetAmount";
+import { ErrorWithExtras } from "components/ErrorWithExtras";
 
 interface ReceiverWalletBalanceProps {
   stellarAddress: string | undefined;
@@ -23,7 +24,7 @@ export const ReceiverWalletBalance = ({
   if (error) {
     return (
       <Notification variant="error" title="Error">
-        {error.message}
+        <ErrorWithExtras appError={error} />
       </Notification>
     );
   }

diff --git a/src/components/ReceiverWalletHistory.tsx b/src/components/ReceiverWalletHistory.tsx
@@ -5,6 +5,7 @@ import { formatDateTime } from "helpers/formatIntlDateTime";
 
 import { Table } from "components/Table";
 import { AssetAmount } from "components/AssetAmount";
+import { ErrorWithExtras } from "components/ErrorWithExtras";
 
 interface ReceiverWalletHistoryProps {
   stellarAddress: string | undefined;
@@ -23,7 +24,7 @@ export const ReceiverWalletHistory = ({
   if (error) {
     return (
       <Notification variant="error" title="Error">
-        {error.message}
+        <ErrorWithExtras appError={error} />
       </Notification>
     );
   }

diff --git a/src/components/ReceiversTable.tsx b/src/components/ReceiversTable.tsx
@@ -3,6 +3,7 @@ import { formatDateTime } from "helpers/formatIntlDateTime";
 import { useSort } from "hooks/useSort";
 import { MultipleAmounts } from "components/MultipleAmounts";
 import { Table } from "components/Table";
+import { ErrorWithExtras } from "components/ErrorWithExtras";
 import { Receiver, SortByReceivers, SortDirection } from "types";
 
 interface ReceiversTableProps {
@@ -12,7 +13,7 @@ interface ReceiversTableProps {
     id: string,
   ) => void;
   searchQuery: string | undefined;
-  apiError: string | boolean | undefined;
+  apiError: string | undefined;
   isFiltersSelected: boolean | undefined;
   isLoading?: boolean;
   onSort?: (sort?: SortByReceivers, direction?: SortDirection) => void;
@@ -32,7 +33,11 @@ export const ReceiversTable: React.FC<ReceiversTableProps> = ({
   if (apiError) {
     return (
       <Notification variant="error" title="Error">
-        {apiError}
+        <ErrorWithExtras
+          appError={{
+            message: apiError,
+          }}
+        />
       </Notification>
     );
   }

diff --git a/src/components/SettingsEnablePaymentCancellation.tsx b/src/components/SettingsEnablePaymentCancellation.tsx
@@ -11,6 +11,7 @@ import { useDispatch } from "react-redux";
 
 import { DropdownMenu } from "components/DropdownMenu";
 import { MoreMenuButton } from "components/MoreMenuButton";
+import { ErrorWithExtras } from "components/ErrorWithExtras";
 
 import { useUpdateOrgPaymentCancellationPeriodDays } from "apiQueries/useUpdateOrgPaymentCancellationPeriodDays";
 import { useRedux } from "hooks/useRedux";
@@ -168,7 +169,7 @@ export const SettingsEnablePaymentCancellation = () => {
     <>
       {error ? (
         <Notification variant="error" title="Error">
-          {error.message}
+          <ErrorWithExtras appError={error} />
         </Notification>
       ) : null}
 

diff --git a/src/components/SettingsEnableSmsRetry.tsx b/src/components/SettingsEnableSmsRetry.tsx
@@ -11,6 +11,7 @@ import { useDispatch } from "react-redux";
 
 import { DropdownMenu } from "components/DropdownMenu";
 import { MoreMenuButton } from "components/MoreMenuButton";
+import { ErrorWithExtras } from "components/ErrorWithExtras";
 
 import { useUpdateOrgSmsRetryInterval } from "apiQueries/useUpdateOrgSmsRetryInterval";
 import { useRedux } from "hooks/useRedux";
@@ -151,7 +152,7 @@ export const SettingsEnableSmsRetry = () => {
     <>
       {error ? (
         <Notification variant="error" title="Error">
-          {error.message}
+          <ErrorWithExtras appError={error} />
         </Notification>
       ) : null}
 

diff --git a/src/components/SettingsTeamMembers.tsx b/src/components/SettingsTeamMembers.tsx
@@ -14,6 +14,7 @@ import { Table } from "components/Table";
 import { NewUserModal } from "components/NewUserModal";
 import { LoadingContent } from "components/LoadingContent";
 import { NotificationWithButtons } from "components/NotificationWithButtons";
+import { ErrorWithExtras } from "components/ErrorWithExtras";
 
 import { USER_ROLES_ARRAY } from "constants/settings";
 import { userRoleText } from "helpers/userRoleText";
@@ -265,9 +266,9 @@ export const SettingsTeamMembers = () => {
 
           {usersError || roleError || statusError ? (
             <Notification variant="error" title="Error">
-              {usersError?.message ||
-                roleError?.message ||
-                statusError?.message}
+              <ErrorWithExtras
+                appError={usersError || roleError || statusError}
+              />
             </Notification>
           ) : null}
 

diff --git a/src/components/SettingsTimezone.tsx b/src/components/SettingsTimezone.tsx
@@ -5,6 +5,7 @@ import { InfoTooltip } from "components/InfoTooltip";
 import { DropdownMenu } from "components/DropdownMenu";
 import { MoreMenuButton } from "components/MoreMenuButton";
 import { NotificationWithButtons } from "components/NotificationWithButtons";
+import { ErrorWithExtras } from "components/ErrorWithExtras";
 import { TIME_ZONES } from "constants/settings";
 import { useRedux } from "hooks/useRedux";
 import { AppDispatch } from "store";
@@ -73,7 +74,12 @@ export const SettingsTimezone = () => {
 
       {organization.errorString ? (
         <Notification variant="error" title="Error">
-          {organization.errorString}
+          <ErrorWithExtras
+            appError={{
+              message: organization.errorString,
+              extras: organization.errorExtras,
+            }}
+          />
         </Notification>
       ) : null}
 

diff --git a/src/components/WalletTrustlines/index.tsx b/src/components/WalletTrustlines/index.tsx
@@ -11,6 +11,7 @@ import { InfoTooltip } from "components/InfoTooltip";
 import { DropdownMenu } from "components/DropdownMenu";
 import { MoreMenuButton } from "components/MoreMenuButton";
 import { NotificationWithButtons } from "components/NotificationWithButtons";
+import { ErrorWithExtras } from "components/ErrorWithExtras";
 
 import { useBalanceTrustline } from "apiQueries/useBalanceTrustline";
 import { useAssetsAdd } from "apiQueries/useAssetsAdd";
@@ -242,7 +243,7 @@ export const WalletTrustlines = ({
     <>
       {trustlinesError ? (
         <Notification variant="error" title="Error">
-          {trustlinesError.message}
+          <ErrorWithExtras appError={trustlinesError} />
         </Notification>
       ) : null}
 

diff --git a/src/helpers/fetchApi.ts b/src/helpers/fetchApi.ts
@@ -66,7 +66,7 @@ export const fetchApi = async (
   const response = await request.json();
 
   if (response?.error) {
-    throw normalizeApiError(response.error);
+    throw normalizeApiError(response);
   }
 
   return response;

diff --git a/src/helpers/normalizeApiError.ts b/src/helpers/normalizeApiError.ts
@@ -6,6 +6,7 @@ export const normalizeApiError = (
   defaultMessage = GENERIC_ERROR_MESSAGE,
 ): AppError => {
   let message = "";
+  const extras = error?.extras;
 
   // Make sure error is not an empty object
   if (JSON.stringify(error) === "{}") {
@@ -18,8 +19,17 @@ export const normalizeApiError = (
       defaultMessage) as string;
   }
 
+  // Remove details and message from extras to avoid duplicate messages
+  if (extras?.details) {
+    delete extras.details;
+  }
+
+  if (extras?.message) {
+    delete extras.message;
+  }
+
   return {
-    message: message,
-    extras: error?.extras,
+    message,
+    extras,
   };
 };