From 1df3df0f326e5d24360e90f3e4b83ccc7a6aa8a8 Mon Sep 17 00:00:00 2001
From: Tarek Hamaoui <tarek.hamaoui@digitalservice.bund.de>
Date: Wed, 25 Dec 2024 00:03:53 +0100
Subject: [PATCH 01/14] feat: improve error handling and empty state handling
 for announcements

- Updated apiService to remove blanket 404 redirection logic
- Adjusted announcements page to handle empty states
- Added Playwright tests for empty array scenario

RISDEV-4872
---
 ...to-amending-laws-page-and-test-content.spec.ts | 15 +++++++++++++++
 frontend/src/services/apiService.ts               | 10 ----------
 .../src/views/amending-laws/AmendingLaws.view.vue |  4 ++++
 3 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/frontend/e2e/redirect-to-amending-laws-page-and-test-content.spec.ts b/frontend/e2e/redirect-to-amending-laws-page-and-test-content.spec.ts
index 869bb65f1..634efb6ad 100644
--- a/frontend/e2e/redirect-to-amending-laws-page-and-test-content.spec.ts
+++ b/frontend/e2e/redirect-to-amending-laws-page-and-test-content.spec.ts
@@ -45,4 +45,19 @@ test.describe("Redirect and start page content", () => {
       }),
     ).toBeVisible()
   })
+
+  test("should display a no data message when the API returns an empty array", async ({
+    page,
+  }) => {
+    await page.route("**/api/v1/announcements", (route) => {
+      route.fulfill({
+        status: 200,
+        body: JSON.stringify([]),
+      })
+    })
+
+    await page.goto("/")
+
+    await expect(page.getByText("Keine Verkündungen gefunden.")).toBeVisible()
+  })
 })
diff --git a/frontend/src/services/apiService.ts b/frontend/src/services/apiService.ts
index 55dc2708e..176aad7f7 100644
--- a/frontend/src/services/apiService.ts
+++ b/frontend/src/services/apiService.ts
@@ -1,5 +1,4 @@
 import { getFallbackError } from "@/lib/errorResponseMapper"
