fix: make error handling more descriptive and catch JWT config error

Author: jescalada

src/ui/services/git-push.js

@@ -45,6 +45,7 @@ const getPushes = async (
   setData,
   setAuth,
   setIsError,
+  setErrorMessage,
   query = {
     blocked: true,
     canceled: false,
@@ -60,15 +61,16 @@ const getPushes = async (
     .then((response) => {
       const data = response.data;
       setData(data);
-      setIsLoading(false);
     })
     .catch((error) => {
-      setIsLoading(false);
+      setIsError(true);
       if (error.response && error.response.status === 401) {
         setAuth(false);
+        setErrorMessage('Failed to authorize user. If JWT auth is enabled, please check your configuration or disable it.');
       } else {
-        setIsError(true);
+        setErrorMessage(`Error fetching pushes: ${error.response.data.message}`);
       }
+    }).finally(() => {
       setIsLoading(false);
     });
 };

src/ui/services/repo.js

@@ -33,23 +33,31 @@ class DupUserValidationError extends Error {
   }
 }
 
-const getRepos = async (setIsLoading, setData, setAuth, setIsError, query = {}) => {
+const getRepos = async (
+  setIsLoading,
+  setData,
+  setAuth,
+  setIsError,
+  setErrorMessage,
+  query = {},
+) => {
   const url = new URL(`${baseUrl}/repo`);
   url.search = new URLSearchParams(query);
   setIsLoading(true);
   await axios(url.toString(), config)
     .then((response) => {
       const data = response.data;
       setData(data);
-      setIsLoading(false);
     })
     .catch((error) => {
-      setIsLoading(false);
+      setIsError(true);
       if (error.response && error.response.status === 401) {
         setAuth(false);
+        setErrorMessage('Failed to authorize user. If JWT auth is enabled, please check your configuration or disable it.');
       } else {
-        setIsError(true);
+        setErrorMessage(`Error fetching repositories: ${error.response.data.message}`);
       }
+    }).finally(() => {
       setIsLoading(false);
     });
 };
@@ -61,15 +69,14 @@ const getRepo = async (setIsLoading, setData, setAuth, setIsError, id) => {
     .then((response) => {
       const data = response.data;
       setData(data);
-      setIsLoading(false);
     })
     .catch((error) => {
-      setIsLoading(false);
       if (error.response && error.response.status === 401) {
         setAuth(false);
       } else {
         setIsError(true);
       }
+    }).finally(() => {
       setIsLoading(false);
     });
 };

src/ui/services/user.js

@@ -44,23 +44,31 @@ const getUser = async (setIsLoading, setData, setAuth, setIsError, id = null) =>
     });
 };
 
-const getUsers = async (setIsLoading, setData, setAuth, setIsError, query = {}) => {
+const getUsers = async (
+  setIsLoading,
+  setData,
+  setAuth,
+  setIsError,
+  setErrorMessage,
+  query = {},
+) => {
   const url = new URL(`${baseUrl}/api/v1/user`);
   url.search = new URLSearchParams(query);
   setIsLoading(true);
   await axios(url.toString(), { withCredentials: true })
     .then((response) => {
       const data = response.data;
       setData(data);
-      setIsLoading(false);
     })
     .catch((error) => {
-      setIsLoading(false);
+      setIsError(true);
       if (error.response && error.response.status === 401) {
         setAuth(false);
+        setErrorMessage('Failed to authorize user. If JWT auth is enabled, please check your configuration or disable it.');
       } else {
-        setIsError(true);
+        setErrorMessage(`Error fetching users: ${error.response.data.message}`);
       }
+    }).finally(() => {
       setIsLoading(false);
     });
 };

src/ui/views/OpenPushRequests/components/PushesTable.jsx

@@ -23,6 +23,7 @@ export default function PushesTable(props) {
   const [filteredData, setFilteredData] = useState([]);
   const [isLoading, setIsLoading] = useState(false);
   const [isError, setIsError] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('');
   const navigate = useNavigate();
   const [, setAuth] = useState(true);
   const [currentPage, setCurrentPage] = useState(1);
@@ -35,7 +36,7 @@ export default function PushesTable(props) {
     for (const k in props) {
       if (k) query[k] = props[k];
     }
-    getPushes(setIsLoading, setData, setAuth, setIsError, query);
+    getPushes(setIsLoading, setData, setAuth, setIsError, setErrorMessage, query);
   }, [props]);
 
   useEffect(() => {
@@ -69,7 +70,7 @@ export default function PushesTable(props) {
   const paginate = (pageNumber) => setCurrentPage(pageNumber);
 
   if (isLoading) return <div>Loading...</div>;
-  if (isError) return <div>Something went wrong ...</div>;
+  if (isError) return <div>{errorMessage}</div>;
 
   return (
     <div>

src/ui/views/RepoList/Components/Repositories.jsx

@@ -24,6 +24,7 @@ export default function Repositories(props) {
   const [, setAuth] = useState(true);
   const [isLoading, setIsLoading] = useState(false);
   const [isError, setIsError] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('');
   const [currentPage, setCurrentPage] = useState(1);
   const itemsPerPage = 5;
   const navigate = useNavigate();
@@ -44,6 +45,7 @@ export default function Repositories(props) {
       },
       setAuth,
       setIsError,
+      setErrorMessage,
       query,
     );
   }, [props]);
@@ -99,7 +101,7 @@ export default function Repositories(props) {
   const paginatedData = filteredData.slice(startIdx, startIdx + itemsPerPage);
 
   if (isLoading) return <div>Loading...</div>;
-  if (isError) return <div>Something went wrong ...</div>;
+  if (isError) return <div>{errorMessage}</div>;
 
   const addrepoButton = user.admin ? (
     <GridItem>

src/ui/views/UserList/Components/UserList.jsx

@@ -25,6 +25,7 @@ export default function UserList(props) {
   const [, setAuth] = useState(true);
   const [isLoading, setIsLoading] = useState(false);
   const [isError, setIsError] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('');
   const navigate = useNavigate();
   const [currentPage, setCurrentPage] = useState(1);
   const itemsPerPage = 5;
@@ -39,11 +40,11 @@ export default function UserList(props) {
       if (!k) continue;
       query[k] = props[k];
     }
-    getUsers(setIsLoading, setData, setAuth, setIsError, query);
+    getUsers(setIsLoading, setData, setAuth, setIsError, setErrorMessage, query);
   }, [props]);
 
   if (isLoading) return <div>Loading...</div>;
-  if (isError) return <div>Something went wrong...</div>;
+  if (isError) return <div>{errorMessage}</div>;
 
   const filteredUsers = data.filter(
     (user) =>