Introduce a standard way to create handle errors (#918)

2021-07-28 14:01:42 +02:00 · 2021-07-28 14:01:42 +02:00 · bc1e83e63a
commit bc1e83e63a
parent de422a1f31
66 changed files with 190 additions and 343 deletions
--- a/cypress/integration/client_scopes_test.spec.ts
+++ b/cypress/integration/client_scopes_test.spec.ts
@ -35,7 +35,7 @@ describe("Client Scopes test", function () {

      // The error should inform about duplicated name/id
      masthead.checkNotificationMessage(
-        "Could not create client scope: 'Error: Request failed with status code 409'"
+        "Could not create client scope: 'Client Scope address already exists'"
      );
    });

--- a/cypress/integration/clients_test.spec.ts
+++ b/cypress/integration/clients_test.spec.ts
@ -42,7 +42,7 @@ describe("Clients test", function () {

      // The error should inform about duplicated name/id
      masthead.checkNotificationMessage(
-        "Could not create client: 'Error: Request failed with status code 409'"
+        "Could not create client: 'Client account already exists'"
      );
    });

--- a/src/authentication/AuthenticationSection.tsx
+++ b/src/authentication/AuthenticationSection.tsx
@ -48,7 +48,7 @@ export const AuthenticationSection = () => {
  const { realm } = useRealm();
  const [key, setKey] = useState(0);
  const refresh = () => setKey(new Date().getTime());
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
  const { url } = useRouteMatch();

  const [selectedFlow, setSelectedFlow] = useState<AuthenticationType>();
@ -114,7 +114,7 @@ export const AuthenticationSection = () => {
        refresh();
        addAlert(t("deleteFlowSuccess"), AlertVariant.success);
      } catch (error) {
-        addAlert(t("deleteFlowError", { error }), AlertVariant.danger);
+        addError("authentication:deleteFlowError", error);
      }
    },
  });
--- a/src/authentication/DuplicateFlowModal.tsx
+++ b/src/authentication/DuplicateFlowModal.tsx
@ -34,7 +34,7 @@ export const DuplicateFlowModal = ({
    shouldUnregister: false,
  });
  const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();

  useEffect(() => {
    setValue("description", description);
@ -62,7 +62,7 @@ export const DuplicateFlowModal = ({
      }
      addAlert(t("copyFlowSuccess"), AlertVariant.success);
    } catch (error) {
-      addAlert(t("copyFlowError", { error }), AlertVariant.danger);
+      addError("authentication:copyFlowError", error);
    }
    onComplete();
  };
--- a/src/client-scopes/ClientScopesSection.tsx
+++ b/src/client-scopes/ClientScopesSection.tsx
@ -39,7 +39,7 @@ export const ClientScopesSection = () => {
  const { url } = useRouteMatch();

  const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();

  const [key, setKey] = useState(0);
  const refresh = () => setKey(new Date().getTime());
@ -100,12 +100,7 @@ export const ClientScopesSection = () => {
        addAlert(t("deletedSuccess"), AlertVariant.success);
        refresh();
      } catch (error) {
-        addAlert(
-          t("deleteError", {
-            error: error.response?.data?.errorMessage || error,
-          }),
-          AlertVariant.danger
-        );
+        addError("client-scopes:deleteError", error);
      }
    },
  });
@ -122,7 +117,7 @@ export const ClientScopesSection = () => {
            addAlert(t("clientScopeSuccess"), AlertVariant.success);
            refresh();
          } catch (error) {
-            addAlert(t("clientScopeError", { error }), AlertVariant.danger);
+            addError("client-scopes:clientScopeError", error);
          }
        }}
      />
@ -154,7 +149,7 @@ export const ClientScopesSection = () => {
                addAlert(t("clientScopeSuccess"), AlertVariant.success);
                refresh();
              } catch (error) {
-                addAlert(t("clientScopeError", { error }), AlertVariant.danger);
+                addError("client-scopes:clientScopeError", error);
              }
            });
            setChangeTypeOpen(false);
--- a/src/client-scopes/details/MapperList.tsx
+++ b/src/client-scopes/details/MapperList.tsx
@ -35,7 +35,7 @@ type Row = ProtocolMapperRepresentation & {
 export const MapperList = ({ clientScope, refresh }: MapperListProps) => {
  const { t } = useTranslation("client-scopes");
  const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();

  const history = useHistory();
  const { realm } = useRealm();
@ -75,10 +75,7 @@ export const MapperList = ({ clientScope, refresh }: MapperListProps) => {
        refresh();
        addAlert(t("common:mappingCreatedSuccess"), AlertVariant.success);
      } catch (error) {
-        addAlert(
-          t("common:mappingCreatedError", { error }),
-          AlertVariant.danger
-        );
+        addError("common:mappingCreatedError", error);
      }
    }
  };
@ -166,10 +163,7 @@ export const MapperList = ({ clientScope, refresh }: MapperListProps) => {
                );
                refresh();
              } catch (error) {
-                addAlert(
-                  t("common:mappingDeletedError", { error }),
-                  AlertVariant.danger
-                );
+                addError("common:mappingDeletedError", error);
              }
              return true;
            },
--- a/src/client-scopes/details/MappingDetails.tsx
+++ b/src/client-scopes/details/MappingDetails.tsx
@ -41,7 +41,7 @@ type Params = {
 export const MappingDetails = () => {
  const { t } = useTranslation("client-scopes");
  const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();

  const { id, mapperId } = useParams<Params>();
  const { register, errors, setValue, control, handleSubmit } = useForm();
@ -113,10 +113,7 @@ export const MappingDetails = () => {
        addAlert(t("common:mappingDeletedSuccess"), AlertVariant.success);
        history.push(`/${realm}/client-scopes/${id}/mappers`);
      } catch (error) {
-        addAlert(
-          t("common:mappingDeletedError", { error }),
-          AlertVariant.danger
-        );
+        addError("common:mappingDeletedError", error);
      }
    },
  });
@ -136,7 +133,7 @@ export const MappingDetails = () => {
      }
      addAlert(t(`common:mapping${key}Success`), AlertVariant.success);
    } catch (error) {
-      addAlert(t(`common:mapping${key}Error`, { error }), AlertVariant.danger);
+      addError(`common:mapping${key}Error`, error);
    }
  };

--- a/src/client-scopes/form/ClientScopeForm.tsx
+++ b/src/client-scopes/form/ClientScopeForm.tsx
@ -43,7 +43,7 @@ export const ClientScopeForm = () => {
  const adminClient = useAdminClient();
  const { id, type } = useParams<{ id: string; type: AllClientScopes }>();

-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();

  const [key, setKey] = useState(0);
  const refresh = () => setKey(new Date().getTime());
@ -126,10 +126,7 @@ export const ClientScopeForm = () => {
      }
      addAlert(t((id ? "update" : "create") + "Success"), AlertVariant.success);
    } catch (error) {
-      addAlert(
-        t((id ? "update" : "create") + "Error", { error }),
-        AlertVariant.danger
-      );
+      addError(`client-scopes:${id ? "update" : "create"}Error`, error);
    }
  };

@ -146,7 +143,7 @@ export const ClientScopeForm = () => {
        await adminClient.clientScopes.del({ id });
        addAlert(t("deletedSuccess"), AlertVariant.success);
      } catch (error) {
-        addAlert(t("deleteError", { error }), AlertVariant.danger);
+        addError("client-scopes:deleteError", error);
      }
    },
  });
@ -178,12 +175,7 @@ export const ClientScopeForm = () => {
      );
      addAlert(t("roleMappingUpdatedSuccess"), AlertVariant.success);
    } catch (error) {
-      addAlert(
-        t("roleMappingUpdatedError", {
-          error: error.response?.data?.errorMessage || error,
-        }),
-        AlertVariant.danger
-      );
+      addError("client-scopes:roleMappingUpdatedError", error);
    }
  };

