API error handling (#8739)

* API error handling

- Add error handlers to various API calls

* Fix return type

src/frontend/src/components/buttons/SSOButton.tsx

@@ -15,6 +15,7 @@ import {
 } from '@tabler/icons-react';
 
 import { t } from '@lingui/macro';
+import { showNotification } from '@mantine/notifications';
 import { api } from '../../App';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
 import { apiUrl } from '../../states/ApiState';
@@ -46,6 +47,13 @@ export function SsoButton({ provider }: Readonly<{ provider: Provider }>) {
       .then(() => {
         // redirect to login
         window.location.href = provider.login;
+      })
+      .catch(() => {
+        showNotification({
+          title: t`Error`,
+          message: t`Sign in redirect failed.`,
+          color: 'red'
+        });
       });
   }
 

src/frontend/src/components/dashboard/widgets/NewsWidget.tsx

@@ -99,7 +99,8 @@ export default function NewsWidget() {
         })
         .then(() => {
           newsItems.refetch();
-        });
+        })
+        .catch(() => {});
     },
     [newsItems]
   );

src/frontend/src/components/dashboard/widgets/QueryCountDashboardWidget.tsx

@@ -48,7 +48,8 @@ function QueryCountWidget({
             limit: 1
           }
         })
-        .then((res) => res.data);
+        .then((res) => res.data)
+        .catch(() => {});
     }
   });
 

src/frontend/src/components/forms/AuthenticationForm.tsx

@@ -15,6 +15,7 @@ import { useDisclosure } from '@mantine/hooks';
 import { useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 
+import { showNotification } from '@mantine/notifications';
 import { api } from '../../App';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
 import {
@@ -44,26 +45,31 @@ export function AuthenticationForm() {
     setIsLoggingIn(true);
 
     if (classicLoginMode === true) {
-      doBasicLogin(
-        classicForm.values.username,
-        classicForm.values.password
-      ).then(() => {
-        setIsLoggingIn(false);
+      doBasicLogin(classicForm.values.username, classicForm.values.password)
+        .then(() => {
+          setIsLoggingIn(false);
 
-        if (isLoggedIn()) {
-          showLoginNotification({
-            title: t`Login successful`,
-            message: t`Logged in successfully`
-          });
-          followRedirect(navigate, location?.state);
-        } else {
-          showLoginNotification({
+          if (isLoggedIn()) {
+            showLoginNotification({
+              title: t`Login successful`,
+              message: t`Logged in successfully`
+            });
+            followRedirect(navigate, location?.state);
+          } else {
+            showLoginNotification({
+              title: t`Login failed`,
+              message: t`Check your input and try again.`,
+              success: false
+            });
+          }
+        })
+        .catch(() => {
+          showNotification({
             title: t`Login failed`,
             message: t`Check your input and try again.`,
-            success: false
+            color: 'red'
           });
-        }
-      });
+        });
     } else {
       doSimpleLogin(simpleForm.values.email).then((ret) => {
         setIsLoggingIn(false);

src/frontend/src/components/plugins/RemoteComponent.tsx

@@ -53,18 +53,24 @@ export default function RemoteComponent({
     }
 
     if (sourceFile && functionName) {
-      findExternalPluginFunction(sourceFile, functionName).then((func) => {
-        if (func) {
-          try {
-            func(componentRef.current, context);
-            setRenderingError('');
-          } catch (error) {
-            setRenderingError(`${error}`);
+      findExternalPluginFunction(sourceFile, functionName)
+        .then((func) => {
+          if (func) {
+            try {
+              func(componentRef.current, context);
+              setRenderingError('');
+            } catch (error) {
+              setRenderingError(`${error}`);
+            }
+          } else {
+            setRenderingError(`${sourceFile}:${functionName}`);
           }
-        } else {
-          setRenderingError(`${sourceFile}:${functionName}`);
-        }
-      });
+        })
+        .catch((_error) => {
+          console.error(
+            `ERR: Failed to load remove plugin function: ${sourceFile}:${functionName}`
+          );
+        });
     } else {
       setRenderingError(
         `${t`Invalid source or function name`} - ${sourceFile}:${functionName}`

src/frontend/src/tables/InvenTreeTable.tsx

@@ -12,6 +12,7 @@ import type React from 'react';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
+import { showNotification } from '@mantine/notifications';
 import { api } from '../App';
 import { Boundary } from '../components/Boundary';
 import type { ApiFormFieldSet } from '../components/forms/fields/ApiFormField';
@@ -198,6 +199,15 @@ export function InvenTreeTable<T extends Record<string, any>>({
             setTableColumnNames(cacheKey)(names);
           }
 
+          return null;
+        })
+        .catch(() => {
+          showNotification({
+            title: t`API Error`,
+            message: t`Failed to load table options`,
+            color: 'red'
+          });
+
           return null;
         });
     }