-import routerInstance from "@/router"
 import { createFetch, UseFetchReturn } from "@vueuse/core"
 
 /**
@@ -59,15 +58,6 @@ export const useApiFetch = createFetch({
     },
 
     onFetchError(fetchContext) {
-      // We'll probably remove this again because we don't want a blanket
-      // redirect to 404 if anything goes wrong.
-      if (fetchContext.response?.status === 404 && routerInstance) {
-        routerInstance.push({ name: "NotFound" }).catch((err) => {
-          if (err.name !== "NavigationDuplicated") {
-            console.error("Failed to navigate to 404 page:", err)
-          }
-        })
-      }
       // this error is sometimes throws when previous requests are automatically aborted as
       // some of the data changed and refetch is true. It seems to only be throws when the request
       // is aborted before it was actually send.
diff --git a/frontend/src/views/amending-laws/AmendingLaws.view.vue b/frontend/src/views/amending-laws/AmendingLaws.view.vue
index 629e70baa..43231c0ea 100644
--- a/frontend/src/views/amending-laws/AmendingLaws.view.vue
+++ b/frontend/src/views/amending-laws/AmendingLaws.view.vue
@@ -5,6 +5,7 @@ import { useGetAmendingLaws } from "@/services/announcementService"
 import { RouterLink } from "vue-router"
 import RisErrorCallout from "@/components/controls/RisErrorCallout.vue"
 import Button from "primevue/button"
+import Message from "primevue/message"
 
 const { isFetching, error, data: amendingLaws } = useGetAmendingLaws()
 </script>
@@ -22,6 +23,9 @@ const { isFetching, error, data: amendingLaws } = useGetAmendingLaws()
         <RisErrorCallout :error />
       </div>
       <RisLoadingSpinner v-if="isFetching" />
+      <div v-if="amendingLaws?.length === 0" class="w-1/2">
+        <Message severity="info">Keine Verkündungen gefunden.</Message>
+      </div>
       <div v-else class="flex flex-col gap-8">
         <RouterLink
           v-for="amendingLaw in amendingLaws"

From c31a036d05fa7fafe79fff41f5986d3b629321b7 Mon Sep 17 00:00:00 2001
From: Tarek Hamaoui <tarek.hamaoui@digitalservice.bund.de>
Date: Wed, 25 Dec 2024 00:09:36 +0100
Subject: [PATCH 02/14] removes 404 unit test for apiService

RISDEV-4872
---
 frontend/src/services/apiService.spec.ts | 19 -------------------
 1 file changed, 19 deletions(-)

diff --git a/frontend/src/services/apiService.spec.ts b/frontend/src/services/apiService.spec.ts
index dccf03454..3a7209359 100644
--- a/frontend/src/services/apiService.spec.ts
+++ b/frontend/src/services/apiService.spec.ts
@@ -60,25 +60,6 @@ describe("useApiFetch", () => {
     )
   })
 
-  it("redirects to the 404 page if the API returns a 404", async () => {
-    vi.spyOn(window, "fetch").mockResolvedValue(
-      new Response("{}", { status: 404 }),
-    )
-
-    const mockPush = vi.fn().mockResolvedValue({})
-    vi.doMock("@/router", () => ({ default: { push: mockPush } }))
-
-    const { useApiFetch } = await import("@/services/apiService")
-
-    useApiFetch("foo/bar")
-
-    await vi.waitFor(() =>
-      expect(mockPush).toHaveBeenCalledWith({ name: "NotFound" }),
-    )
-
-    vi.doUnmock("@/router")
-  })
-
   it("aborts the request if the URL is marked as invalid", async () => {
     const fetchSpy = vi
       .spyOn(window, "fetch")

From e1c7e9821f0a4d924d1622844e135c72963defc1 Mon Sep 17 00:00:00 2001
From: Tarek Hamaoui <tarek.hamaoui@digitalservice.bund.de>
Date: Wed, 25 Dec 2024 00:16:58 +0100
Subject: [PATCH 03/14] test: remove outdated 404 redirection test

RISDEV-4872
---
 frontend/e2e/render-not-found-page.spec.ts | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/frontend/e2e/render-not-found-page.spec.ts b/frontend/e2e/render-not-found-page.spec.ts
index 7cb87ad1a..a2e5ad4c3 100644
--- a/frontend/e2e/render-not-found-page.spec.ts
+++ b/frontend/e2e/render-not-found-page.spec.ts
@@ -10,19 +10,4 @@ test.describe("404 Page", () => {
       page.getByRole("heading", { name: /404 - Seite nicht gefunden/ }),
     ).toBeVisible()
   })
-
-  test(`should display 404 page when API response is 404`, async ({ page }) => {
-    await page.route("/api/v1/announcements", (route) => {
-      route.fulfill({
-        status: 404,
-        body: "Not Found",
-      })
-    })
-
-    await page.goto("/amending-laws")
-
-    await expect(
-      page.getByRole("heading", { name: /404 - Seite nicht gefunden/ }),
-    ).toBeVisible()
-  })
 })

From 95b4caa89262c1daf83e4c21c26efc58bc6918ad Mon Sep 17 00:00:00 2001
From: Tarek Hamaoui <tarek.hamaoui@digitalservice.bund.de>
Date: Mon, 6 Jan 2025 14:33:27 +0100
Subject: [PATCH 04/14] feat: handle 404 errors in AmendingLaw view

- Added a watcher to redirect to the 404 page if the `useGetNorm` API call returns a 404 status.
- Updated error handling to display `RisErrorCallout` for non-404 errors.

RISDEV-4872
---
 .../views/amending-law/AmendingLaw.view.vue    | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/frontend/src/views/amending-law/AmendingLaw.view.vue b/frontend/src/views/amending-law/AmendingLaw.view.vue
index c81a62305..546b9809b 100644
--- a/frontend/src/views/amending-law/AmendingLaw.view.vue
+++ b/frontend/src/views/amending-law/AmendingLaw.view.vue
@@ -9,9 +9,11 @@ import RisNavbarSide, {
 import { useEliPathParameter } from "@/composables/useEliPathParameter"
 import { getFrbrDisplayText } from "@/lib/frbr"
 import { useGetNorm } from "@/services/normService"
-import { ref } from "vue"
-import { RouterView } from "vue-router"
+import { ref, watch } from "vue"
 import RisErrorCallout from "@/components/controls/RisErrorCallout.vue"
+import { RouterView, useRouter } from "vue-router"
+
+const router = useRouter()
 
 const menuItems: LevelOneMenuItem[] = [
   {
@@ -40,6 +42,14 @@ const menuItems: LevelOneMenuItem[] = [
 
 const eli = useEliPathParameter()
 const { data: amendingLaw, isFetching, error } = useGetNorm(eli)
+watch(
+  () => error.value,
+  (err) => {
+    if (err && err.status === 404) {
+      router.push({ name: "NotFound" })
+    }
+  },
+)
 
 const breadcrumbs = ref<HeaderBreadcrumb[]>([
   {
@@ -61,8 +71,8 @@ const breadcrumbs = ref<HeaderBreadcrumb[]>([
     <RisLoadingSpinner />
   </div>
 
-  <div v-else-if="error || !amendingLaw" class="m-24">
-    <RisErrorCallout :error />
+  <div v-else-if="error" class="m-24">
+    <RisErrorCallout v-if="error.status !== 404" :error />
   </div>
 
   <div

From b970c3a9f6755e5bfcbbf6f6e9d2097094b07502 Mon Sep 17 00:00:00 2001
From: Tarek Hamaoui <tarek.hamaoui@digitalservice.bund.de>
Date: Mon, 6 Jan 2025 14:34:49 +0100
Subject: [PATCH 05/14] feat: handle 404 errors in AmendingLaw overview

- Added a watcher to redirect to the 404 page if the `useGetNormHtml` API call returns a 404 status.
- Updated error handling logic to conditionally display `RisErrorCallout` for non-404 errors or `loadXmlError`.

RISDEV-4872
---
 .../overview/AmendingLawOverview.view.vue         | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/frontend/src/views/amending-law/overview/AmendingLawOverview.view.vue b/frontend/src/views/amending-law/overview/AmendingLawOverview.view.vue
index 2987a491b..5c59b6cb9 100644
--- a/frontend/src/views/amending-law/overview/AmendingLawOverview.view.vue
+++ b/frontend/src/views/amending-law/overview/AmendingLawOverview.view.vue
@@ -6,9 +6,11 @@ import { useModHighlightClasses } from "@/composables/useModHighlightClasses"
 import { useNormXml } from "@/composables/useNormXml"
 import { useGetNormHtml } from "@/services/normService"
 import { xmlStringToDocument } from "@/services/xmlService"
-import { computed, toValue } from "vue"
+import { computed, toValue, watch } from "vue"
+import { useRouter } from "vue-router"
 import RisErrorCallout from "@/components/controls/RisErrorCallout.vue"
 
+const router = useRouter()
 const eli = useEliPathParameter()
 
 const { isFetching, error, data: amendingLawHtml } = useGetNormHtml(eli)
@@ -25,12 +27,21 @@ const normDocument = computed(() => {
 })
 
 const classesForPreview = useModHighlightClasses(normDocument, () => false)
+
+watch(
+  () => error?.value,
+  (err) => {
+    if (err?.status === 404) {
+      router.push({ name: "NotFound" })
+    }
+  },
+)
 </script>
 
 <template>
   <div class="p-24">
     <h1 class="ris-heading2-regular mb-24">Verkündung</h1>
-    <div v-if="error || loadXmlError">
+    <div v-if="(error && error.status !== 404) || loadXmlError">
       <RisErrorCallout :error="error ?? loadXmlError" />
     </div>
     <RisLoadingSpinner v-else-if="isFetching || isFetchingXml" />

From dcab47277429f75c1ad88c8c6277b3cda3003053 Mon Sep 17 00:00:00 2001
From: Tarek Hamaoui <tarek.hamaoui@digitalservice.bund.de>
Date: Mon, 6 Jan 2025 14:35:41 +0100
Subject: [PATCH 06/14] test: add E2E tests for 404 error handling in
 AmendingLaw views

- Added test for redirecting to the 404 page when `useGetNorm` returns a 404 response.
- Added test for redirecting to the 404 page when `useGetNormHtml` returns a 404 response.

RISDEV-4872
---
 frontend/e2e/amending-law-overview.spec.ts | 50 ++++++++++++++++++++++
 1 file changed, 50 insertions(+)

diff --git a/frontend/e2e/amending-law-overview.spec.ts b/frontend/e2e/amending-law-overview.spec.ts
index 9d7a566bb..7dc58d2e2 100644
--- a/frontend/e2e/amending-law-overview.spec.ts
+++ b/frontend/e2e/amending-law-overview.spec.ts
@@ -59,3 +59,53 @@ test("should display a loading error message when the API call fails", async ({
 
   await page.unrouteAll()
 })
+
+test("should redirect to the 404 page when the amending law JSON does not exist", async ({
+  page,
+}) => {
+  await page.route(
+    "**/norms/eli/bund/bgbl-1/2023/413/2023-12-29/1/deu/regelungstext-1?",
+    async (route, request) => {
+      if (request.headers()["accept"] === "application/json") {
+        await route.fulfill({
+          status: 404,
+        })
+      } else {
+        await route.continue()
+      }
+    },
+  )
+
+  await page.goto(
+    "/amending-laws/eli/bund/bgbl-1/2023/413/2023-12-29/1/deu/regelungstext-1",
+  )
+
+  await expect(
+    page.getByRole("heading", { name: /404 - Seite nicht gefunden/ }),
+  ).toBeVisible()
+})
+
+test("should redirect to the 404 page when the amending law HTML does not exist", async ({
+  page,
+}) => {
+  await page.route(
+    "**/norms/eli/bund/bgbl-1/2023/413/2023-12-29/1/deu/regelungstext-1?",
+    async (route, request) => {
+      if (request.headers()["accept"] === "text/html") {
+        await route.fulfill({
+          status: 404,
+        })
+      } else {
+        await route.continue()
+      }
+    },
+  )
+
+  await page.goto(
+    "/amending-laws/eli/bund/bgbl-1/2023/413/2023-12-29/1/deu/regelungstext-1",
+  )
+
+  await expect(
+    page.getByRole("heading", { name: /404 - Seite nicht gefunden/ }),
+  ).toBeVisible()
+})

