feat: introducing user guidance and error management helpers in admin dashboard (#4548)

packages/hoppscotch-sh-admin/src/main.ts

@@ -1,65 +1,74 @@
-import { createApp } from 'vue';
-import urql, { createClient, cacheExchange, fetchExchange } from '@urql/vue';
 import { authExchange } from '@urql/exchange-auth';
+import urql, { cacheExchange, createClient, fetchExchange } from '@urql/vue';
+import { createApp, h } from 'vue';
 import App from './App.vue';
+import ErrorComponent from './pages/_.vue';
 
 // STYLES
-import '@hoppscotch/ui/style.css';
-import '../assets/scss/styles.scss';
-import '../assets/scss/tailwind.scss';
 import '@fontsource-variable/inter';
 import '@fontsource-variable/material-symbols-rounded';
 import '@fontsource-variable/roboto-mono';
+import '@hoppscotch/ui/style.css';
+import '../assets/scss/styles.scss';
+import '../assets/scss/tailwind.scss';
 // END STYLES
 
-import { HOPP_MODULES } from './modules';
-import { auth } from './helpers/auth';
 import { pipe } from 'fp-ts/function';
 import * as O from 'fp-ts/Option';
+import { auth } from './helpers/auth';
 import { GRAPHQL_UNAUTHORIZED } from './helpers/errors';
+import { HOPP_MODULES } from './modules';
 
-// Top-level await is not available in our targets
 (async () => {
-  const app = createApp(App).use(
-    urql,
-    createClient({
+  try {
+    // Create URQL client
+    const urqlClient = createClient({
       url: import.meta.env.VITE_BACKEND_GQL_URL,
       requestPolicy: 'network-only',
-      fetchOptions: () => {
-        return {
-          credentials: 'include',
-        };
-      },
+      fetchOptions: () => ({
+        credentials: 'include',
+      }),
       exchanges: [
         cacheExchange,
-        authExchange(async () => {
-          return {
-            addAuthToOperation(operation) {
-              return operation;
-            },
-
-            async refreshAuth() {
-              pipe(
-                await auth.performAuthRefresh(),
-                O.getOrElseW(() => auth.signOutUser(true))
-              );
-            },
-
-            didAuthError(error, _operation) {
-              return error.message === GRAPHQL_UNAUTHORIZED;
-            },
-          };
-        }),
+        authExchange(async () => ({
+          addAuthToOperation(operation) {
+            return operation;
+          },
+          async refreshAuth() {
+            pipe(
+              await auth.performAuthRefresh(),
+              O.getOrElseW(() => auth.signOutUser(true))
+            );
+          },
+          didAuthError(error, _operation) {
+            return error.message === GRAPHQL_UNAUTHORIZED;
+          },
+        })),
         fetchExchange,
       ],
-    })
-  );
+    });
 
-  // Initialize auth
-  await auth.performAuthInit();
+    // Initialize auth
+    await auth.performAuthInit();
 
-  // Initialize modules
-  HOPP_MODULES.forEach((mod) => mod.onVueAppInit?.(app));
+    const app = createApp({
+      render: () => h(App),
+    }).use(urql, urqlClient);
 
-  app.mount('#app');
+    // Initialize modules
+    HOPP_MODULES.forEach((mod) => mod.onVueAppInit?.(app));
+
+    app.mount('#app');
+  } catch (error) {
+    // Mount the fallback component in case of an error
+    createApp({
+      render: () =>
+        h(ErrorComponent, {
+          error: {
+            message:
+              'Failed to connect to the backend server, make sure the backend is setup correctly',
+          },
+        }),
+    }).mount('#app');
+  }
 })();