show error page if config.json is not valid

Author: sudo87

ui/src/main.js

@@ -15,6 +15,7 @@
 // specific language governing permissions and limitations
 // under the License.
 
+import { createApp, h } from 'vue'
 import { vueApp, vueProps } from './vue-app'
 import router from './router'
 import store from './store'
@@ -60,20 +61,50 @@ vueApp.use(imagesUtilPlugin)
 vueApp.use(extensions)
 vueApp.use(directives)
 
-fetch('config.json?ts=' + Date.now()).then(response => response.json()).then(config => {
-  vueProps.$config = config
-  let basUrl = config.apiBase
-  if (config.multipleServer) {
-    basUrl = (config.servers[0].apiHost || '') + config.servers[0].apiBase
+const renderError = (err) => {
+  console.error('Fatal error during app initialization: ', err)
+  const ErrorComponent = {
+    render: () => h(
+      'div',
+      { style: 'font-family: sans-serif; text-align: center; padding: 2rem;' },
+      [
+        h('h2', { style: 'color: #ff4d4f;' }, 'We\'re experiencing a problem'),
+        h('p', 'The application could not be loaded due to a configuration issue. Please try again later.'),
+        h('details', { style: 'margin-top: 20px;' }, [
+          h('summary', { style: 'cursor: pointer;' }, 'Technical details'),
+          h('pre', {
+            style: 'text-align: left; display: inline-block; margin-top: 10px;'
+          }, 'Missing or malformed config.json. Please ensure the file is present, accessible, and contains valid JSON. Check the browser console for more information.')
+        ])
+      ]
+    )
   }
+  createApp(ErrorComponent).mount('#app')
+}
 
-  vueProps.axios.defaults.baseURL = basUrl
+fetch('config.json?ts=' + Date.now())
+  .then(response => {
+    if (!response.ok) {
+      throw new Error(`Failed to fetch config.json: ${response.status} ${response.statusText}`)
+    }
+    return response.json()
+  })
+  .then(config => {
+    vueProps.$config = config
+    let baseUrl = config.apiBase
+    if (config.multipleServer) {
+      baseUrl = (config.servers[0].apiHost || '') + config.servers[0].apiBase
+    }
+
+    vueProps.axios.defaults.baseURL = baseUrl
 
-  loadLanguageAsync().then(() => {
-    vueApp.use(store)
-      .use(router)
-      .use(i18n)
-      .use(bootstrap)
-      .mount('#app')
+    loadLanguageAsync().then(() => {
+      vueApp.use(store)
+        .use(router)
+        .use(i18n)
+        .use(bootstrap)
+        .mount('#app')
+    })
+  }).catch(error => {
+    renderError(error)
   })
-})