From 5f0add6294c2d4ad3c944f821976f75f693be6f3 Mon Sep 17 00:00:00 2001
From: Tarek Hamaoui <tarek.hamaoui@digitalservice.bund.de>
Date: Mon, 6 Jan 2025 14:37:18 +0100
Subject: [PATCH 07/14] refactor: enhance error handling in API service

- enriched the error object with the status codes
- Removed blanket 404 handling
- Adjusted test assertions to include the `status` property in the error object.

RISDEV-4872
---
 frontend/src/services/apiService.spec.ts | 4 ++--
 frontend/src/services/apiService.ts      | 7 ++++++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/frontend/src/services/apiService.spec.ts b/frontend/src/services/apiService.spec.ts
index 3a7209359..39bf665c9 100644
--- a/frontend/src/services/apiService.spec.ts
+++ b/frontend/src/services/apiService.spec.ts
@@ -96,7 +96,7 @@ describe("useApiFetch", () => {
     const { error } = useApiFetch("/example", { immediate: true }).json()
 
     await vi.waitFor(() => {
-      expect(error.value).toEqual({ type: "/errors/example" })
+      expect(error.value).toEqual({ type: "/errors/example", status: 404 })
     })
   })
 
@@ -110,7 +110,7 @@ describe("useApiFetch", () => {
     const { error } = useApiFetch("/example", { immediate: true }).json()
 
     await vi.waitFor(() => {
-      expect(error.value).toEqual({ type: "__fallback__" })
+      expect(error.value).toEqual({ type: "__fallback__", status: 404 })
     })
   })
 })