--- a/src/clients/AdvancedTab.tsx
+++ b/src/clients/AdvancedTab.tsx
@ -57,7 +57,7 @@ export const AdvancedTab = ({
  const { t } = useTranslation("clients");
  const adminClient = useAdminClient();
  const { realm } = useRealm();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
  const revocationFieldName = "notBefore";
  const openIdConnect = "openid-connect";

@ -143,10 +143,7 @@ export const AdvancedTab = ({
        refresh();
        addAlert(t("deleteNodeSuccess"), AlertVariant.success);
      } catch (error) {
-        addAlert(
-          t("deleteNodeFail", { error: error.response?.data?.error || error }),
-          AlertVariant.danger
-        );
+        addError("clients:deleteNodeFail", error);
      }
    },
  });
--- a/src/clients/ClientDetails.tsx
+++ b/src/clients/ClientDetails.tsx
@ -125,7 +125,7 @@ export type SaveOptions = {
 export const ClientDetails = () => {
  const { t } = useTranslation("clients");
  const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
  const { realm } = useRealm();

  const history = useHistory();
@ -164,7 +164,7 @@ export const ClientDetails = () => {
        addAlert(t("clientDeletedSuccess"), AlertVariant.success);
        history.push(toClients({ realm }));
      } catch (error) {
-        addAlert(`${t("clientDeleteError")} ${error}`, AlertVariant.danger);
+        addError("clients:clientDeleteError", error);
      }
    },
  });
@ -227,7 +227,7 @@ export const ClientDetails = () => {
        setClient(newClient);
        addAlert(t(messageKey), AlertVariant.success);
      } catch (error) {
-        addAlert(`${t("clientSaveError")} '${error}'`, AlertVariant.danger);
+        addError("client:clientSaveError", error);
      }
    }
  };
--- a/src/clients/ClientsSection.tsx
+++ b/src/clients/ClientsSection.tsx
@ -29,7 +29,7 @@ import { toImportClient } from "./routes/ImportClient";

 export const ClientsSection = () => {
  const { t } = useTranslation("clients");
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();

  const adminClient = useAdminClient();
  const { realm } = useRealm();
@ -64,7 +64,7 @@ export const ClientsSection = () => {
        addAlert(t("clientDeletedSuccess"), AlertVariant.success);
        refresh();
      } catch (error) {
-        addAlert(t("clientDeleteError", { error }), AlertVariant.danger);
+        addError("client:clientDeleteError", error);
      }
    },
  });
--- a/src/clients/add/NewClientForm.tsx
+++ b/src/clients/add/NewClientForm.tsx
@ -39,7 +39,7 @@ export const NewClientForm = () => {
    directAccessGrantsEnabled: true,
    standardFlowEnabled: true,
  });
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
  const methods = useForm<ClientRepresentation>({ defaultValues: client });

  const save = async () => {
@ -50,7 +50,7 @@ export const NewClientForm = () => {
        toClient({ realm, clientId: newClient.id, tab: "settings" })
      );
    } catch (error) {
-      addAlert(t("createError", { error }), AlertVariant.danger);
+      addError("clients:createError", error);
    }
  };

--- a/src/clients/advanced/AddHostDialog.tsx
+++ b/src/clients/advanced/AddHostDialog.tsx
@ -33,7 +33,7 @@ export const AddHostDialog = ({
  const { t } = useTranslation("clients");
  const { register, getValues } = useForm<Host>();
  const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();

  return (
    <Modal
@ -55,12 +55,7 @@ export const AddHostDialog = ({
              onAdded(node);
              addAlert(t("addedNodeSuccess"), AlertVariant.success);
            } catch (error) {
-              addAlert(
-                t("addedNodeFail", {
-                  error: error.response?.data?.error || error,
-                }),
-                AlertVariant.danger
-              );
+              addError("clients:addedNodeFail", error);
            }

            onClose();
--- a/src/clients/credentials/Credentials.tsx
+++ b/src/clients/credentials/Credentials.tsx
@ -46,7 +46,7 @@ export type CredentialsProps = {
 export const Credentials = ({ clientId, save }: CredentialsProps) => {
  const { t } = useTranslation("clients");
  const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();

  const [providers, setProviders] = useState<ClientAuthenticatorProviders[]>(
    []
@ -97,7 +97,7 @@ export const Credentials = ({ clientId, save }: CredentialsProps) => {
      addAlert(t(`${message}Success`), AlertVariant.success);
      return data;
    } catch (error) {
-      addAlert(t(`${message}Error`, { error }), AlertVariant.danger);
+      addError(`clients:${message}Error`, error);
    }
  }

--- a/src/clients/import/ImportForm.tsx
+++ b/src/clients/import/ImportForm.tsx
@ -31,7 +31,7 @@ export const ImportForm = () => {
  const form = useForm<ClientRepresentation>();
  const { register, handleSubmit, setValue } = form;

-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();

  const handleFileChange = (obj: object) => {
    const defaultClient = {
@ -61,7 +61,7 @@ export const ImportForm = () => {
        toClient({ realm, clientId: newClient.id, tab: "settings" })
      );
    } catch (error) {
-      addAlert(t("clientImportError", { error }), AlertVariant.danger);
+      addError("clients:clientImportError", error);
    }
  };

--- a/src/clients/initial-access/CreateInitialAccessToken.tsx
+++ b/src/clients/initial-access/CreateInitialAccessToken.tsx
@ -28,7 +28,7 @@ export const CreateInitialAccessToken = () => {

  const adminClient = useAdminClient();
  const { realm } = useRealm();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();

  const history = useHistory();
  const [token, setToken] = useState("");
@ -41,7 +41,7 @@ export const CreateInitialAccessToken = () => {
      );
      setToken(access.token!);
    } catch (error) {
-      addAlert(t("tokenSaveError", { error }), AlertVariant.danger);
+      addError("clients:tokenSaveError", error);
    }
  };

--- a/src/clients/initial-access/InitialAccessTokenList.tsx
+++ b/src/clients/initial-access/InitialAccessTokenList.tsx
@ -17,7 +17,7 @@ export const InitialAccessTokenList = () => {
  const { t } = useTranslation("clients");

  const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
  const { realm } = useRealm();

  const history = useHistory();
@ -41,7 +41,7 @@ export const InitialAccessTokenList = () => {
        addAlert(t("tokenDeleteSuccess"), AlertVariant.success);
        setToken(undefined);
      } catch (error) {
-        addAlert(t("tokenDeleteError", { error }), AlertVariant.danger);
+        addError("tokenDeleteError", error);
      }
    },
  });
--- a/src/clients/keys/Keys.tsx
+++ b/src/clients/keys/Keys.tsx
@ -44,7 +44,7 @@ export const Keys = ({ clientId, save }: KeysProps) => {
    formState: { isDirty },
  } = useFormContext<ClientForm>();
  const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();

  const [keyInfo, setKeyInfo] = useState<CertificateRepresentation>();
  const [openGenerateKeys, setOpenGenerateKeys] = useState(false);
@ -77,12 +77,7 @@ export const Keys = ({ clientId, save }: KeysProps) => {
      );
      addAlert(t("generateSuccess"), AlertVariant.success);
    } catch (error) {
-      addAlert(
-        t("generateError", {
-          error: error.response?.data?.errorMessage || error,
-        }),
-        AlertVariant.danger
-      );
+      addError("clients:generateError", error);
    }
  };

@ -101,12 +96,7 @@ export const Keys = ({ clientId, save }: KeysProps) => {
      );
      addAlert(t("importSuccess"), AlertVariant.success);
    } catch (error) {
-      addAlert(
-        t("importError", {
-          error: error.response?.data?.errorMessage || error,
-        }),
-        AlertVariant.danger
-      );
+      addError("clients:importError", error);
    }
  };

