From f49326f8dfe72f5c6331e4e7c4e86413211c475e Mon Sep 17 00:00:00 2001
From: Flycro <flycro@live.de>
Date: Sat, 21 Feb 2026 14:04:01 +0100
Subject: [PATCH] feat: add error boundary component and improve auth layout

---
 .../js/components/common/ErrorBoundary.vue    | 47 +++++++++++++++++++
 resources/js/components/common/Logo.vue       |  7 ++-
 resources/js/layouts/AuthLayout.vue           |  7 ++-
 3 files changed, 57 insertions(+), 4 deletions(-)
 create mode 100644 resources/js/components/common/ErrorBoundary.vue

diff --git a/resources/js/components/common/ErrorBoundary.vue b/resources/js/components/common/ErrorBoundary.vue
new file mode 100644
index 0000000..a4399dd
--- /dev/null
+++ b/resources/js/components/common/ErrorBoundary.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { onErrorCaptured, ref } from 'vue'
+
+const hasError = ref(false)
+const errorMessage = ref('')
+const isDev = import.meta.env.DEV
+
+onErrorCaptured((err) => {
+  hasError.value = true
+  errorMessage.value = err instanceof Error ? err.message : String(err)
+
+  if (import.meta.env.DEV) {
+    console.error('[ErrorBoundary] Caught error:', err)
+  }
+
+  // Prevent error from propagating further
+  return false
+})
+
+function retry() {
+  hasError.value = false
+  errorMessage.value = ''
+}
+</script>
+
+<template>
+  <div v-if="hasError" class="flex flex-col items-center justify-center py-12 px-4 text-center">
+    <UIcon name="i-lucide-alert-triangle" class="size-12 text-warning mb-4" />
+    <h3 class="text-lg font-semibold text-default mb-2">
+      Something went wrong
+    </h3>
+    <p class="text-sm text-muted mb-4 max-w-md">
+      An unexpected error occurred. Please try again.
+    </p>
+    <p v-if="isDev && errorMessage" class="text-xs text-error mb-4 max-w-lg font-mono bg-error/5 p-2 rounded">
+      {{ errorMessage }}
+    </p>
+    <UButton
+      label="Try Again"
+      icon="i-lucide-refresh-cw"
+      color="primary"
+      variant="outline"
+      @click="retry"
+    />
+  </div>
+  <slot v-else />
+</template>
diff --git a/resources/js/components/common/Logo.vue b/resources/js/components/common/Logo.vue
index e9c2db9..d9b6001 100644
--- a/resources/js/components/common/Logo.vue
+++ b/resources/js/components/common/Logo.vue
@@ -1,19 +1,22 @@
 <script setup lang="ts">
+import { Link } from '@inertiajs/vue3'
 import { useAuth } from '@/composables/useAuth'
 
 withDefaults(defineProps<{
   size?: 'sm' | 'md' | 'lg'
   showText?: boolean
+  linkToHome?: boolean
 }>(), {
   size: 'md',
   showText: true,
+  linkToHome: true,
 })
 
 const { config } = useAuth()
 </script>
 
 <template>
-  <div class="flex items-center gap-3">
+  <component :is="linkToHome ? Link : 'div'" :href="linkToHome ? '/' : undefined" class="flex items-center gap-3">
     <!--
       Replace this placeholder with your actual logo:
       <img src="/images/logo.svg" alt="Logo" :class="iconSizeClass">
@@ -40,5 +43,5 @@ const { config } = useAuth()
     >
       {{ config.appName }}
     </span>
-  </div>
+  </component>
 </template>
diff --git a/resources/js/layouts/AuthLayout.vue b/resources/js/layouts/AuthLayout.vue
index 760afa3..1917f20 100644
--- a/resources/js/layouts/AuthLayout.vue
+++ b/resources/js/layouts/AuthLayout.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import ErrorBoundary from '@/components/common/ErrorBoundary.vue'
 import Logo from '@/components/common/Logo.vue'
 </script>
 
@@ -9,11 +10,13 @@ import Logo from '@/components/common/Logo.vue'
         <UPageCard :ui="{ wrapper: 'flex flex-col flex-1 items-center', header: 'mb-4' }">
           <template #header>
             <slot name="logo">
-              <Logo />
+              <Logo size="lg" :link-to-home="false" />
             </slot>
           </template>
 
-          <slot />
+          <ErrorBoundary>
+            <slot />
+          </ErrorBoundary>
         </UPageCard>
       </div>
     </div>