fix(front): fix initialization error on dev setup

front/src/App.vue

@@ -8,6 +8,7 @@ import { useQueue } from '~/composables/audio/queue'
 import { useStore } from '~/store'
 
 import onKeyboardShortcut from '~/composables/onKeyboardShortcut'
+import useLogger from '~/composables/useLogger'
 
 const ChannelUploadModal = defineAsyncComponent(() => import('~/components/channels/UploadModal.vue'))
 const PlaylistModal = defineAsyncComponent(() => import('~/components/playlists/PlaylistModal.vue'))
@@ -20,6 +21,9 @@ const AudioPlayer = defineAsyncComponent(() => import('~/components/audio/Player
 const Sidebar = defineAsyncComponent(() => import('~/components/Sidebar.vue'))
 const Queue = defineAsyncComponent(() => import('~/components/Queue.vue'))
 
+const logger = useLogger()
+logger.debug('App setup()')
+
 const store = useStore()
 
 // Tracks
@@ -77,27 +81,15 @@ store.dispatch('auth/fetchUser')
 </script>
 
 <template>
-  <div
+  <div :key="store.state.instance.instanceUrl" :class="{
-    :key="store.state.instance.instanceUrl"
+    'has-bottom-player': tracks.length > 0,
-    :class="{
+    'queue-focused': store.state.ui.queueFocused
-      'has-bottom-player': tracks.length > 0,
+  }">
-      'queue-focused': store.state.ui.queueFocused
-    }"
-  >
     <!-- here, we display custom stylesheets, if any -->
-    <link
+    <link v-for="url in customStylesheets" :key="url" rel="stylesheet" property="stylesheet" :href="url">
-      v-for="url in customStylesheets"
-      :key="url"
-      rel="stylesheet"
-      property="stylesheet"
-      :href="url"
-    >
 
-    <sidebar
+    <sidebar :width="width" @show:set-instance-modal="showSetInstanceModal = !showSetInstanceModal"
-      :width="width"
+      @show:shortcuts-modal="toggleShortcutsModal" />
-      @show:set-instance-modal="showSetInstanceModal = !showSetInstanceModal"
-      @show:shortcuts-modal="toggleShortcutsModal"
-    />
     <set-instance-modal v-model:show="showSetInstanceModal" />
     <service-messages />
     <transition name="queue">

front/src/init/instance.ts

@@ -3,22 +3,30 @@ import type { InitModule } from '~/types'
 
 import { whenever } from '@vueuse/core'
 
+import useLogger from '~/composables/useLogger'
+
 import axios from 'axios'
 
+const logger = useLogger()
+
 export const install: InitModule = async ({ store, router }) => {
   await store.dispatch('instance/fetchFrontSettings')
 
   const fetchNodeInfo = async () => {
-    const [{ data }] = await Promise.all([
+    try {
-      axios.get<NodeInfo>('instance/nodeinfo/2.0/'),
+      const [{ data }] = await Promise.all([
-      store.dispatch('instance/fetchSettings')
+        axios.get<NodeInfo>('instance/nodeinfo/2.0/'),
-    ])
+        store.dispatch('instance/fetchSettings')
+      ])
 
-    if (data.metadata.library.music?.hours) {
+      if (data.metadata.library.music?.hours) {
-      data.metadata.library.music.hours = Math.floor(data.metadata.library.music.hours)
+        data.metadata.library.music.hours = Math.floor(data.metadata.library.music.hours)
+      }
+
+      store.commit('instance/nodeinfo', data)
+    } catch (error) {
+      logger.error('Error while fetching node info', error)
     }
-
-    store.commit('instance/nodeinfo', data)
   }
 
   whenever(() => store.state.instance.instanceUrl, fetchNodeInfo)

front/src/main.ts

@@ -22,11 +22,11 @@ logger.debug('Environment variables:', import.meta.env)
 const app = createApp({
   name: 'Root',
   data: () => ({ ready: false }),
-  mounted () {
+  mounted() {
     this.ready = true
     logger.info('Everything loaded!')
   },
-  render () {
+  render() {
     if (this.ready) {
       return h(defineAsyncComponent(() => import('~/App.vue')))
     }
@@ -50,6 +50,7 @@ const moduleContext: InitModuleContext = {
 //       and that the instance url is set before any requests are made
 const IMPORTANT_MODULES_QUEUE = ['axios', 'instance']
 const waitForImportantModules = async () => {
+  logger.debug('Loading important modules')
   for (const moduleName of IMPORTANT_MODULES_QUEUE) {
     const path = `./init/${moduleName}.ts`
     if (!(path in modules)) {
@@ -57,16 +58,24 @@ const waitForImportantModules = async () => {
       continue
     }
 
-    await modules[path].install?.(moduleContext)
+    await modules[path].install?.(moduleContext)?.catch((error: Error) => {
+      logger.error(`Failed to load important module: ${path}`, error)
+      throw error
+    })
+
     delete modules[path]
   }
 }
 
 waitForImportantModules()
+  .then(() => logger.debug('Loading rest of the modules'))
   // NOTE: We load the modules in parallel
   .then(() => Promise.all(Object.values(modules).map(module => module.install?.(moduleContext))))
   .catch(error => logger.error('Failed to load modules:', error))
   // NOTE: We need to mount the app after all modules are loaded
-  .finally(() => app.mount('#app'))
+  .finally(() => {
+    logger.debug('Mounting app')
+    app.mount('#app')
+  })
 
 // TODO (wvffle): Rename filters from useSharedLabels to filters from backend