Improve error handling for menu data fetching and update HTML structure: Enhance error logging in menuDataController, provide user-friendly error messages, and streamline the index.html file by adding new script references while removing an unused image.

src/content/ServiceUnavailableComponent.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="service-unavailable">
+    <h1>Vorübergehend nicht erreichbar</h1>
+    <p>{{ message }}</p>
+    <p class="hint">
+      Es liegt vermutlich ein technisches Problem vor (z.&nbsp;B. die Datenbank). Bitte laden Sie die Seite in einigen Minuten erneut.
+    </p>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+
+export default {
+  name: 'ServiceUnavailableComponent',
+  computed: {
+    ...mapGetters(['menuLoadError']),
+    message() {
+      return (
+        this.menuLoadError ||
+        'Die Website ist vorübergehend nicht vollständig erreichbar.'
+      );
+    },
+  },
+};
+</script>
+
+<style scoped>
+.service-unavailable {
+  padding: 20px;
+}
+.hint {
+  color: #444;
+  margin-top: 1rem;
+}
+</style>

src/main.js

@@ -5,20 +5,6 @@ import store from './store';
 import axios from './axios';
 import './assets/css/editor.css';
 
-// Menü-Daten über das konfigurierte Axios-Backend laden
-async function fetchMenuData() {
-  const response = await axios.get('/menu-data');
-  return response.data;
-}
-
-fetchMenuData()
-  .then(menuData => {
-    store.commit('setMenuData', menuData);
-  })
-  .catch(err => {
-    console.error('Fehler beim Laden der Menü-Daten:', err);
-  });
-
 const app = createApp(AppComponent);
 app.use(router);
 app.use(store);

src/router.js

@@ -60,10 +60,13 @@ router.beforeEach(async (to, from, next) => {
     addForgotPasswordRoute();
     addResetPasswordRoute();
     addAuthLoginRoute();
+    const fallbackMain = store.state.menuLoadError
+      ? 'ServiceUnavailableComponent'
+      : 'DefaultComponent';
     router.addRoute({
       path: '/:pathMatch(.*)*',
       components: {
-        default: loadComponent('DefaultComponent'),
+        default: loadComponent(fallbackMain),
         rightColumn: loadComponent('ImageContent')
       }
     });

src/store/index.js

@@ -15,6 +15,8 @@ export default createStore({
     user: user,
     token: localStorage.getItem('token') || '',
     menuData: [],
+    /** gesetzt, wenn /menu-data fehlschlägt (z. B. DB weg) — nicht mit „Seite nicht gefunden“ verwechseln */
+    menuLoadError: null,
     pageContent: '',
     pageTitle: '',
     selectedPage: '',
@@ -38,6 +40,10 @@ export default createStore({
     },
     setMenuData(state, menuData) {
       state.menuData = menuData;
+      state.menuLoadError = null;
+    },
+    setMenuLoadError(state, message) {
+      state.menuLoadError = message;
     },
     SET_PAGE_CONTENT(state, content) {
       state.pageContent = content;
@@ -59,6 +65,15 @@ export default createStore({
         commit('setMenuData', response.data);
       } catch (error) {
         console.error('Fehler beim Laden der Menü-Daten:', error);
+        const fromApi =
+          error.response?.data &&
+          typeof error.response.data === 'object' &&
+          error.response.data.error;
+        const msg =
+          typeof fromApi === 'string'
+            ? fromApi
+            : 'Die Website ist vorübergehend nicht vollständig erreichbar. Bitte versuchen Sie es später erneut.';
+        commit('setMenuLoadError', msg);
       }
     },
     async loadPageContent({ commit }, link) {
@@ -114,5 +129,6 @@ export default createStore({
     pageContent: state => state.pageContent,
     pageTitle: state => state.pageTitle,
     selectedPage: state => state.selectedPage,
+    menuLoadError: state => state.menuLoadError,
   }
 });