enhancement(gui): add not found page for handling invalid base url

re #3648

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui/composables/useProject.ts

@@ -64,6 +64,8 @@ const [setup, use] = useInjectionState((_projectId?: MaybeRef<string>) => {
   const isPg = computed(() => projectBaseType === 'pg')
   const isSharedBase = computed(() => projectType === 'base')
 
+  const router = useRouter()
+
   async function loadProjectMetaInfo(force?: boolean) {
     if (!projectMetaInfo.value || force) {
       projectMetaInfo.value = await api.project.metaGet(project.value.id!, {}, {})
@@ -104,8 +106,15 @@ const [setup, use] = useInjectionState((_projectId?: MaybeRef<string>) => {
     if (id) {
       project.value = await api.project.read(projectId.value)
     } else if (projectType === 'base') {
-      const baseData = await api.public.sharedBaseGet(route.params.projectId as string)
-      project.value = await api.project.read(baseData.project_id!)
+      try {
+        const baseData = await api.public.sharedBaseGet(route.params.projectId as string)
+        project.value = await api.project.read(baseData.project_id!)
+      } catch (e) {
+        if (e?.response?.status === 404) {
+          return router.push('/404')
+        }
+        throw e
+      }
     } else if (projectId.value) {
       project.value = await api.project.read(projectId.value)
     } else {

packages/nc-gui/pages/404.vue

@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+import { definePageMeta } from '#imports'
+
+definePageMeta({
+  title: 'Page Not Found',
+  public: true,
+})
+</script>
+
+<template>
+  <div class="w-full h-[300px] flex justify-center items-center text-4xl">
+    <h1 class="text-gray-400">Page Not Found</h1>
+  </div>
+</template>