Add error messagen when network communication fails

src/BakrepApi.ts

@@ -33,7 +33,10 @@ class BakrepApiImpl implements BakrepApi {
   }
 
   toJson(r: Response): Promise<any> {
-    if (!r.ok) throw r.text().then((t) => Promise.reject(t));
+    if (!r.ok)
+      return r
+        .text()
+        .then((t) => Promise.reject(`${r.status}: ${r.statusText}\n${t}`));
     return r.text().then(json5.parse);
   }
 

src/PageState.ts

@@ -11,6 +11,8 @@ export enum State {
 
 export interface PageState {
   state: State;
+  message: string | undefined;
+  setError(message: string): void;
   setState(state: State): void;
   loading: boolean;
   loaded: boolean;
@@ -21,14 +23,15 @@ export interface PageState {
 
 export default function usePageState(): Ref<PageState> {
   const state: Ref<State> = ref(State.Main);
+  const message: Ref<undefined | string> = ref();
   const loading = computed(
-    () => state.value === "loading" || state.value === "exporting"
+    () => state.value === "loading" || state.value === "exporting",
   );
   const loaded = computed(
     () =>
       state.value === "main" ||
       state.value === "saving" ||
-      state.value === "saved"
+      state.value === "saved",
   );
 
   const saved = computed(() => state.value === "saved");
@@ -37,7 +40,12 @@ export default function usePageState(): Ref<PageState> {
 
   const pageState = ref({
     state: state,
+    message: message,
     setState: (newState: State) => (state.value = newState),
+    setError: (newMessage: string) => {
+      message.value = newMessage;
+      state.value = State.Error;
+    },
     loading: loading,
     loaded: loaded,
     saved: saved,

src/components/Loading.vue

@@ -4,6 +4,9 @@
       <CenteredLargeSpinner />
     </slot>
   </template>
+  <template v-else-if="state.error">
+    <div class="alert alert-danger">Error: {{ state.message }}</div>
+  </template>
   <template v-else>
     <slot name="content" />
     <slot />

src/views/search/SearchView.vue

@@ -34,10 +34,13 @@ const ordering: Ref<SortOption[]> = ref([{ field: "id", ord: "asc" }]);
 const searchinfo: Ref<SearchInfo> = ref({ fields: [] });
 function init() {
   pageState.value.setState(State.Loading);
-  api.searchinfo().then((r) => {
-    searchinfo.value = r;
-    pageState.value.setState(State.Main);
-  });
+  api
+    .searchinfo()
+    .then((r) => {
+      searchinfo.value = r;
+      pageState.value.setState(State.Main);
+    })
+    .catch((err) => pageState.value.setError(err));
 }
 
 function searchinfo2querybuilderrules(f: SearchInfoField): Rule {
@@ -103,7 +106,8 @@ function search(offset = 0) {
       searchState.value.setState(State.Main);
       pagination.value.offset = r.offset;
       pagination.value.total = r.total;
-    });
+    })
+    .catch((err) => pageState.value.setError(err));
 }
 
 const positionInResults: Ref<PositionInResult> = computed(() =>

src/views/show-results/ResultView.vue

@@ -1,25 +1,24 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, type Ref } from "vue";
-import usePageState, { State } from "@/PageState";
+import DownloadLinks from "@/components/DownloadLinks.vue";
 import Loading from "@/components/Loading.vue";
 import Pane from "@/components/Pane.vue";
-import DownloadLinks from "@/components/DownloadLinks.vue";
+import usePageState, { State } from "@/PageState";
+import { computed, onMounted, ref, type Ref } from "vue";
 
 import { useApi } from "@/BakrepApi";
-import type { Dataset } from "@/model/Dataset";
-import { useRoute } from "vue-router";
-import DatasetSummary from "./DatasetSummary.vue";
-import GtdbtkTaxonomy from "./GtdbtkTaxonomy.vue";
-import DisplayAssembly from "./DisplayAssembly.vue";
 import type { BaktaResult } from "@/model/BaktaResults";
-import type { GtdbtkResult } from "@/model/GtdbtkResult";
 import type { CheckmResult } from "@/model/CheckmResults";
-import FeatureTable from "./FeatureTable.vue";
+import type { Dataset } from "@/model/Dataset";
+import type { GtdbtkResult } from "@/model/GtdbtkResult";
+import type { MlstResult } from "@/model/MlstResults";
+import { useRoute } from "vue-router";
 import BaktaAnnotationTable from "./bakta/BaktaAnnotationTable.vue";
 import BaktaGenomeViewer from "./bakta/BaktaGenomeViewer.vue";
 import BaktaStats from "./bakta/BaktaStats.vue";
-import CenteredLargeSpinner from "@/components/CenteredLargeSpinner.vue";
-import type { MlstResult } from "@/model/MlstResults";
+import DatasetSummary from "./DatasetSummary.vue";
+import DisplayAssembly from "./DisplayAssembly.vue";
+import FeatureTable from "./FeatureTable.vue";
+import GtdbtkTaxonomy from "./GtdbtkTaxonomy.vue";
 const route = useRoute();
 const id = computed(() => route.params.id as string);
 const api = useApi();
@@ -31,18 +30,21 @@ const checkmResult: Ref<CheckmResult | undefined> = ref();
 const mlstResult: Ref<MlstResult | undefined> = ref();
 
 function loadData() {
-  return api.getDataset(id.value).then((x) => {
-    dataset.value = x;
-    return Promise.all([
-      api.fetchBaktaResult(x).then((r) => (baktaResult.value = r)),
-      api.fetchGtdbtkResult(x).then((r) => (gtdbtkResult.value = r)),
-      api.fetchCheckmResult(x).then((r) => (checkmResult.value = r)),
-      api.fetchMlstResult(x).then((r) => (mlstResult.value = r)),
-    ]).then(() => {
-      active_tab.value = "summary";
-      state.value.setState(State.Main);
-    });
-  });
+  return api
+    .getDataset(id.value)
+    .then((x) => {
+      dataset.value = x;
+      return Promise.all([
+        api.fetchBaktaResult(x).then((r) => (baktaResult.value = r)),
+        api.fetchGtdbtkResult(x).then((r) => (gtdbtkResult.value = r)),
+        api.fetchCheckmResult(x).then((r) => (checkmResult.value = r)),
+        api.fetchMlstResult(x).then((r) => (mlstResult.value = r)),
+      ]).then(() => {
+        active_tab.value = "summary";
+        state.value.setState(State.Main);
+      });
+    })
+    .catch((err) => state.value.setError(err));
 }
 
 onMounted(loadData);