Added error handling and handle async component failing

src/components/global_error/global_error.js

@@ -0,0 +1,52 @@
+import ErrorModal from 'src/components/error_modal/error_modal.vue'
+
+import { useInterfaceStore } from 'src/stores/interface.js'
+
+import { mapState, mapActions } from 'pinia'
+
+const GlobalError = {
+  components: {
+    ErrorModal,
+  },
+  computed: {
+    title() {
+      if (this.globalError == null) return null
+      return this.globalError.title && this.$t(this.globalError.title)
+    },
+    content() {
+      if (this.globalError == null) return null
+      if (this.globalError.content) {
+        return this.$t(this.globalError.content, [this.globalError.error])
+      } else {
+        return null
+      }
+    },
+    details() {
+      if (this.globalError == null) return null
+      if (this.globalError.error != null) {
+        return this.globalError.error.toString() + '\n\n' + this.globalError.error.stack
+      } else {
+        return this.globalError.details
+      }
+    },
+    recoverText() {
+      if (this.globalError == null) return null
+      if (this.globalError.recoverText == null) return null
+      return this.$t(this.globalError.recoverText)
+    },
+    ...mapState(useInterfaceStore, ['globalError']),
+  },
+  methods: {
+    clear() {
+      this.globalError.clear?.()
+      this.clearGlobalError()
+    },
+    recover() {
+      this.globalError.recover?.()
+      this.clearGlobalError()
+    },
+    ...mapActions(useInterfaceStore, ['clearGlobalError']),
+  },
+}
+
+export default GlobalError

src/components/global_error/global_error.vue

@@ -0,0 +1,23 @@
+<template>
+  <teleport to="#modal">
+    <ErrorModal
+      v-if="globalError"
+      :error="globalError.error"
+      :title="title"
+      :recover-text="recoverText"
+      @recover="recover"
+      @clear="clear"
+    >
+      <template v-if="content">
+        <p>{{ content }}</p>
+
+        <details v-if="details">
+          <summary>{{ $t('general.generic_error_details') }}</summary>
+          <code class="stack pre" v-text="details" />
+        </details>
+      </template>
+    </ErrorModal>
+  </teleport>
+</template>
+
+<script src="./global_error.js"></script>