Add better error handling to CraftPage and add CraftNotImplemented co…

…mponent

.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

lib/components/CraftNotImplemented.vue

@@ -0,0 +1,6 @@
+<template>
+  <h3>Not Implemented</h3>
+  <pre>
+    {{ $attrs }}
+  </pre>
+</template>

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>
 

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);

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];
+} & {};