From 18ba6b44ccc8d5b48a0b72dec4932e2b605eebf5 Mon Sep 17 00:00:00 2001
From: ian <licitdev@gmail.com>
Date: Mon, 13 May 2024 20:29:35 +0800
Subject: [PATCH] Add reload button when the app errors out (#22462)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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      |  5 +++++
 app/src/app.vue                      | 14 ++++++++++++--
 app/src/lang/translations/en-US.yaml |  3 ++-
 3 files changed, 19 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/old-lizards-sleep.md

diff --git a/.changeset/old-lizards-sleep.md b/.changeset/old-lizards-sleep.md
new file mode 100644
index 0000000000..9e0e837060
--- /dev/null
+++ b/.changeset/old-lizards-sleep.md
@@ -0,0 +1,5 @@
+---
+'@directus/app': patch
+---
+
+Added reload button when the app errors out
diff --git a/app/src/app.vue b/app/src/app.vue
index 2e03e38950..fc146e61b5 100644
--- a/app/src/app.vue
+++ b/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>
diff --git a/app/src/lang/translations/en-US.yaml b/app/src/lang/translations/en-US.yaml
index 7d0ac854e2..d54ba6fbf5 100644
--- a/app/src/lang/translations/en-US.yaml
+++ b/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.