diff --git a/frontend/src/services/apiService.ts b/frontend/src/services/apiService.ts
index 176aad7f7..07bca4ef2 100644
--- a/frontend/src/services/apiService.ts
+++ b/frontend/src/services/apiService.ts
@@ -83,7 +83,12 @@ export const useApiFetch = createFetch({
       // Since we're only ever interested in the data and never the error object,
       // we'll replace the `fetchContext.error` with the response data so we can
       // access it in the UI.
-      fetchContext.error = fetchContext.data ?? getFallbackError()
+      const baseError = fetchContext.data ?? getFallbackError()
+
+      fetchContext.error = {
+        ...baseError,
+        status: fetchContext.response?.status || null,
+      }
 
       return fetchContext
     },

From 9b697f49713edf5f8023a1146c9747de14b28b66 Mon Sep 17 00:00:00 2001
From: Tarek Hamaoui <tarek.hamaoui@digitalservice.bund.de>
Date: Mon, 6 Jan 2025 14:57:26 +0100
Subject: [PATCH 08/14] feat(temporaldata): add 404 error handling

RISDEV-4872
---
 .../temporal-data/TemporalData.view.vue       | 21 +++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/frontend/src/views/amending-law/temporal-data/TemporalData.view.vue b/frontend/src/views/amending-law/temporal-data/TemporalData.view.vue
index 0c22e96f5..77924088f 100644
--- a/frontend/src/views/amending-law/temporal-data/TemporalData.view.vue
+++ b/frontend/src/views/amending-law/temporal-data/TemporalData.view.vue
@@ -13,7 +13,9 @@ import { TemporalDataResponse } from "@/types/temporalDataResponse"
 import Button from "primevue/button"
 import { useToast } from "primevue/usetoast"
 import { onUnmounted, ref, watch } from "vue"
+import { useRouter } from "vue-router"
 
+const router = useRouter()
 const eli = useEliPathParameter()
 const dates = ref<TemporalDataResponse[]>([])
 const {
@@ -67,6 +69,15 @@ function handleSaveTemporalData(event: MouseEvent) {
   event.preventDefault()
   saveTemporalData()
 }
+
+watch(
+  [() => entryIntoForceError?.value, () => loadTimeBoundariesError?.value],
+  ([entryError, timeBoundariesError]) => {
+    if (entryError?.status === 404 || timeBoundariesError?.status === 404) {
+      router.push({ name: "NotFound" })
+    }
+  },
+)
 </script>
 
 <template>
@@ -79,13 +90,19 @@ function handleSaveTemporalData(event: MouseEvent) {
       </div>
     </template>
 
-    <template v-else-if="entryIntoForceError">
+    <template
+      v-else-if="entryIntoForceError && entryIntoForceError.status !== 404"
+    >
       <div class="col-span-3">
         <RisErrorCallout :error="entryIntoForceError" />
       </div>
     </template>
 
-    <template v-else-if="loadTimeBoundariesError">
+    <template
+      v-else-if="
+        loadTimeBoundariesError && loadTimeBoundariesError.status !== 404
+      "
+    >
       <div class="col-span-3">
         <RisErrorCallout :error="loadTimeBoundariesError" />
       </div>

From b4a8a1a99f68e5f29873b1d4c52019df9e5ebcbf Mon Sep 17 00:00:00 2001
From: Tarek Hamaoui <tarek.hamaoui@digitalservice.bund.de>
Date: Mon, 6 Jan 2025 14:58:09 +0100
Subject: [PATCH 09/14] test(e2e): add tests for temporal data page error
 handling

RISDEV-4872
---
 ...emporal-data-page-and-test-content.spec.ts | 38 +++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/frontend/e2e/navigate-to-temporal-data-page-and-test-content.spec.ts b/frontend/e2e/navigate-to-temporal-data-page-and-test-content.spec.ts
index 752038d28..338ce9edb 100644
--- a/frontend/e2e/navigate-to-temporal-data-page-and-test-content.spec.ts
+++ b/frontend/e2e/navigate-to-temporal-data-page-and-test-content.spec.ts
@@ -222,4 +222,42 @@ test.describe("Error handling for Temporal Data page", () => {
       }),
     ).toBeVisible()
   })