--- a/src/clients/scopes/ClientScopes.tsx
+++ b/src/clients/scopes/ClientScopes.tsx
@ -86,7 +86,7 @@ type SearchType = "client" | "assigned";
 export const ClientScopes = ({ clientId, protocol }: ClientScopesProps) => {
  const { t } = useTranslation("clients");
  const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();

  const [searchToggle, setSearchToggle] = useState(false);
  const [searchType, setSearchType] = useState<SearchType>("client");
@ -156,7 +156,7 @@ export const ClientScopes = ({ clientId, protocol }: ClientScopesProps) => {
            addAlert(t("clientScopeSuccess"), AlertVariant.success);
            refresh();
          } catch (error) {
-            addAlert(t("clientScopeError", { error }), AlertVariant.danger);
+            addError("clients:clientScopeError", error);
          }
        }}
      />
@ -186,7 +186,7 @@ export const ClientScopes = ({ clientId, protocol }: ClientScopesProps) => {
              addAlert(t("clientScopeSuccess"), AlertVariant.success);
              refresh();
            } catch (error) {
-              addAlert(t("clientScopeError", { error }), AlertVariant.danger);
+              addError("clients:clientScopeError", error);
            }
          }}
        />
@ -267,10 +267,7 @@ export const ClientScopes = ({ clientId, protocol }: ClientScopesProps) => {
                    refresh();
                    addAlert(t("clientScopeSuccess"), AlertVariant.success);
                  } catch (error) {
-                    addAlert(
-                      t("clientScopeError", { error }),
-                      AlertVariant.danger
-                    );
+                    addError("clients:clientScopeError", error);
                  }
                }}
              >
@ -308,10 +305,7 @@ export const ClientScopes = ({ clientId, protocol }: ClientScopesProps) => {
                        );
                        refresh();
                      } catch (error) {
-                        addAlert(
-                          t("clientScopeRemoveError", { error }),
-                          AlertVariant.danger
-                        );
+                        addError("clients:clientScopeRemoveError", error);
                      }
                    }}
                  >
@ -343,10 +337,7 @@ export const ClientScopes = ({ clientId, protocol }: ClientScopesProps) => {
                addAlert(t("clientScopeRemoveSuccess"), AlertVariant.success);
                refresh();
              } catch (error) {
-                addAlert(
-                  t("clientScopeRemoveError", { error }),
-                  AlertVariant.danger
-                );
+                addError("clients:clientScopeRemoveError", error);
              }
              return true;
            },
--- a/src/clients/service-account/ServiceAccount.tsx
+++ b/src/clients/service-account/ServiceAccount.tsx
@ -20,7 +20,7 @@ type ServiceAccountProps = {
 export const ServiceAccount = ({ client }: ServiceAccountProps) => {
  const { t } = useTranslation("clients");
  const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();

  const [hide, setHide] = useState(false);
  const [serviceAccount, setServiceAccount] = useState<UserRepresentation>();
@ -94,12 +94,7 @@ export const ServiceAccount = ({ client }: ServiceAccountProps) => {
      );
      addAlert(t("roleMappingUpdatedSuccess"), AlertVariant.success);
    } catch (error) {
-      addAlert(
-        t("roleMappingUpdatedError", {
-          error: error.response?.data?.errorMessage || error,
-        }),
-        AlertVariant.danger
-      );
+      addError("clients:roleMappingUpdatedError", error);
    }
  };
  return (
--- a/src/components/alert/Alerts.tsx
+++ b/src/components/alert/Alerts.tsx
@ -1,5 +1,8 @@
-import { AlertVariant } from "@patternfly/react-core";
 import React, { createContext, ReactNode, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { AlertVariant } from "@patternfly/react-core";
+import type { AxiosError } from "axios";
+
 import useRequiredContext from "../../utils/useRequiredContext";
 import { AlertPanel, AlertType } from "./AlertPanel";

@ -9,6 +12,8 @@ type AlertProps = {
    variant?: AlertVariant,
    description?: string
  ) => void;
+
+  addError: (message: string, error: any) => void;
 };

 export const AlertContext = createContext<AlertProps | undefined>(undefined);
@ -16,6 +21,7 @@ export const AlertContext = createContext<AlertProps | undefined>(undefined);
 export const useAlerts = () => useRequiredContext(AlertContext);

 export const AlertProvider = ({ children }: { children: ReactNode }) => {
+  const { t } = useTranslation();
  const [alerts, setAlerts] = useState<AlertType[]>([]);

  const createId = () => new Date().getTime();
@ -34,8 +40,20 @@ export const AlertProvider = ({ children }: { children: ReactNode }) => {
    setAlerts([{ key, message, variant, description }, ...alerts]);
  };

+  const addError = (message: string, error: Error | AxiosError) => {
+    addAlert(
+      t(message, {
+        error:
+          "response" in error
+            ? error.response?.data?.errorMessage || error.response?.data?.error
+            : error,
+      }),
+      AlertVariant.danger
+    );
+  };
+
  return (
-    <AlertContext.Provider value={{ addAlert }}>
+    <AlertContext.Provider value={{ addAlert, addError }}>
      <AlertPanel alerts={alerts} onCloseAlert={hideAlert} />
      {children}
    </AlertContext.Provider>
--- a/src/components/role-mapping/RoleMapping.tsx
+++ b/src/components/role-mapping/RoleMapping.tsx
@ -91,7 +91,7 @@ export const RoleMapping = ({
 }: RoleMappingProps) => {
  const { t } = useTranslation("clients");
  const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();

  const [key, setKey] = useState(0);
  const refresh = () => setKey(new Date().getTime());
@ -159,7 +159,7 @@ export const RoleMapping = ({
        addAlert(t("clientScopeRemoveSuccess"), AlertVariant.success);
        refresh();
      } catch (error) {
-        addAlert(t("clientScopeRemoveError", { error }), AlertVariant.danger);
+        addError("clients:clientScopeRemoveError", error);
      }
    },
  });
--- a/src/groups/GroupAttributes.tsx
+++ b/src/groups/GroupAttributes.tsx
@ -23,7 +23,7 @@ import { useLocation } from "react-router-dom";
 export const GroupAttributes = () => {
  const { t } = useTranslation("groups");
  const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
  const form = useForm<AttributeForm>({ mode: "onChange" });
  const { fields, append, remove } = useFieldArray({
    control: form.control,
@ -57,7 +57,7 @@ export const GroupAttributes = () => {
      form.setValue("attributes", convertAttributes(attributes));
      addAlert(t("groupUpdated"), AlertVariant.success);
    } catch (error) {
-      addAlert(t("groupUpdateError", { error }), AlertVariant.danger);
+      addError("groups:groupUpdateError", error);
    }
  };

--- a/src/groups/GroupTable.tsx
+++ b/src/groups/GroupTable.tsx
@ -28,7 +28,7 @@ export const GroupTable = () => {
  const { t } = useTranslation("groups");

  const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
  const { realm } = useRealm();
  const [isKebabOpen, setIsKebabOpen] = useState(false);
  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
@ -69,7 +69,7 @@ export const GroupTable = () => {
      );
      setSelectedRows([]);
    } catch (error) {
-      addAlert(t("groupDeleteError", { error }), AlertVariant.danger);
+      addError("groups:groupDeleteError", error);
    }
    refresh();
  };
@ -220,12 +220,7 @@ export const GroupTable = () => {
              refresh();
              addAlert(t("moveGroupSuccess"), AlertVariant.success);
            } catch (error) {
-              addAlert(
-                t("moveGroupError", {
-                  error: error.response?.data?.errorMessage || error,
-                }),
-                AlertVariant.danger
-              );
+              addError("groups:moveGroupError", error);
            }
          }}
        />
--- a/src/groups/GroupsModal.tsx
+++ b/src/groups/GroupsModal.tsx
@ -32,7 +32,7 @@ export const GroupsModal = ({
 }: GroupsModalProps) => {
  const { t } = useTranslation("groups");
  const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
  const { register, errors, handleSubmit } = useForm({
    defaultValues: { name: rename },
  });
@ -54,7 +54,7 @@ export const GroupsModal = ({
        AlertVariant.success
      );
    } catch (error) {
-      addAlert(t("couldNotCreateGroup", { error }), AlertVariant.danger);
+      addError("groups:couldNotCreateGroup", error);
    }
  };

--- a/src/groups/GroupsSection.tsx
+++ b/src/groups/GroupsSection.tsx
@ -32,7 +32,7 @@ export const GroupsSection = () => {

  const adminClient = useAdminClient();
  const { subGroups, setSubGroups, currentGroup } = useSubGroups();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
  const { realm } = useRealm();

  const [rename, setRename] = useState<string>();
@ -48,7 +48,7 @@ export const GroupsSection = () => {
      });
      addAlert(t("groupDelete"), AlertVariant.success);
    } catch (error) {
-      addAlert(t("groupDeleteError", { error }), AlertVariant.danger);
+      addError("groups:groupDeleteError", error);
    }
    return true;
  };
