Error handling improvements & fixes

steel97 · Jan 30, 2024 · 7413897 · 7413897
1 parent 9810f37
commit 7413897
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 31 deletions.
diff --git a/src/app.vue b/src/app.vue
@@ -1,18 +1,20 @@
 <template>
-  <NuxtLayout>
-    <div class="text-gray-700">
-      <div class="fg"></div>
-      <AppHeader />
-      <main class="m-container mx-auto max-w-5xl">
-        <transition name="fade" mode="out-in">
-          <div :key="getKeyForRoute()">
-            <NuxtPage />
-          </div>
-        </transition>
-      </main>
-      <AppFooter />
-    </div>
-  </NuxtLayout>
+  <div>
+    <NuxtLayout>
+      <div class="text-gray-700">
+        <div class="fg"></div>
+        <AppHeader />
+        <main class="m-container mx-auto max-w-5xl">
+          <transition name="fade" mode="out-in">
+            <div :key="getKeyForRoute()">
+              <NuxtPage />
+            </div>
+          </transition>
+        </main>
+        <AppFooter />
+      </div>
+    </NuxtLayout>
+  </div>
 </template>
 
 <script setup lang="ts">

diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
@@ -11,7 +11,7 @@
                                                                                 py-2
                                                                                 md:py-3
                                                                               ">
-        <NuxtLink :to="localePath('/')" :aria-label="t('Core.Header.Logo')">
+        <NuxtLink @click="navTo('/')" :aria-label="t('Core.Header.Logo')">
           <img src="/images/logo.png" width="96" height="auto" :alt="t('Core.Header.Logo')" />
         </NuxtLink>
         <div class="-mr-2 -my-2 md:hidden">
@@ -84,7 +84,8 @@
           </li>
           <ol class="rounded bg-white p-2 mt-2" v-show="menuLocaleOpened">
             <li v-for="locale in getLocales()" :key="locale.code">
-              <nuxt-link :to="switchLocalePath(locale.code)" class="flex items-center hover:text-blue-600 text-blue-800">
+              <nuxt-link :to="switchLocalePath(locale.code)" @click="clearError"
+                class="flex items-center hover:text-blue-600 text-blue-800">
                 <div class="rounded-sm drop-shadow mr-2 locale" :class="'locale-' + locale.code"></div>
                 {{ locale.name }}
               </nuxt-link>
@@ -105,6 +106,10 @@ export interface ILocale {
   name: string;
 }
 
+const props = defineProps({
+  shouldClearError: Boolean
+});
+
 const { t, locales, locale, localeProperties } = useI18n();
 const switchLocalePath = useSwitchLocalePath();
 const localePath = useLocalePath();
@@ -113,9 +118,19 @@ const initialized = ref(false);
 const menuOpened = ref(false);
 const menuHeight = ref("0px");
 const menuLocaleOpened = ref(false);
+const router = useRouter();
 
 onMounted(() => (initialized.value = true));
 
+const navTo = (basePath: string) => {
+  const path = localePath(basePath);
+  if (props.shouldClearError) {
+    clearError({ redirect: path });
+  } else {
+    router.replace(path);
+  }
+}
+
 const getCurrentLocale = () => {
   return {
     code: locale.value,

diff --git a/src/components/Error.vue b/src/components/Error.vue
@@ -13,7 +13,7 @@
       {{ t("Errors." + errLocale + ".Description") }}
       <slot />
     </div>
-    <NuxtLink :to="localePath('/')" class="
+    <NuxtLink :to="localePath('/')" @click="clearError" class="
                                 uppercase
                                 block
                                 text-center text-sky-300
@@ -26,10 +26,12 @@
 </template>
 
 <script setup lang="ts">
+import type { NuxtError } from "#app";
+
 const { t } = useI18n();
 const localePath = useLocalePath();
 const props = defineProps({
-  error: Object
+  error: Object as () => NuxtError
 });
 
 const route = useRoute();

diff --git a/src/error.vue b/src/error.vue
@@ -1,20 +1,24 @@
 <template>
-    <NuxtLayout>
-        <div class="text-gray-700">
-            <div class="fg"></div>
-            <AppHeader />
-            <main class="m-container mx-auto max-w-5xl">
-                <transition name="fade" mode="out-in">
-                    <Error :error="error" />
-                </transition>
-            </main>
-            <AppFooter />
-        </div>
-    </NuxtLayout>
+    <div>
+        <NuxtLayout>
+            <div class="text-gray-700">
+                <div class="fg"></div>
+                <AppHeader />
+                <main class="m-container mx-auto max-w-5xl">
+                    <transition name="fade" mode="out-in">
+                        <Error :error="error" />
+                    </transition>
+                </main>
+                <AppFooter />
+            </div>
+        </NuxtLayout>
+    </div>
 </template>
 
 <script lang="ts" setup>
+import type { NuxtError } from "#app";
+
 const props = defineProps({
-    error: Object
+    error: Object as () => NuxtError
 });
 </script>