+
+  test("redirects to 404 page when entry into force HTML is not found", async ({
+    page,
+  }) => {
+    await page.route(
+      "/api/v1/norms/eli/bund/bgbl-1/2017/s419/2017-03-15/1/deu/regelungstext-1/articles?refersTo=geltungszeitregel",
+      (route) => {
+        route.fulfill({
+          status: 404,
+        })
+      },
+    )
+
+    await page.goto(BASE_URL)
+
+    await expect(
+      page.getByRole("heading", { name: /404 - Seite nicht gefunden/ }),
+    ).toBeVisible()
+  })
+
+  test("redirects to 404 page when temporal data time boundaries are not found", async ({
+    page,
+  }) => {
+    await page.route(
+      "/api/v1/norms/eli/bund/bgbl-1/2017/s419/2017-03-15/1/deu/regelungstext-1/timeBoundaries",
+      (route) => {
+        route.fulfill({
+          status: 404,
+        })
+      },
+    )
+
+    await page.goto(BASE_URL)
+
+    await expect(
+      page.getByRole("heading", { name: /404 - Seite nicht gefunden/ }),
+    ).toBeVisible()
+  })
 })

From ff5f1a6f5ae92e2f715883462024babe8ffc7061 Mon Sep 17 00:00:00 2001
From: Tarek Hamaoui <tarek.hamaoui@digitalservice.bund.de>
Date: Tue, 7 Jan 2025 11:42:11 +0100
Subject: [PATCH 10/14] feat(articles): handle 404 and non-404 errors with E2E
 tests

- Adds watch logic to redirect to NotFound page when the Articles API returns a 404, as this renders the page non-functional.
- error callout is used for non-404 errors to provide feedback without breaking navigation.
- Added E2E tests for redirection to the NotFound page on 404 and for displaying of an error callout for non-404 errors.

RISDEV-4872
---
 ...-article-overview-and-test-content.spec.ts | 47 +++++++++++++++++++
 .../amending-law/articles/Articles.view.vue   | 16 ++++++-
 2 files changed, 61 insertions(+), 2 deletions(-)

diff --git a/frontend/e2e/navigate-to-article-overview-and-test-content.spec.ts b/frontend/e2e/navigate-to-article-overview-and-test-content.spec.ts
index 6ff58958e..93c543aca 100644
--- a/frontend/e2e/navigate-to-article-overview-and-test-content.spec.ts
+++ b/frontend/e2e/navigate-to-article-overview-and-test-content.spec.ts
@@ -50,3 +50,50 @@ test.describe("Articles page", () => {
     })
   }
 })
+
+test.describe("Articles page error handling", () => {
+  const BASE_URL =
+    "/amending-laws/eli/bund/bgbl-1/2017/s419/2017-03-15/1/deu/regelungstext-1/articles"
+
+  test("redirects to NotFound page when useArticles returns 404", async ({
+    page,
+  }) => {
+    await page.route(
+      "/api/v1/norms/eli/bund/bgbl-1/2017/s419/2017-03-15/1/deu/regelungstext-1/articles",
+      (route) =>
+        route.fulfill({
+          status: 404,
+        }),
+    )
+    await page.goto(BASE_URL)
+
+    await expect(
+      page.getByRole("heading", { name: /404 - Seite nicht gefunden/ }),
+    ).toBeVisible()
+  })
+
+  test("displays error callout when useArticles returns a non-404 error", async ({
+    page,
+  }) => {
+    await page.route(
+      "/api/v1/norms/eli/bund/bgbl-1/2017/s419/2017-03-15/1/deu/regelungstext-1/articles",
+      (route) =>
+        route.fulfill({
+          status: 403,
+          body: JSON.stringify({ message: "Internal Server Error" }),
+        }),
+    )
+
+    await page.goto(BASE_URL)
+
+    await expect(
+      page.getByText("Ein unbekannter Fehler ist aufgetreten."),
+    ).toBeVisible()
+
+    await expect(
+      page.getByRole("button", {
+        name: "Trace-ID in die Zwischenablage kopieren",
+      }),
+    ).toBeVisible()
+  })
+})
diff --git a/frontend/src/views/amending-law/articles/Articles.view.vue b/frontend/src/views/amending-law/articles/Articles.view.vue
index 16805b293..b234642b8 100644
--- a/frontend/src/views/amending-law/articles/Articles.view.vue
+++ b/frontend/src/views/amending-law/articles/Articles.view.vue
@@ -4,7 +4,8 @@ import RisInfoModal from "@/components/controls/RisInfoModal.vue"
 import RisLoadingSpinner from "@/components/controls/RisLoadingSpinner.vue"
 import { useEliPathParameter } from "@/composables/useEliPathParameter"
 import { useArticles } from "@/services/articleService"