--- a/src/groups/Members.tsx
+++ b/src/groups/Members.tsx
@ -34,7 +34,7 @@ export const Members = () => {
  const { t } = useTranslation("groups");
  const adminClient = useAdminClient();
  const { realm } = useRealm();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
  const location = useLocation();
  const id = getLastId(location.pathname);
  const [includeSubGroup, setIncludeSubGroup] = useState(false);
@ -172,7 +172,7 @@ export const Members = () => {
                          AlertVariant.success
                        );
                      } catch (error) {
-                        addAlert(t("usersLeftError"), AlertVariant.danger);
+                        addError("groups:usersLeftError", error);
                      }

                      refresh();
@ -196,7 +196,7 @@ export const Members = () => {
                });
                addAlert(t("usersLeft", { count: 1 }), AlertVariant.success);
              } catch (error) {
-                addAlert(t("usersLeftError"), AlertVariant.danger);
+                addError("groups:usersLeftError", error);
              }

              return true;
--- a/src/groups/MembersModal.tsx
+++ b/src/groups/MembersModal.tsx
@ -25,7 +25,7 @@ type MemberModalProps = {
 export const MemberModal = ({ groupId, onClose }: MemberModalProps) => {
  const { t } = useTranslation("groups");
  const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
  const [selectedRows, setSelectedRows] = useState<UserRepresentation[]>([]);

  const history = useHistory();
@ -44,7 +44,7 @@ export const MemberModal = ({ groupId, onClose }: MemberModalProps) => {
      const users = await adminClient.users.find({ ...params });
      return _.differenceBy(users, members, "id").slice(0, max);
    } catch (error) {
-      addAlert(t("noUsersFoundError", { error }), AlertVariant.danger);
+      addError("groups:noUsersFoundError", error);
      return [];
    }
  };
@ -73,7 +73,7 @@ export const MemberModal = ({ groupId, onClose }: MemberModalProps) => {
                AlertVariant.success
              );
            } catch (error) {
-              addAlert(t("usersAddedError"), AlertVariant.danger);
+              addError("groups:usersAddedError", error);
            }
          }}
        >
--- a/src/groups/messages.ts
+++ b/src/groups/messages.ts
@ -13,10 +13,10 @@ export default {
    leave: "Leave group",
    usersLeft: "{{count}} user left the group",
    usersLeft_plural: "{{count}} users left the group",
-    usersLeftError: "Could not remove users from the group",
+    usersLeftError: "Could not remove users from the group: {{error}}",
    usersAdded: "{{count}} user added to the group",
    usersAdded_plural: "{{count}} users added to the group",
-    usersAddedError: "Could not add users to the group",
+    usersAddedError: "Could not add users to the group: {{error}}",
    search: "Search",
    members: "Members",
    searchMembers: "Search members",
--- a/src/identity-providers/IdentityProvidersSection.tsx
+++ b/src/identity-providers/IdentityProvidersSection.tsx
@ -56,7 +56,7 @@ export const IdentityProvidersSection = () => {
    useState<IdentityProviderRepresentation>();

  const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();

  useFetch(
    async () =>
@ -124,7 +124,7 @@ export const IdentityProvidersSection = () => {
        refresh();
        addAlert(t("deletedSuccess"), AlertVariant.success);
      } catch (error) {
-        addAlert(t("deleteError", { error }), AlertVariant.danger);
+        addError("identity-providers:deleteError", error);
      }
    },
  });
--- a/src/identity-providers/ManageOrderDialog.tsx
+++ b/src/identity-providers/ManageOrderDialog.tsx
@ -32,7 +32,7 @@ export const ManageOderDialog = ({
 }: ManageOderDialogProps) => {
  const { t } = useTranslation("identity-providers");
  const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();

  const [alias, setAlias] = useState("");
  const [liveText, setLiveText] = useState("");
@ -76,7 +76,7 @@ export const ManageOderDialog = ({
                await adminClient.identityProviders.update({ alias }, provider);
                addAlert(t("orderChangeSuccess"), AlertVariant.success);
              } catch (error) {
-                addAlert(t("orderChangeError", { error }), AlertVariant.danger);
+                addError("identity-providers:orderChangeError", error);
              }
            });

--- a/src/identity-providers/add/AddIdentityProvider.tsx
+++ b/src/identity-providers/add/AddIdentityProvider.tsx
@ -52,7 +52,7 @@ export const AddIdentityProvider = () => {
  } = form;

  const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
  const history = useHistory();
  const { realm } = useRealm();

@ -66,12 +66,7 @@ export const AddIdentityProvider = () => {
      addAlert(t("createSuccess"), AlertVariant.success);
      history.push(`/${realm}/identity-providers/${id}/settings`);
    } catch (error) {
-      addAlert(
-        t("createError", {
-          error: error.response?.data?.errorMessage || error,
-        }),
-        AlertVariant.danger
-      );
+      addError("identity-providers:createError", error);
    }
  };

--- a/src/identity-providers/add/AddOpenIdConnect.tsx
+++ b/src/identity-providers/add/AddOpenIdConnect.tsx
@ -39,7 +39,7 @@ export const AddOpenIdConnect = () => {
  } = form;

  const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
  const { realm } = useRealm();

  const save = async (provider: DiscoveryIdentity) => {
@ -52,12 +52,7 @@ export const AddOpenIdConnect = () => {
      addAlert(t("createSuccess"), AlertVariant.success);
      history.push(`/${realm}/identity-providers/${id}/settings`);
    } catch (error) {
-      addAlert(
-        t("createError", {
-          error: error.response?.data?.errorMessage || error,
-        }),
-        AlertVariant.danger
-      );
+      addError("identity-providers:createError", error);
    }
  };

--- a/src/identity-providers/add/DetailSettings.tsx
+++ b/src/identity-providers/add/DetailSettings.tsx
@ -87,7 +87,7 @@ export const DetailSettings = () => {
  const { handleSubmit, setValue, getValues, reset } = form;

  const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
  const history = useHistory();
  const { realm } = useRealm();

@ -112,12 +112,7 @@ export const DetailSettings = () => {
      setProvider(p);
      addAlert(t("updateSuccess"), AlertVariant.success);
    } catch (error) {
-      addAlert(
-        t("updateError", {
-          error: error.response?.data?.errorMessage || error,
-        }),
-        AlertVariant.danger
-      );
+      addError("identity-providers:updateError", error);
    }
  };

@ -132,7 +127,7 @@ export const DetailSettings = () => {
        addAlert(t("deletedSuccess"), AlertVariant.success);
        history.push(`/${realm}/identity-providers`);
      } catch (error) {
-        addAlert(t("deleteErrorError", { error }), AlertVariant.danger);
+        addError("identity-providers:deleteErrorError", error);
      }
    },
  });
