From 462dd0092261526fa9383cbadd6c91658cf8ed73 Mon Sep 17 00:00:00 2001
From: samuelreichor <samuelreichor@gmail.com>
Date: Thu, 7 Nov 2024 22:52:30 +0100
Subject: [PATCH] Add better error handling to CraftPage and add
 CraftNotImplemented component

---
 .changeset/itchy-swans-eat.md          |  5 +++++
 lib/components/CraftNotImplemented.vue |  6 ++++++
 lib/components/CraftPage.vue           | 30 +++++++++++++++-----------
 lib/main.ts                            |  2 ++
 lib/types.ts                           | 16 +++++++++++---
 5 files changed, 44 insertions(+), 15 deletions(-)
 create mode 100644 .changeset/itchy-swans-eat.md
 create mode 100644 lib/components/CraftNotImplemented.vue

diff --git a/.changeset/itchy-swans-eat.md b/.changeset/itchy-swans-eat.md
new file mode 100644
index 0000000..ccffb53
--- /dev/null
+++ b/.changeset/itchy-swans-eat.md
@@ -0,0 +1,5 @@
+---
+'vue-craftcms': patch
+---
+
+Add better error handling in craft page component and add not implemented component
diff --git a/lib/components/CraftNotImplemented.vue b/lib/components/CraftNotImplemented.vue
new file mode 100644
index 0000000..7251be9
--- /dev/null
+++ b/lib/components/CraftNotImplemented.vue
@@ -0,0 +1,6 @@
+<template>
+  <h3>Not Implemented</h3>
+  <pre>
+    {{ $attrs }}
+  </pre>
+</template>
diff --git a/lib/components/CraftPage.vue b/lib/components/CraftPage.vue
index 0e7f9df..e77ca51 100644
--- a/lib/components/CraftPage.vue
+++ b/lib/components/CraftPage.vue
@@ -15,36 +15,42 @@
   });
 
   function getCurrentSectionHandle(): string {
-    if (!props.content) {
-      throw new Error('Content is missing.');
-    }
-
     if (!('sectionHandle' in props.content)) {
-      throw new Error('props.content has no key named sectionHandle');
+      return '404';
     }
-
     return props.content.sectionHandle;
   }
 
   function getCurrentPage() {
     const currentSectionHandle = getCurrentSectionHandle();
-    if (!currentSectionHandle) {
-      throw new Error('Invalid section handle.');
+    if (currentSectionHandle === '404') {
+      return getErrorPage('404');
     }
-
     if (!props.config || !('pages' in props.config)) {
-      throw new Error('Configuration is missing or invalid.');
+      return getErrorPage('500');
     }
 
     const pageComponent = props.config.pages[currentSectionHandle];
     if (!pageComponent) {
-      console.error(`No mapped page found for page handle: ${currentSectionHandle}`);
-      return null;
+      return getErrorPage('404');
     }
 
     return pageComponent;
   }
 
+  function getErrorPage(errorCode: '404' | '500') {
+    const pageKey = `Page${errorCode}`;
+    if (props.config && props.config.pages[pageKey]) {
+      return props.config.pages[pageKey];
+    }
+
+    if (props.config && props.config.pages['Error']) {
+      return props.config.pages['Error'];
+    }
+
+    throw new Error(`Error: No page component mapped for error code: ${errorCode}`);
+  }
+
   provide('config', props.config);
 </script>
 
diff --git a/lib/main.ts b/lib/main.ts
index 84cb88f..47bab5a 100644
--- a/lib/main.ts
+++ b/lib/main.ts
@@ -1,5 +1,6 @@
 import CraftPage from './components/CraftPage.vue';
 import CraftArea from './components/CraftArea.vue';
+import CraftNotImplemented from './components/CraftNotImplemented.vue';
 import type { App } from 'vue';
 import type { CraftCmsOptions } from './types';
 
@@ -18,6 +19,7 @@ export const CraftCms = {
     if (options.registerComponents) {
       app.component('CraftPage', CraftPage);
       app.component('CraftArea', CraftArea);
+      app.component('CraftNotImplemented', CraftNotImplemented);
     }
 
     app.provide('CraftCmsOptions', options);
diff --git a/lib/types.ts b/lib/types.ts
index 7bcc819..9666a4a 100644
--- a/lib/types.ts
+++ b/lib/types.ts
@@ -1,9 +1,15 @@
 import type { DefineComponent } from 'vue';
 
 export type Config = {
-  pages: {
-    [key: string]: Record<string, DefineComponent>;
-  };
+  pages: Prettify<
+    {
+      [key: string]: Record<string, DefineComponent>;
+    } & {
+      Page404?: Record<string, DefineComponent>;
+      Page500?: Record<string, DefineComponent>;
+      Error?: Record<string, DefineComponent>;
+    }
+  >;
   components: {
     [key: string]: Record<string, DefineComponent>;
   };
@@ -14,3 +20,7 @@ export type CraftCmsOptions = {
   registerComponents: boolean;
   debug: boolean;
 };
+
+type Prettify<T> = {
+  [K in keyof T]: T[K];
+} & {};