-import { onUnmounted } from "vue"
+import { onUnmounted, watch } from "vue"
+import { useRouter } from "vue-router"
 import RisErrorCallout from "@/components/controls/RisErrorCallout.vue"
 
 const eli = useEliPathParameter()
@@ -13,6 +14,17 @@ const { data: articles, isFetching, error } = useArticles(eli)
 const { pushBreadcrumb } = useHeaderContext()
 const cleanupBreadcrumbs = pushBreadcrumb({ title: "Artikelübersicht" })
 onUnmounted(() => cleanupBreadcrumbs())
+
+const router = useRouter()
+
+watch(
+  () => error?.value,
+  (err) => {
+    if (err?.status === 404) {
+      router.push({ name: "NotFound" })
+    }
+  },
+)
 </script>
 
 <template>
@@ -21,7 +33,7 @@ onUnmounted(() => cleanupBreadcrumbs())
     <div v-if="isFetching" class="flex items-center justify-center">
       <RisLoadingSpinner />
     </div>
-    <div v-else-if="error">
+    <div v-else-if="error && error.status !== 404">
       <RisErrorCallout :error />
     </div>
     <RisInfoModal

From 71651d38204a378561844f928da729a4872bbb0a Mon Sep 17 00:00:00 2001
From: Tarek Hamaoui <tarek.hamaoui@digitalservice.bund.de>
Date: Tue, 7 Jan 2025 12:25:28 +0100
Subject: [PATCH 11/14] feat: add 404 redirect for missing XML and
 corresponding e2e test

- Implemented logic to redirect to the "NotFound" page when `useNormXml` fails with a 404 error.
- Added an E2E test to verify 404 behavior

RISDEV-4872
---
 ...mending-laws-article-editor-common.spec.ts | 26 +++++++++++++++++++
 .../editor/AmendingLawArticleEditor.view.vue  | 13 +++++++++-
 2 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/frontend/e2e/amending-laws-article-editor-common.spec.ts b/frontend/e2e/amending-laws-article-editor-common.spec.ts
index f8dffd1d7..92f90fe27 100644
--- a/frontend/e2e/amending-laws-article-editor-common.spec.ts
+++ b/frontend/e2e/amending-laws-article-editor-common.spec.ts
@@ -240,4 +240,30 @@ test.describe("XML and HTML tabs", () => {
       page.getByText("Artikel 1Änderung des Vereinsgesetzes"),
     ).toBeVisible()
   })
+
+  test("Handle 404 error for XML in tabs", async ({ page }) => {
+    await page.route(
+      "**/norms/eli/bund/bgbl-1/2017/s419/2017-03-15/1/deu/regelungstext-1?",
+      async (route, request) => {
+        if (
+          request.method() === "GET" &&
+          request.headers()["accept"] === "application/xml"
+        ) {
+          await route.fulfill({
+            status: 404,
+          })
+        } else {
+          await route.continue()
+        }
+      },
+    )
+
+    await page.goto(
+      "/amending-laws/eli/bund/bgbl-1/2017/s419/2017-03-15/1/deu/regelungstext-1/articles/hauptteil-1_art-1/edit",
+    )
+
+    await expect(
+      page.getByRole("heading", { name: /404 - Seite nicht gefunden/ }),
+    ).toBeVisible()
+  })
 })
diff --git a/frontend/src/views/amending-law/articles/editor/AmendingLawArticleEditor.view.vue b/frontend/src/views/amending-law/articles/editor/AmendingLawArticleEditor.view.vue
index fd6fae5a7..7aa7f27ac 100644
--- a/frontend/src/views/amending-law/articles/editor/AmendingLawArticleEditor.view.vue
+++ b/frontend/src/views/amending-law/articles/editor/AmendingLawArticleEditor.view.vue
@@ -23,7 +23,9 @@ import { LawElementIdentifier } from "@/types/lawElementIdentifier"
 import { useDebounce } from "@vueuse/core"
 import { computed, Ref, ref, toValue, watch } from "vue"
 import RisErrorCallout from "@/components/controls/RisErrorCallout.vue"
+import { useRouter } from "vue-router"
 