--- a/src/realm-roles/AssociatedRolesTab.tsx
+++ b/src/realm-roles/AssociatedRolesTab.tsx
@ -42,7 +42,7 @@ export const AssociatedRolesTab = ({
 }: AssociatedRolesTabProps) => {
  const { t } = useTranslation("roles");
  const history = useHistory();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
  const { url } = useRouteMatch();
  const [key, setKey] = useState(0);
  const refresh = () => setKey(new Date().getTime());
@ -169,7 +169,7 @@ export const AssociatedRolesTab = ({

        addAlert(t("associatedRolesRemoved"), AlertVariant.success);
      } catch (error) {
-        addAlert(t("roleDeleteError", { error }), AlertVariant.danger);
+        addError("roles:roleDeleteError", error);
      }
    },
  });
@ -194,7 +194,7 @@ export const AssociatedRolesTab = ({
          addAlert(t("associatedRolesRemoved"), AlertVariant.success);
          refresh();
        } catch (error) {
-          addAlert(`${t("roleDeleteError")} ${error}`, AlertVariant.danger);
+          addError("roles:roleDeleteError", error);
        }
      },
    });
--- a/src/realm-roles/RealmRoleTabs.tsx
+++ b/src/realm-roles/RealmRoleTabs.tsx
@ -66,7 +66,7 @@ export const RealmRoleTabs = () => {
    []
  );

-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();

  const [open, setOpen] = useState(false);
  const convert = (role: RoleRepresentation) => {
@ -179,12 +179,7 @@ export const RealmRoleTabs = () => {
      }
      addAlert(t(id ? "roleSaveSuccess" : "roleCreated"), AlertVariant.success);
    } catch (error) {
-      addAlert(
-        t((id ? "roleSave" : "roleCreate") + "Error", {
-          error: error.response?.data?.errorMessage || error,
-        }),
-        AlertVariant.danger
-      );
+      addError(`roles:${id ? "roleSave" : "roleCreate"}Error`, error);
    }
  };

@ -201,7 +196,7 @@ export const RealmRoleTabs = () => {
      refresh();
      addAlert(t("addAssociatedRolesSuccess"), AlertVariant.success);
    } catch (error) {
-      addAlert(t("addAssociatedRolesError", { error }), AlertVariant.danger);
+      addError("roles:addAssociatedRolesError", error);
    }
  };

@ -225,7 +220,7 @@ export const RealmRoleTabs = () => {
        addAlert(t("roleDeletedSuccess"), AlertVariant.success);
        history.push(url.substr(0, url.indexOf("/roles") + "/roles".length));
      } catch (error) {
-        addAlert(`${t("roleDeleteError")} ${error}`, AlertVariant.danger);
+        addError("roles:roleDeleteError", error);
      }
    },
  });
@ -300,7 +295,7 @@ export const RealmRoleTabs = () => {
        history.push(loc);
        refresh();
      } catch (error) {
-        addAlert(`${t("roleDeleteError")} ${error}`, AlertVariant.danger);
+        addError("roles:roleDeleteError", error);
      }
    },
  });
--- a/src/realm-roles/RolesList.tsx
+++ b/src/realm-roles/RolesList.tsx
@ -52,7 +52,7 @@ export const RolesList = ({
  const { t } = useTranslation(messageBundle);
  const history = useHistory();
  const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
  const { url } = useRouteMatch();
  const { realm: realmName } = useRealm();
  const [realm, setRealm] = useState<myRealmRepresentation>();
@ -104,7 +104,7 @@ export const RolesList = ({
        setSelectedRole(undefined);
        addAlert(t("roleDeletedSuccess"), AlertVariant.success);
      } catch (error) {
-        addAlert(`${t("roleDeleteError")} ${error}`, AlertVariant.danger);
+        addError("roles:roleDeleteError", error);
      }
    },
  });
@ -133,7 +133,7 @@ export const RolesList = ({
              if (
                (role as RoleRepresentation).name === realm!.defaultRole!.name
              ) {
-                addAlert(`${t("defaultRoleDeleteError")}`, AlertVariant.danger);
+                addAlert(t("defaultRoleDeleteError"), AlertVariant.danger);
              } else toggleDeleteDialog();
            },
          },
--- a/src/realm-roles/messages.ts
+++ b/src/realm-roles/messages.ts
@ -5,6 +5,7 @@ export default {
    associatedRolesText: "Associated roles",
    addAssociatedRolesText: "Add associated roles",
    addAssociatedRolesSuccess: "Associated roles have been added",
+    addAssociatedRolesError: "Could not associate roles {{error}}",
    associatedRolesModalTitle: "Add roles to {{name}}",
    title: "Realm roles",
    addRole: "Add role",
--- a/src/realm-settings/EmailTab.tsx
+++ b/src/realm-settings/EmailTab.tsx
@ -36,7 +36,7 @@ export const RealmSettingsEmailTab = ({
  const { t } = useTranslation("realm-settings");
  const adminClient = useAdminClient();
  const { realm: realmName } = useRealm();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
  const { whoAmI } = useWhoAmI();

  const [realm, setRealm] = useState(initialRealm);
@ -82,10 +82,7 @@ export const RealmSettingsEmailTab = ({
      setRealm(savedRealm);
      addAlert(t("saveSuccess"), AlertVariant.success);
    } catch (error) {
-      addAlert(
-        t("saveError", { error: error.response?.data?.errorMessage || error }),
-        AlertVariant.danger
-      );
+      addError("realm-settings:saveError", error);
    }
  };

@ -125,7 +122,7 @@ export const RealmSettingsEmailTab = ({
      );
      addAlert(t("testConnectionSuccess"), AlertVariant.success);
    } catch (error) {
-      addAlert(t("testConnectionError"), AlertVariant.danger);
+      addError("realm-settings:testConnectionError", error);
    }
  };

--- a/src/realm-settings/JavaKeystoreModal.tsx
+++ b/src/realm-settings/JavaKeystoreModal.tsx
@ -39,7 +39,7 @@ JavaKeystoreModalProps) => {
  const { t } = useTranslation("groups");
  const serverInfo = useServerInfo();
  const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
  const { handleSubmit, control } = useForm({});
  const [isEllipticCurveDropdownOpen, setIsEllipticCurveDropdownOpen] =
    useState(false);
@ -59,12 +59,7 @@ JavaKeystoreModalProps) => {
      addAlert(t("saveProviderSuccess"), AlertVariant.success);
      refresh();
    } catch (error) {
-      addAlert(
-        t("saveProviderError", {
-          error: error.response?.data?.errorMessage || error,
-        }),
-        AlertVariant.danger
-      );
+      addError("groups:saveProviderError", error);
    }
  };

--- a/src/realm-settings/KeysProvidersTab.tsx
+++ b/src/realm-settings/KeysProvidersTab.tsx
@ -61,7 +61,7 @@ type KeysTabInnerProps = {

 export const KeysTabInner = ({ components, refresh }: KeysTabInnerProps) => {
  const { t } = useTranslation("realm-settings");
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
  const adminClient = useAdminClient();
  const { realm } = useRealm();
  const { url } = useRouteMatch();
@ -112,7 +112,7 @@ export const KeysTabInner = ({ components, refresh }: KeysTabInnerProps) => {

        addAlert(t("deleteProviderSuccess"), AlertVariant.success);
      } catch (error) {
-        addAlert(t("deleteProviderError", { error }), AlertVariant.danger);
+        addError("realm-settings:deleteProviderError", error);
      }
    },
  });
