fix: Redirect to 404 Page When Note is Not Found

src/application/i18n/messages/en.json

@@ -176,6 +176,7 @@
     "noteSettings": "Note settings",
     "marketplace": "Marketplace",
     "addTool": "Add tool",
+    "error": "Error",
     "notFound": "Not found",
     "joinTeam": "Join",
     "authorization": "Authorize",

src/application/router/routes.ts

@@ -179,7 +179,6 @@ const routes: RouteRecordRaw[] = [
       discardTabOnLeave: true,
     },
   },
-
   /**
    * 404 page
    */
@@ -195,6 +194,22 @@ const routes: RouteRecordRaw[] = [
       code: 404,
     },
   },
+  /**
+   * error page
+   */
+  {
+    path: '/error/:code',
+    component: ErrorPage,
+    meta: {
+      layout: 'fullpage',
+      pageTitleI18n: 'pages.error',
+      discardTabOnLeave: true,
+    },
+    props: route => ({
+      code: route.params.code,
+      customMessage: route.query.message,
+    }),
+  },
 ];
 
 export default routes;

src/application/services/useNote.ts

@@ -5,6 +5,7 @@ import type { NoteTool } from '@/domain/entities/Note';
 import { useRouter, useRoute } from 'vue-router';
 import type { NoteDraft } from '@/domain/entities/NoteDraft';
 import type EditorTool from '@/domain/entities/EditorTool';
+import NotFoundError from '@/domain/entities/errors/NotFound';
 import useHeader from './useHeader';
 import { getTitle } from '@/infrastructure/utils/note';
 
@@ -166,12 +167,20 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
     /**
      * @todo try-catch domain errors
      */
-    const response = await noteService.getNoteById(id);
-
-    note.value = response.note;
-    canEdit.value = response.accessRights.canEdit;
-    noteTools.value = response.tools;
-    parentNote.value = response.parentNote;
+    try {
+      const response = await noteService.getNoteById(id);
+
+      note.value = response.note;
+      canEdit.value = response.accessRights.canEdit;
+      noteTools.value = response.tools;
+      parentNote.value = response.parentNote;
+    } catch (error) {
+      if (error instanceof NotFoundError) {
+        void router.push(`/error/404`);
+      } else {
+        void router.push('/error/500');
+      }
+    }
   }
 
   /**

src/domain/entities/errors/ApiError.ts

@@ -0,0 +1,16 @@
+import DomainError from './Base';
+
+/**
+ * Domain error thrown when unknown error occurs
+ */
+export default class ApiError extends DomainError {
+  /**
+   * Constructor for ApiError error
+   * @param message - Error message
+   * @param statusCode - Error status code
+   */
+  constructor(message: string, public statusCode: number) {
+    super(message);
+    this.name = 'ApiError';
+  }
+}

src/infrastructure/transport/notes-api/index.ts

@@ -5,6 +5,7 @@ import AuthorizableTransport from '@/infrastructure/transport/authorizable.trans
 import type JSONValue from '../types/JSONValue';
 import UnauthorizedError from '@/domain/entities/errors/Unauthorized';
 import NotFoundError from '@/domain/entities/errors/NotFound';
+import ApiError from '@/domain/entities/errors/ApiError';
 import type { FilesDto } from '../types/FileDto';
 
 /**
@@ -53,7 +54,7 @@ export default class NotesApiTransport extends AuthorizableTransport {
           case 404:
             return new NotFoundError(errorText);
           default:
-            return new Error(errorText);
+            return new ApiError(errorText, status);
         }
       },
     });

src/presentation/pages/Error.vue

@@ -12,6 +12,12 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useHead } from 'unhead';
+import { useRoute } from 'vue-router';
+import useHeader from '@/application/services/useHeader';
+
+const route = useRoute();
+const { patchOpenedPageByUrl } = useHeader();
 
 const { t, te } = useI18n();
 
@@ -44,6 +50,17 @@ const message = computed(() => {
 
   return t('errors.default');
 });
+
+useHead({
+  title: t(`errors.${props.code}`),
+});
+
+const openPageInfo = {
+  title: t(`errors.${props.code}`),
+  url: route.path,
+};
+
+patchOpenedPageByUrl(route.path, openPageInfo);
 </script>
 
 <style lang="postcss" module>