+const router = useRouter()
 const eid = useEidPathParameter()
 const eli = useEliPathParameter()
 const {
@@ -129,6 +131,12 @@ function handlePreviewKeyDown(e: KeyboardEvent) {
     selectAllMods()
   }
 }
+
+watch(loadXmlError, (err) => {
+  if (err?.status === 404) {
+    router.push({ name: "NotFound" })
+  }
+})
 </script>
 
 <template>
@@ -167,7 +175,10 @@ function handlePreviewKeyDown(e: KeyboardEvent) {
             </div>
 
             <div v-else-if="loadXmlError">
-              <RisErrorCallout :error="loadXmlError" />
+              <RisErrorCallout
+                v-if="loadXmlError.status !== 404"
+                :error="loadXmlError"
+              />
             </div>
 
             <RisTabs

From de5208964205f32b164fbf8a9c9533a4851739c0 Mon Sep 17 00:00:00 2001
From: Tarek Hamaoui <tarek.hamaoui@digitalservice.bund.de>
Date: Tue, 7 Jan 2025 12:44:12 +0100
Subject: [PATCH 12/14] feat(references): add 404 handling + e2e test

RISDEV-4872
---
 frontend/e2e/amending-law-references.spec.ts  | 28 +++++++++++++++++++
 .../references/References.view.vue            | 17 +++++++++--
 2 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/frontend/e2e/amending-law-references.spec.ts b/frontend/e2e/amending-law-references.spec.ts
index 10d63a24a..91e9f8529 100644
--- a/frontend/e2e/amending-law-references.spec.ts
+++ b/frontend/e2e/amending-law-references.spec.ts
@@ -195,3 +195,31 @@ test("should be able to select a mod, add two new ref's and delete one using the
   await expect(ref1Highlight).toBeHidden()
   await expect(ref2Highlight).toBeVisible()
 })
+
+test.describe("Amending Law References Page Error Handling", () => {
+  test("Redirect to 404 if XML not found", async ({ page }) => {
+    await page.route(
+      "**/norms/eli/bund/bgbl-1/1002/10/1002-01-10/1/deu/regelungstext-1?",
+      async (route, request) => {
+        if (
+          request.method() === "GET" &&
+          request.headers()["accept"] === "application/xml"
+        ) {
+          await route.fulfill({
+            status: 404,
+          })
+        } else {
+          await route.continue()
+        }
+      },
+    )
+
+    await page.goto(
+      "/amending-laws/eli/bund/bgbl-1/1002/10/1002-01-10/1/deu/regelungstext-1/affected-documents/eli/bund/bgbl-1/1002/1/1002-01-01/1/deu/regelungstext-1/references",
+    )
+
+    await expect(
+      page.getByRole("heading", { name: /404 - Seite nicht gefunden/ }),
+    ).toBeVisible()
+  })
+})
diff --git a/frontend/src/views/amending-law/affected-documents/references/References.view.vue b/frontend/src/views/amending-law/affected-documents/references/References.view.vue
index d94799e5e..5ed450d61 100644
--- a/frontend/src/views/amending-law/affected-documents/references/References.view.vue
+++ b/frontend/src/views/amending-law/affected-documents/references/References.view.vue
@@ -10,7 +10,7 @@ import { useEliPathParameter } from "@/composables/useEliPathParameter"
 import { useNormXml } from "@/composables/useNormXml"
 import { getFrbrDisplayText } from "@/lib/frbr"
 import { useGetNorm } from "@/services/normService"