--- a/src/realm-settings/LocalizationTab.tsx
+++ b/src/realm-settings/LocalizationTab.tsx
@ -57,7 +57,7 @@ export const LocalizationTab = ({
  const [valueSelected, setValueSelected] = useState(false);
  const themeTypes = useServerInfo().themes!;
  const bundleForm = useForm<BundleForm>({ mode: "onChange" });
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
  const { realm: currentRealm } = useRealm();

  const watchSupportedLocales = useWatch({
@ -105,12 +105,9 @@ export const LocalizationTab = ({
        realmName: currentRealm!,
      });
      refresh();
-      addAlert(t("realm-settings:pairCreatedSuccess"), AlertVariant.success);
+      addAlert(t("pairCreatedSuccess"), AlertVariant.success);
    } catch (error) {
-      addAlert(
-        t("realm-settings:pairCreatedError", { error }),
-        AlertVariant.danger
-      );
+      addError("realm-settings:pairCreatedError", error);
    }
  };

--- a/src/realm-settings/RSAGeneratedModal.tsx
+++ b/src/realm-settings/RSAGeneratedModal.tsx
@ -38,7 +38,7 @@ export const RSAGeneratedModal = ({
  const { t } = useTranslation("realm-settings");
  const serverInfo = useServerInfo();
  const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
  const { handleSubmit, control } = useForm({});
  const [isKeySizeDropdownOpen, setIsKeySizeDropdownOpen] = useState(false);
  const [isRSAalgDropdownOpen, setIsRSAalgDropdownOpen] = useState(false);
@ -58,12 +58,7 @@ export const RSAGeneratedModal = ({
      addAlert(t("saveProviderSuccess"), AlertVariant.success);
      refresh();
    } catch (error) {
-      addAlert(
-        t("saveProviderError", {
-          error: error.response?.data?.errorMessage || error,
-        }),
-        AlertVariant.danger
-      );
+      addError("realm-settings:saveProviderError", error);
    }
  };

--- a/src/realm-settings/RSAModal.tsx
+++ b/src/realm-settings/RSAModal.tsx
@ -40,7 +40,7 @@ export const RSAModal = ({
  const { t } = useTranslation("realm-settings");
  const serverInfo = useServerInfo();
  const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
  const { handleSubmit, control } = useForm({});
  const [isRSAalgDropdownOpen, setIsRSAalgDropdownOpen] = useState(false);

@ -77,12 +77,7 @@ export const RSAModal = ({
        refresh();
      }
    } catch (error) {
-      addAlert(
-        t("saveProviderError", {
-          error: error.response?.data?.errorMessage || error,
-        }),
-        AlertVariant.danger
-      );
+      addError("realm-settings:saveProviderError", error);
    }
  };

--- a/src/realm-settings/RealmSettingsSection.tsx
+++ b/src/realm-settings/RealmSettingsSection.tsx
@ -70,7 +70,7 @@ const RealmSettingsHeader = ({
 }: RealmSettingsHeaderProps) => {
  const { t } = useTranslation("realm-settings");
  const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
  const history = useHistory();
  const { refresh } = useRealm();
  const [partialImportOpen, setPartialImportOpen] = useState(false);
@ -97,7 +97,7 @@ const RealmSettingsHeader = ({
        history.push("/master/");
        refresh();
      } catch (error) {
-        addAlert(t("deleteError", { error }), AlertVariant.danger);
+        addError("realm-settings:deleteError", error);
      }
    },
  });
@ -147,7 +147,7 @@ export const RealmSettingsSection = () => {
  const { t } = useTranslation("realm-settings");
  const adminClient = useAdminClient();
  const { realm: realmName } = useRealm();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
  const form = useForm({ mode: "onChange" });
  const { control, getValues, setValue, reset: resetForm } = form;
  const [key, setKey] = useState(0);
@ -197,10 +197,7 @@ export const RealmSettingsSection = () => {
      setRealm(realm);
      addAlert(t("saveSuccess"), AlertVariant.success);
    } catch (error) {
-      addAlert(
-        t("saveError", { error: error.response?.data?.errorMessage || error }),
-        AlertVariant.danger
-      );
+      addError("realm-settings:saveError", error);
    }
  };

--- a/src/realm-settings/SessionsTab.tsx
+++ b/src/realm-settings/SessionsTab.tsx
@ -33,7 +33,7 @@ export const RealmSettingsSessionsTab = ({
  const { t } = useTranslation("realm-settings");
  const adminClient = useAdminClient();
  const { realm: realmName } = useRealm();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();

  const [realm, setRealm] = useState(initialRealm);

@ -59,10 +59,7 @@ export const RealmSettingsSessionsTab = ({
      setRealm(savedRealm);
      addAlert(t("saveSuccess"), AlertVariant.success);
    } catch (error) {
-      addAlert(
-        t("saveError", { error: error.response?.data?.errorMessage || error }),
-        AlertVariant.danger
-      );
+      addError("realm-settings:saveError", error);
    }
  };

@ -76,7 +73,7 @@ export const RealmSettingsSessionsTab = ({
    <>
      <PageSection variant="light">
        <FormPanel
-          title={t("realm-settings:SSOSessionSettings")}
+          title={t("SSOSessionSettings")}
          className="kc-sso-session-template"
        >
          <FormAccess
@ -202,7 +199,7 @@ export const RealmSettingsSessionsTab = ({
          </FormAccess>
        </FormPanel>
        <FormPanel
-          title={t("realm-settings:clientSessionSettings")}
+          title={t(".pf-c-data-list__item-draggable-iconclientSessionSettings")}
          className="kc-client-session-template"
        >
          <FormAccess
@ -271,7 +268,7 @@ export const RealmSettingsSessionsTab = ({
          </FormAccess>
        </FormPanel>
        <FormPanel
-          title={t("realm-settings:offlineSessionSettings")}
+          title={t("offlineSessionSettings")}
          className="kc-offline-session-template"
        >
          <FormAccess
--- a/src/realm-settings/event-config/EventsTab.tsx
+++ b/src/realm-settings/event-config/EventsTab.tsx
@ -37,7 +37,7 @@ export const EventsTab = () => {
  const [addEventType, setAddEventType] = useState(false);

  const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
  const { realm } = useRealm();

  const setupForm = (eventConfig?: RealmEventsConfigRepresentation) => {
@ -70,12 +70,7 @@ export const EventsTab = () => {
        }
        addAlert(t(`${type}-events-cleared`), AlertVariant.success);
      } catch (error) {
-        addAlert(
-          t(`${type}-events-cleared-error`, {
-            error: error.response?.data?.errorMessage || error,
-          }),
-          AlertVariant.danger
-        );
+        addError(`realm-settings:${type}-events-cleared-error`, error);
      }
    },
  });
@ -95,12 +90,7 @@ export const EventsTab = () => {
      setupForm({ ...events, ...eventConfig });
      addAlert(t("eventConfigSuccessfully"), AlertVariant.success);
    } catch (error) {
-      addAlert(
-        t("eventConfigError", {
-          error: error.response?.data?.errorMessage || error,
-        }),
-        AlertVariant.danger
-      );
+      addError("realm-settings:eventConfigError", error);
    }
  };

--- a/src/realm-settings/key-providers/aes-generated/AESGeneratedForm.tsx
+++ b/src/realm-settings/key-providers/aes-generated/AESGeneratedForm.tsx
@ -47,7 +47,7 @@ export const AESGeneratedForm = ({
  const [isKeySizeDropdownOpen, setIsKeySizeDropdownOpen] = useState(false);

  const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();

  const { id } = useParams<{ id: string }>();

@ -79,12 +79,7 @@ export const AESGeneratedForm = ({
        refresh?.();
      }
    } catch (error) {
-      addAlert(
-        t("saveProviderError", {
-          error: error.response?.data?.errorMessage || error,
-        }),
-        AlertVariant.danger
-      );
+      addError("realm-settings:saveProviderError", error);
    }
  };

--- a/src/realm-settings/key-providers/ecdsa-generated/ECDSAGeneratedForm.tsx
+++ b/src/realm-settings/key-providers/ecdsa-generated/ECDSAGeneratedForm.tsx
@ -47,7 +47,7 @@ export const ECDSAGeneratedForm = ({
  const [isKeySizeDropdownOpen, setIsKeySizeDropdownOpen] = useState(false);

  const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();

  const { id } = useParams<{ id: string }>();

@ -79,12 +79,7 @@ export const ECDSAGeneratedForm = ({
        refresh?.();
      }
    } catch (error) {
-      addAlert(
-        t("saveProviderError", {
-          error: error.response?.data?.errorMessage || error,
-        }),
-        AlertVariant.danger
-      );
+      addError("realm-settings:saveProviderError", error);
    }
  };

--- a/src/realm-settings/key-providers/hmac-generated/HMACGeneratedForm.tsx
+++ b/src/realm-settings/key-providers/hmac-generated/HMACGeneratedForm.tsx
@ -49,7 +49,7 @@ export const HMACGeneratedForm = ({
    useState(false);

  const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();

  const { id } = useParams<{ id: string }>();

@ -81,12 +81,7 @@ export const HMACGeneratedForm = ({
        refresh?.();
      }
    } catch (error) {
-      addAlert(
-        t("saveProviderError", {
-          error: error.response?.data?.errorMessage || error,
-        }),
-        AlertVariant.danger
-      );
+      addError("realm-settings:saveProviderError", error);
    }
  };

--- a/src/realm-settings/key-providers/java-keystore/JavaKeystoreForm.tsx
+++ b/src/realm-settings/key-providers/java-keystore/JavaKeystoreForm.tsx
@ -47,7 +47,7 @@ export const JavaKeystoreForm = ({
  const [isAlgorithmDropdownOpen, setIsAlgorithmDropdownOpen] = useState(false);

  const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();

  const { id } = useParams<{ id: string }>();

@ -79,12 +79,7 @@ export const JavaKeystoreForm = ({
        refresh?.();
      }
    } catch (error) {
-      addAlert(
-        t("saveProviderError", {
-          error: error.response?.data?.errorMessage || error,
-        }),
-        AlertVariant.danger
-      );
+      addError("realm-settings:saveProviderError", error);
    }
  };

--- a/src/realm-settings/key-providers/rsa-generated/RSAGeneratedForm.tsx
+++ b/src/realm-settings/key-providers/rsa-generated/RSAGeneratedForm.tsx
@ -49,7 +49,7 @@ export const RSAGeneratedForm = ({
    useState(false);

  const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();

  const { id } = useParams<{ id: string }>();

@ -81,12 +81,7 @@ export const RSAGeneratedForm = ({
        refresh?.();
      }
    } catch (error) {
-      addAlert(
-        t("saveProviderError", {
-          error: error.response?.data?.errorMessage || error,
-        }),
-        AlertVariant.danger
-      );
+      addError("realm-settings:saveProviderError", error);
    }
  };

--- a/src/realm-settings/key-providers/rsa/RSAForm.tsx
+++ b/src/realm-settings/key-providers/rsa/RSAForm.tsx
@ -54,7 +54,7 @@ export const RSAForm = ({
  const [certificateFileName, setCertificateFileName] = useState("");

  const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();

  const { id } = useParams<{ id: string }>();

@ -86,12 +86,7 @@ export const RSAForm = ({
        refresh?.();
      }
    } catch (error) {
-      addAlert(
-        t("saveProviderError", {
-          error: error.response?.data?.errorMessage || error,
-        }),
-        AlertVariant.danger
-      );
+      addError("realm-settings:saveProviderError", error);
    }
  };

--- a/src/realm/add/NewRealmForm.tsx
+++ b/src/realm/add/NewRealmForm.tsx
@ -26,7 +26,7 @@ export const NewRealmForm = () => {
  const { refresh } = useWhoAmI();
  const { refresh: realmRefresh } = useRealm();
  const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();

  const { register, handleSubmit, control, errors, setValue } =
    useForm<RealmRepresentation>({ mode: "onChange" });
@ -49,12 +49,7 @@ export const NewRealmForm = () => {
      await realmRefresh();
      history.push(`/${realm.realm}`);
    } catch (error) {
-      addAlert(
-        t("saveRealmError", {
-          error: error.response?.data?.errorMessage || error,
-        }),
-        AlertVariant.danger
-      );
+      addError("realm:saveRealmError", error);
    }
  };

--- a/src/user-federation/UserFederationKerberosSettings.tsx
+++ b/src/user-federation/UserFederationKerberosSettings.tsx
@ -88,7 +88,7 @@ export const UserFederationKerberosSettings = () => {

  const { id } = useParams<{ id: string }>();

-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();

  useEffect(() => {
    (async () => {
@ -131,9 +131,9 @@ export const UserFederationKerberosSettings = () => {
        AlertVariant.success
      );
    } catch (error) {
-      addAlert(
-        `${t(id === "new" ? "createError" : "saveError")} '${error}'`,
-        AlertVariant.danger
+      addError(
+        `user-federation:${id === "new" ? "createError" : "saveError"}`,
+        error
      );
    }
  };
@ -149,7 +149,7 @@ export const UserFederationKerberosSettings = () => {
        addAlert(t("userFedDeletedSuccess"), AlertVariant.success);
        history.replace(`/${realm}/user-federation`);
      } catch (error) {
-        addAlert(`${t("userFedDeleteError")} ${error}`, AlertVariant.danger);
+        addAlert("user-federation:userFedDeleteError", error);
      }
    },
  });
--- a/src/user-federation/UserFederationLdapSettings.tsx
+++ b/src/user-federation/UserFederationLdapSettings.tsx
@ -61,7 +61,7 @@ const LdapSettingsHeader = ({
  const { t } = useTranslation("user-federation");
  const { id } = useParams<{ id: string }>();
  const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
  const [toggleDisableDialog, DisableConfirm] = useConfirmDialog({
    titleKey: "user-federation:userFedDisableConfirmTitle",
    messageKey: "user-federation:userFedDisableConfirm",
@ -90,7 +90,7 @@ const LdapSettingsHeader = ({
        }
      }
    } catch (error) {
-      addAlert(t("syncUsersError", { error }), AlertVariant.danger);
+      addError("user-federation:syncUsersError", error);
    }
  };

@ -112,7 +112,7 @@ const LdapSettingsHeader = ({
        }
      }
    } catch (error) {
-      addAlert(t("syncUsersError", { error }), AlertVariant.danger);
+      addError("user-federation:syncUsersError", error);
    }
  };

@ -123,7 +123,7 @@ const LdapSettingsHeader = ({
      }
      addAlert(t("unlinkUsersSuccess"), AlertVariant.success);
    } catch (error) {
-      addAlert(t("unlinkUsersError", { error }), AlertVariant.danger);
+      addError("user-federation:unlinkUsersError", error);
    }
  };

@ -180,7 +180,7 @@ export const UserFederationLdapSettings = () => {
  const { realm } = useRealm();

  const { id } = useParams<{ id: string }>();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();

  useFetch(
    async () => {
@ -223,7 +223,7 @@ export const UserFederationLdapSettings = () => {
      }
      addAlert(t("removeImportedUsersSuccess"), AlertVariant.success);
    } catch (error) {
-      addAlert(t("removeImportedUsersError", { error }), AlertVariant.danger);
+      addError("user-federation:removeImportedUsersError", error);
    }
  };

@ -249,10 +249,7 @@ export const UserFederationLdapSettings = () => {
      }
      addAlert(t(id ? "saveSuccess" : "createSuccess"), AlertVariant.success);
    } catch (error) {
-      addAlert(
-        t(id ? "saveError" : "createError", { error }),
-        AlertVariant.danger
-      );
+      addError(`user-federation:${id ? "saveError" : "createError"}`, error);
    }
  };

@ -265,7 +262,7 @@ export const UserFederationLdapSettings = () => {
        removeImportedUsers();
        addAlert(t("removeImportedUsersSuccess"), AlertVariant.success);
      } catch (error) {
-        addAlert(t("removeImportedUsersError", { error }), AlertVariant.danger);
+        addError("user-federation:removeImportedUsersError", error);
      }
    },
  });
@ -281,7 +278,7 @@ export const UserFederationLdapSettings = () => {
        addAlert(t("userFedDeletedSuccess"), AlertVariant.success);
        history.replace(`/${realm}/user-federation`);
      } catch (error) {
-        addAlert(`${t("userFedDeleteError")} ${error}`, AlertVariant.danger);
+        addError("user-federation:userFedDeleteError", error);
      }
    },
  });
--- a/src/user-federation/UserFederationSection.tsx
+++ b/src/user-federation/UserFederationSection.tsx
@ -29,7 +29,7 @@ import "./user-federation.css";
 export const UserFederationSection = () => {
  const [userFederations, setUserFederations] =
    useState<ComponentRepresentation[]>();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
  const { t } = useTranslation("user-federation");
  const { realm } = useRealm();
  const adminClient = useAdminClient();
@ -87,7 +87,7 @@ export const UserFederationSection = () => {
        refresh();
        addAlert(t("userFedDeletedSuccess"), AlertVariant.success);
      } catch (error) {
-        addAlert(t("userFedDeleteError", { error }), AlertVariant.danger);
+        addError("user-federation:userFedDeleteError", error);
      }
    },
  });
--- a/src/user-federation/ldap/LdapSettingsConnection.tsx
+++ b/src/user-federation/ldap/LdapSettingsConnection.tsx
@ -48,7 +48,7 @@ export const LdapSettingsConnection = ({
  const { t: helpText } = useTranslation("user-federation-help");
  const adminClient = useAdminClient();
  const { realm } = useRealm();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();

  const testLdap = async () => {
    try {
@ -64,8 +64,7 @@ export const LdapSettingsConnection = ({
      );
      addAlert(t("testSuccess"), AlertVariant.success);
    } catch (error) {
-      addAlert(t("testError"), AlertVariant.danger);
-      console.error(error.response?.data?.errorMessage);
+      addError("user-federation:testError", error);
    }
  };

--- a/src/user-federation/ldap/mappers/LdapMapperDetails.tsx
+++ b/src/user-federation/ldap/mappers/LdapMapperDetails.tsx
@ -45,7 +45,7 @@ export const LdapMapperDetails = () => {
  const { realm } = useRealm();
  const { t } = useTranslation("user-federation");
  const helpText = useTranslation("user-federation-help").t;
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();

  const [isMapperDropdownOpen, setIsMapperDropdownOpen] = useState(false);

@ -103,13 +103,13 @@ export const LdapMapperDetails = () => {
        AlertVariant.success
      );
    } catch (error) {
-      addAlert(
-        `${t(
+      addError(
+        `user-federation:${
          mapperId === "new"
            ? "common:mappingCreatedError"
            : "common:mappingUpdatedError"
-        )} '${error}'`,
-        AlertVariant.danger
+        }`,
+        error
      );
    }
  };
--- a/src/user-federation/ldap/mappers/LdapMapperList.tsx
+++ b/src/user-federation/ldap/mappers/LdapMapperList.tsx
@ -19,7 +19,7 @@ export const LdapMapperList = () => {
  const history = useHistory();
  const { t } = useTranslation("user-federation");
  const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
  const { url } = useRouteMatch();
  const [key, setKey] = useState(0);
  const refresh = () => setKey(new Date().getTime());
@ -63,10 +63,7 @@ export const LdapMapperList = () => {
        addAlert(t("common:mappingDeletedSuccess"), AlertVariant.success);
        setSelectedMapper(undefined);
      } catch (error) {
-        addAlert(
-          t("common:mappingDeletedError", { error }),
-          AlertVariant.danger
-        );
+        addError("common:mappingDeletedError", error);
      }
    },
  });
--- a/src/user-federation/messages.ts
+++ b/src/user-federation/messages.ts
@ -92,7 +92,7 @@ export default {
    createError: "User federation provider could not be created: {{error}}",
    testSuccess: "Successfully connected to LDAP",
    testError:
-      "Error when trying to connect to LDAP. See server.log for details.",
+      "Error when trying to connect to LDAP. See server.log for details. {{error}}",

    learnMore: "Learn more",
    addNewProvider: "Add new provider",
--- a/src/user/UserConsents.tsx
+++ b/src/user/UserConsents.tsx
@ -23,7 +23,7 @@ export const UserConsents = () => {
  const [selectedClient, setSelectedClient] =
    useState<UserConsentRepresentation>();
  const { t } = useTranslation("roles");
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
  const [key, setKey] = useState(0);

  const adminClient = useAdminClient();
@ -87,7 +87,7 @@ export const UserConsents = () => {

        addAlert(t("deleteGrantsSuccess"), AlertVariant.success);
      } catch (error) {
-        addAlert(t("deleteGrantsError", { error }), AlertVariant.danger);
+        addError("roles:deleteGrantsError", error);
      }
    },
  });
--- a/src/user/UserForm.tsx
+++ b/src/user/UserForm.tsx
@ -57,7 +57,7 @@ export const UserForm = ({
    []
  );

-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();

  const [open, setOpen] = useState(false);

@ -121,10 +121,7 @@ export const UserForm = ({
        });
        addAlert(t("users:addedGroupMembership"), AlertVariant.success);
      } catch (error) {
-        addAlert(
-          t("users:addedGroupMembershipError", { error }),
-          AlertVariant.danger
-        );
+        addError("users:addedGroupMembershipError", error);
      }
    });
  };
--- a/src/user/UserGroups.tsx
+++ b/src/user/UserGroups.tsx
@ -35,7 +35,7 @@ export type UserFormProps = {

 export const UserGroups = () => {
  const { t } = useTranslation("users");
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
  const [key, setKey] = useState(0);
  const refresh = () => setKey(new Date().getTime());

@ -213,10 +213,7 @@ export const UserGroups = () => {
        refresh();
        addAlert(t("removedGroupMembership"), AlertVariant.success);
      } catch (error) {
-        addAlert(
-          t("removedGroupMembershipError", { error }),
-          AlertVariant.danger
-        );
+        addError("users:removedGroupMembershipError", error);
      }
    },
  });
