Merge pull request #42 from devforth/add_alert_when_api_throw_error

added try catch to callApi + alert for catch statement

Author: ivictbor

adminforth/spa/src/i18n.ts

@@ -51,5 +51,5 @@ export function initI18n(app: ReturnType<typeof createApp>) {
   })
 
   app.use(i18n);
-
+  return i18n
 }

adminforth/spa/src/main.ts

@@ -13,7 +13,8 @@ export const app: ReturnType<typeof createApp> = createApp(App)
 app.use(createPinia())
 app.use(router)
 
-initI18n(app);
+// get access to i18n instance outside components
+window.i18n = initI18n(app);
 
 
 /* IMPORTANT:ADMINFORTH CUSTOM USES */

adminforth/spa/src/utils.ts

@@ -1,13 +1,12 @@
 import { onMounted, ref, resolveComponent } from 'vue';
 import type { CoreConfig } from './spa_types/core';
 import type { ValidationObject } from './types/AdminForthConfig';
-
-
 import router from "./router";
 import { useCoreStore } from './stores/core';
 import { useUserStore } from './stores/user';
 import { Dropdown } from 'flowbite';
 
+
 const LS_LANG_KEY = `afLanguage`;
 
 export async function callApi({path, method, body=undefined}: {
@@ -23,13 +22,18 @@ export async function callApi({path, method, body=undefined}: {
     body: JSON.stringify(body),
   };
   const fullPath = `${import.meta.env.VITE_ADMINFORTH_PUBLIC_PATH || ''}${path}`;
-  const r = await fetch(fullPath, options);
-  if (r.status == 401 ) {
-    useUserStore().unauthorize();
-    await router.push({ name: 'login' });
-    return null;
-  } 
-  return await r.json();
+  try {
+    const r = await fetch(fullPath, options);
+    if (r.status == 401 ) {
+      useUserStore().unauthorize();
+      await router.push({ name: 'login' });
+      return null;
+    } 
+    return await r.json();
+  } catch(e){
+    window.adminforth.alert({variant:'danger', message:window.i18n?.global?.t('Something went wrong, please try again later'),})
+    console.error(`error in callApi ${path}`,e);
+  }
 }
 
 export async function callAdminForthApi({ path, method, body=undefined, headers=undefined }: {