Add reload button when the app errors out (#22462)

Co-authored-by: Hannes Küttner <4376726+hanneskuettner@users.noreply.github.com>
Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch>

.changeset/old-lizards-sleep.md

@@ -0,0 +1,5 @@
+---
+'@directus/app': patch
+---
+
+Added reload button when the app errors out

app/src/app.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { useSystem } from '@/composables/use-system';
 import { useServerStore } from '@/stores/server';
-import { getAssetUrl } from '@/utils/get-asset-url';
 import { generateFavicon } from '@/utils/generate-favicon';
+import { getAssetUrl } from '@/utils/get-asset-url';
 import { useAppStore } from '@directus/stores';
 import { ThemeProvider } from '@directus/themes';
 import { useHead } from '@unhead/vue';
@@ -75,6 +75,10 @@ const customCSS = computed(() => {
 
 const error = computed(() => appStore.error);
 
+const reload = () => {
+	window.location.reload();
+};
+
 useSystem();
 </script>
 
@@ -98,7 +102,9 @@ useSystem();
 			{{ t('unexpected_error_copy') }}
 
 			<template #append>
-				<v-error :error="error" />
+				<v-error class="error" :error="error" />
+
+				<v-button small @click="reload">{{ t('reload_page') }}</v-button>
 			</template>
 		</v-info>
 
@@ -137,4 +143,8 @@ useSystem();
 .fade-leave-to {
 	opacity: 0;
 }
+
+.error {
+	margin-bottom: 24px;
+}
 </style>

app/src/lang/translations/en-US.yaml

@@ -94,6 +94,7 @@ n_files: '{n} Files'
 verified: Verified
 homepage: Homepage
 repository: Repository
+reload_page: Reload Page
 reload_required: Reload Required
 report_an_issue: Report an Issue
 website: Website
@@ -762,7 +763,7 @@ cannot_edit_global_bookmarks: Can't Edit Global Bookmarks
 bookmarks: Bookmarks
 presets: Presets
 unexpected_error: Unexpected Error
-unexpected_error_copy: An unexpected error has occurred. Please try again later.
+unexpected_error_copy: An unexpected error has occurred. Please try again.
 copy_details: Copy Details
 no_app_access: No App Access
 no_app_access_copy: This user isn't allowed to use the admin app.