@ -259,10 +256,7 @@ export const UserGroups = () => {
        refresh();
        addAlert(t("addedGroupMembership"), AlertVariant.success);
      } catch (error) {
-        addAlert(
-          t("addedGroupMembershipError", { error }),
-          AlertVariant.danger
-        );
+        addError("users:addedGroupMembershipError", error);
      }
    });
  };
--- a/src/user/UsersSection.tsx
+++ b/src/user/UsersSection.tsx
@ -34,7 +34,7 @@ type BruteUser = UserRepresentation & {
 export const UsersSection = () => {
  const { t } = useTranslation("users");
  const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
  const { realm: realmName } = useRealm();
  const history = useHistory();
  const { url } = useRouteMatch();
@ -106,7 +106,7 @@ export const UsersSection = () => {
      }
      return users;
    } catch (error) {
-      addAlert(t("noUsersFoundError", { error }), AlertVariant.danger);
+      addError("users:noUsersFoundError", error);
      return [];
    }
  };
@ -125,7 +125,7 @@ export const UsersSection = () => {
        refresh();
        addAlert(t("userDeletedSuccess"), AlertVariant.success);
      } catch (error) {
-        addAlert(t("userDeletedError", { error }), AlertVariant.danger);
+        addError("users:userDeletedError", error);
      }
    },
  });
--- a/src/user/UsersTabs.tsx
+++ b/src/user/UsersTabs.tsx
@ -22,7 +22,7 @@ import { useRealm } from "../context/realm-context/RealmContext";

 export const UsersTabs = () => {
  const { t } = useTranslation("roles");
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
  const history = useHistory();
  const { realm } = useRealm();

@ -65,12 +65,7 @@ export const UsersTabs = () => {
        history.push(`/${realm}/users/${createdUser.id}/settings`);
      }
    } catch (error) {
-      addAlert(
-        t("users:userCreateError", {
-          error: error.response?.data?.errorMessage || error,
-        }),
-        AlertVariant.danger
-      );
+      addError("users:userCreateError", error);
    }
  };