-import { computed, ref } from "vue"
+import { computed, ref, watch } from "vue"
 import { useRoute, useRouter } from "vue-router"
 
 /* -------------------------------------------------- *
@@ -90,6 +90,15 @@ const breadcrumbs = ref<HeaderBreadcrumb[]>([
   },
   { key: "textMetadataEditor", title: "Textbasierte Metadaten" },
 ])
+
+watch(
+  () => amendingNormXmlError?.value,
+  (err) => {
+    if (err?.status === 404) {
+      router.push({ name: "NotFound" })
+    }
+  },
+)
 </script>
 
 <template>
@@ -106,7 +115,11 @@ const breadcrumbs = ref<HeaderBreadcrumb[]>([
     </div>
 
     <div
-      v-else-if="amendingNormError || affectedNormError || amendingNormXmlError"
+      v-else-if="
+        amendingNormError ||
+        affectedNormError ||
+        (amendingNormXmlError && amendingNormXmlError.status !== 404)
+      "
       class="p-24"
     >
       <RisErrorCallout

From cf866a8c2165da1a529d6635da37cb0cec37d660 Mon Sep 17 00:00:00 2001
From: Tarek Hamaoui <tarek.hamaoui@digitalservice.bund.de>
Date: Tue, 7 Jan 2025 12:46:57 +0100
Subject: [PATCH 13/14] Revert "feat(articles): handle 404 and non-404 errors
 with E2E tests"

This reverts commit ff5f1a6f5ae92e2f715883462024babe8ffc7061.
---
 ...-article-overview-and-test-content.spec.ts | 47 -------------------
 .../amending-law/articles/Articles.view.vue   | 16 +------
 2 files changed, 2 insertions(+), 61 deletions(-)

diff --git a/frontend/e2e/navigate-to-article-overview-and-test-content.spec.ts b/frontend/e2e/navigate-to-article-overview-and-test-content.spec.ts
index 93c543aca..6ff58958e 100644
--- a/frontend/e2e/navigate-to-article-overview-and-test-content.spec.ts
+++ b/frontend/e2e/navigate-to-article-overview-and-test-content.spec.ts
@@ -50,50 +50,3 @@ test.describe("Articles page", () => {
     })
   }
 })
-
-test.describe("Articles page error handling", () => {
-  const BASE_URL =
-    "/amending-laws/eli/bund/bgbl-1/2017/s419/2017-03-15/1/deu/regelungstext-1/articles"
-
-  test("redirects to NotFound page when useArticles returns 404", async ({
-    page,
-  }) => {
-    await page.route(
-      "/api/v1/norms/eli/bund/bgbl-1/2017/s419/2017-03-15/1/deu/regelungstext-1/articles",
-      (route) =>
-        route.fulfill({
-          status: 404,
-        }),
-    )
-    await page.goto(BASE_URL)
-
-    await expect(
-      page.getByRole("heading", { name: /404 - Seite nicht gefunden/ }),
-    ).toBeVisible()
-  })
-
-  test("displays error callout when useArticles returns a non-404 error", async ({
-    page,
-  }) => {
-    await page.route(
-      "/api/v1/norms/eli/bund/bgbl-1/2017/s419/2017-03-15/1/deu/regelungstext-1/articles",
-      (route) =>
-        route.fulfill({
-          status: 403,
-          body: JSON.stringify({ message: "Internal Server Error" }),
-        }),
-    )
-
-    await page.goto(BASE_URL)
-
-    await expect(
-      page.getByText("Ein unbekannter Fehler ist aufgetreten."),
-    ).toBeVisible()
-
-    await expect(
-      page.getByRole("button", {
-        name: "Trace-ID in die Zwischenablage kopieren",
-      }),
-    ).toBeVisible()
-  })
-})
diff --git a/frontend/src/views/amending-law/articles/Articles.view.vue b/frontend/src/views/amending-law/articles/Articles.view.vue
index b234642b8..16805b293 100644
--- a/frontend/src/views/amending-law/articles/Articles.view.vue
+++ b/frontend/src/views/amending-law/articles/Articles.view.vue
@@ -4,8 +4,7 @@ import RisInfoModal from "@/components/controls/RisInfoModal.vue"
 import RisLoadingSpinner from "@/components/controls/RisLoadingSpinner.vue"
 import { useEliPathParameter } from "@/composables/useEliPathParameter"
 import { useArticles } from "@/services/articleService"
-import { onUnmounted, watch } from "vue"
-import { useRouter } from "vue-router"
+import { onUnmounted } from "vue"
 import RisErrorCallout from "@/components/controls/RisErrorCallout.vue"
 
 const eli = useEliPathParameter()
@@ -14,17 +13,6 @@ const { data: articles, isFetching, error } = useArticles(eli)
 const { pushBreadcrumb } = useHeaderContext()
 const cleanupBreadcrumbs = pushBreadcrumb({ title: "Artikelübersicht" })
 onUnmounted(() => cleanupBreadcrumbs())
-
-const router = useRouter()
-
-watch(
-  () => error?.value,
-  (err) => {
-    if (err?.status === 404) {
-      router.push({ name: "NotFound" })
-    }
-  },
-)
 </script>
 
 <template>
@@ -33,7 +21,7 @@ watch(
     <div v-if="isFetching" class="flex items-center justify-center">
       <RisLoadingSpinner />
     </div>
-    <div v-else-if="error && error.status !== 404">
+    <div v-else-if="error">
       <RisErrorCallout :error />
     </div>
     <RisInfoModal

From 5d110d3b208c2138551c29e1c05d09b0830c09f0 Mon Sep 17 00:00:00 2001
From: Tarek Hamaoui <tarek.hamaoui@digitalservice.bund.de>
Date: Tue, 7 Jan 2025 20:16:56 +0100
Subject: [PATCH 14/14] refactor: use `??` instead of `||` for safer error
 handling in fetch

RISDEV-4872
---
 frontend/src/services/apiService.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/services/apiService.ts b/frontend/src/services/apiService.ts
index 07bca4ef2..7a385be6f 100644
--- a/frontend/src/services/apiService.ts
+++ b/frontend/src/services/apiService.ts
@@ -87,7 +87,7 @@ export const useApiFetch = createFetch({
 
       fetchContext.error = {
         ...baseError,
-        status: fetchContext.response?.status || null,
+        status: fetchContext.response?.status ?? null,
       }
 
       return fetchContext