From f833fc506e32e50d59a8cc730e40931639e899e4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C5=ABdolfs=20O=C5=A1i=C5=86=C5=A1?= <rudolfs@osins.org>
Date: Fri, 16 Feb 2024 13:00:08 +0000
Subject: [PATCH] Improve error message when local project is unavailable

---
 src/components/ErrorMessage.svelte |  8 ++------
 src/lib/router/definitions.ts      |  8 +++++---
 src/views/error/View.svelte        |  4 ++--
 src/views/projects/error.ts        | 19 ++++++++++++++++++-
 4 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/src/components/ErrorMessage.svelte b/src/components/ErrorMessage.svelte
index 20b9faf76..567cd6589 100644
--- a/src/components/ErrorMessage.svelte
+++ b/src/components/ErrorMessage.svelte
@@ -1,9 +1,6 @@
 <script lang="ts">
-  import type {
-    ResponseError,
-    ResponseParseError,
-  } from "@httpd-client/lib/fetcher";
   import type { ComponentProps } from "svelte";
+  import type { ErrorParam } from "@app/lib/router/definitions";
 
   import { config } from "@app/lib/config";
   import Command from "./Command.svelte";
@@ -12,8 +9,7 @@
 
   export let title: string;
   export let description: string;
-  export let error: Error | ResponseParseError | ResponseError | undefined =
-    undefined;
+  export let error: ErrorParam = undefined;
   export let icon: ComponentProps<Icon>["name"] = "alert";
 </script>
 
diff --git a/src/lib/router/definitions.ts b/src/lib/router/definitions.ts
index 3fb9b1b8f..b227b7ae5 100644
--- a/src/lib/router/definitions.ts
+++ b/src/lib/router/definitions.ts
@@ -1,8 +1,8 @@
-import type { HomeRoute, HomeLoadedRoute } from "@app/views/home/router";
 import type {
-  ResponseParseError,
   ResponseError,
+  ResponseParseError,
 } from "@httpd-client/lib/fetcher";
+import type { HomeRoute, HomeLoadedRoute } from "@app/views/home/router";
 import type {
   ProjectLoadedRoute,
   ProjectRoute,
@@ -33,12 +33,14 @@ interface SessionRoute {
   };
 }
 
+export type ErrorParam = Error | ResponseParseError | ResponseError | undefined;
+
 export interface ErrorRoute {
   resource: "error";
   params: {
     title: string;
     description: string;
-    error: Error | ResponseError | ResponseParseError;
+    error: ErrorParam;
   };
 }
 
diff --git a/src/views/error/View.svelte b/src/views/error/View.svelte
index 56814ea47..ddbe6b45f 100644
--- a/src/views/error/View.svelte
+++ b/src/views/error/View.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-  import type { ComponentProps } from "svelte";
+  import type { ErrorParam } from "@app/lib/router/definitions";
 
   import AppLayout from "@app/App/AppLayout.svelte";
   import ErrorMessage from "@app/components/ErrorMessage.svelte";
 
   export let title: string;
   export let description: string;
-  export let error: ComponentProps<ErrorMessage>["error"];
+  export let error: ErrorParam = undefined;
 </script>
 
 <style>
diff --git a/src/views/projects/error.ts b/src/views/projects/error.ts
index e12b69c9d..1eb1bb4ca 100644
--- a/src/views/projects/error.ts
+++ b/src/views/projects/error.ts
@@ -1,8 +1,10 @@
 import type { ErrorRoute, NotFoundRoute } from "@app/lib/router/definitions";
 import type { ProjectRoute } from "@app/views/projects/router";
 
-import { baseUrlToUrl } from "@app/lib/utils";
+import { baseUrlToUrl, isLocal } from "@app/lib/utils";
 import { ResponseParseError, ResponseError } from "@httpd-client/lib/fetcher";
+import { httpdStore } from "@app/lib/httpd";
+import { get } from "svelte/store";
 
 export function handleError(
   error: Error | ResponseParseError | ResponseError,
@@ -45,6 +47,21 @@ export function handleError(
           "The response received from the seed does not match the expected schema, this is usually due to a version mismatch between the seed and the web interface.",
       },
     };
+  } else if (
+    error instanceof TypeError &&
+    error.message === "Failed to fetch" &&
+    isLocal(route.node.hostname) &&
+    get(httpdStore).state === "stopped"
+  ) {
+    return {
+      resource: "error",
+      params: {
+        title: "Could not load this project",
+        description:
+          "You're trying to access a project on your local node but the app is not connected to it. Click the Connect button in the top right corner to connect.",
+        error: undefined,
+      },
+    };
   } else {
     return {
       resource: "error",