feat: handle resource 404

Fixes #226

Author: arildm

CHANGELOG.md

@@ -18,6 +18,7 @@ As this project is a user-facing application, the places in the semantic version
 - Sort texts by filename/size [#46](https://github.com/spraakbanken/mink-frontend/issues/46)
 - View result file [#170](https://github.com/spraakbanken/mink-frontend/issues/170)
 - Explain export file types [#192](https://github.com/spraakbanken/mink-frontend/issues/192)
+- Handle resource not found [#226](https://github.com/spraakbanken/mink-frontend/issues/226)
 - List allowed source file extensions on upload area [#234](https://github.com/spraakbanken/mink-frontend/issues/234)
 
 ## [1.16.1](https://github.com/spraakbanken/mink-frontend/releases/tag/v1.16.1) (2026-02-16)

src/components/notfound.composable.ts

@@ -0,0 +1,25 @@
+import { isAxiosError } from "axios";
+import { useRoute, useRouter } from "vue-router";
+
+export default function useNotFound() {
+  const router = useRouter();
+  const route = useRoute();
+
+  function showNotFoundPage() {
+    router.push({
+      name: "notfound",
+      params: { pathMatch: route.path.substring(1).split("/") },
+    });
+  }
+
+  return {
+    /** Handle an Axios 404 error, rethrow others */
+    handle404(reason: unknown) {
+      if (isAxiosError(reason) && reason.status == 404) showNotFoundPage();
+      else throw reason;
+    },
+
+    /** Redirect to the "Page not found" route without changing the URL */
+    showNotFoundPage,
+  };
+}

src/corpus/CorpusView.vue

@@ -1,12 +1,21 @@
 <script setup lang="ts">
-import { useCorpus } from "./corpus.composable";
 import useCorpusIdParam from "@/corpus/corpusIdParam.composable";
 import PageTitle from "@/components/PageTitle.vue";
 import useLocale from "@/i18n/locale.composable";
+import { useCorpusStore } from "@/store/corpus.store";
+import { computedAsync } from "@vueuse/core";
+import useMessenger from "@/message/messenger.composable";
+import useNotFound from "@/components/notfound.composable";
 
 const corpusId = useCorpusIdParam();
-const { corpus } = useCorpus(corpusId);
+const { loadCorpus } = useCorpusStore();
 const { th } = useLocale();
+const { alertError } = useMessenger();
+const { handle404 } = useNotFound();
+
+const corpus = computedAsync(() =>
+  loadCorpus(corpusId).catch(handle404).catch(alertError),
+);
 </script>
 
 <template>
@@ -22,5 +31,5 @@ const { th } = useLocale();
       {{ th(corpus?.name) || corpusId }}
     </template>
   </PageTitle>
-  <router-view />
+  <router-view v-if="corpus" />
 </template>

src/metadata/MetadataView.vue

@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import { computed } from "vue";
 import useMetadata from "@/metadata/metadata.composable";
-import { useResourceStore } from "@/store/resource.store";
 import useResourceIdParam from "@/resource/resourceIdParam.composable";
 import PageTitle from "@/components/PageTitle.vue";
 import useMessenger from "@/message/messenger.composable";
+import { computedAsync } from "@vueuse/core";
+import useNotFound from "@/components/notfound.composable";
 
-const resourceStore = useResourceStore();
 const resourceId = useResourceIdParam();
 const { loadMetadata } = useMetadata(resourceId);
 const { alertError } = useMessenger();
+const { handle404 } = useNotFound();
 
-const metadata = computed(() => resourceStore.resources[resourceId]);
-
-loadMetadata().catch(alertError);
+const metadata = computedAsync(() =>
+  loadMetadata().catch(handle404).catch(alertError),
+);
 </script>
 
 <template>

src/metadata/metadata.composable.ts

@@ -1,6 +1,7 @@
 import api from "@/api/api";
 import { useResourceStore } from "@/store/resource.store";
 import useSpin from "@/spin/spin.composable";
+import type { Metadata } from "@/store/resource.types";
 
 /** Tracks fully loaded resources, so subsequent load calls can be skipped. */
 const isFresh: Record<string, true> = {};
@@ -10,20 +11,22 @@ export default function useMetadata(resourceId: string) {
   const { spin } = useSpin();
 
   /** Load data about a metadata and store it. */
-  async function loadMetadata(): Promise<void> {
+  async function loadMetadata(): Promise<Metadata | undefined> {
     // Make sure the resource has an entry in the store.
-    await resourceStore.loadResource(resourceId);
+    const resource = (await resourceStore.loadResource(resourceId)) as Metadata;
 
     // Skip if already loaded.
-    if (isFresh[resourceId]) return;
-
-    // Load remaining essential info, unless removed.
-    if (resourceId in resourceStore.metadatas) {
-      await loadYaml();
+    if (!isFresh[resourceId]) {
+      // Load remaining essential info, unless removed.
+      if (resourceId in resourceStore.metadatas) {
+        await loadYaml();
+      }
     }
 
     // Remember to skip loading next time.
     isFresh[resourceId] = true;
+
+    return resource;
   }
 
   /** Load and store the metadata yaml string. */

src/resource/ResourceRedirectView.vue

@@ -4,11 +4,13 @@ import useResourceIdParam from "@/resource/resourceIdParam.composable";
 import { useResourceStore } from "@/store/resource.store";
 import SpinIndicator from "@/spin/SpinIndicator.vue";
 import useMessenger from "@/message/messenger.composable";
+import useNotFound from "@/components/notfound.composable";
 
 const router = useRouter();
 const resourceId = useResourceIdParam();
 const resourceStore = useResourceStore();
 const { alertError } = useMessenger();
+const { handle404 } = useNotFound();
 
 // Load resource and immediately redirect according to its type.
 resourceStore
@@ -17,6 +19,7 @@ resourceStore
     if (resource) router.push(`/library/${resource.type}/${resourceId}`);
     else router.push("/library");
   })
+  .catch(handle404)
   .catch(alertError);
 </script>