From d216caec7d49c51222d8d40963b9fd91e4b671fc Mon Sep 17 00:00:00 2001 From: Sebastian Martinez Date: Thu, 8 Feb 2024 16:04:53 -0300 Subject: [PATCH] Improve catching of errors when loading routes - Handle ResponseParseErros, ResponseErrors and normal errors differently. - Show them all in the same `LoadError` view - Add a subtitle to give users some more information on what could have gone wrong. - Add more properties to the copyable error message to make debugging easier. --- src/App.svelte | 6 +- src/App/Header/Breadcrumbs.svelte | 2 +- src/components/ErrorMessage.svelte | 40 +++++++++++--- src/components/LoadError.svelte | 58 -------------------- src/lib/router.ts | 6 +- src/lib/router/definitions.ts | 16 ++++-- src/lib/utils.ts | 6 +- src/views/error/View.svelte | 38 +++++++++++++ src/views/home/Index.svelte | 70 +++++++++++++----------- src/views/home/error.ts | 41 ++++++++++++++ src/views/home/router.ts | 8 +-- src/views/nodes/View.svelte | 3 +- src/views/nodes/error.ts | 46 ++++++++++++++++ src/views/nodes/router.ts | 27 ++------- src/views/projects/Cob/Revision.svelte | 5 +- src/views/projects/History.svelte | 12 +++- src/views/projects/Issue/New.svelte | 3 +- src/views/projects/Issues.svelte | 9 ++- src/views/projects/Patches.svelte | 9 ++- src/views/projects/error.ts | 59 ++++++++++++++++++++ src/views/projects/router.ts | 40 ++------------ tests/visual/desktop/landingPage.spec.ts | 23 ++++++++ tests/visual/desktop/node.spec.ts | 26 +++++++++ tests/visual/desktop/project.spec.ts | 21 +++++++ 24 files changed, 389 insertions(+), 185 deletions(-) delete mode 100644 src/components/LoadError.svelte create mode 100644 src/views/error/View.svelte create mode 100644 src/views/home/error.ts create mode 100644 src/views/nodes/error.ts create mode 100644 src/views/projects/error.ts diff --git a/src/App.svelte b/src/App.svelte index fae1137b3..155a884d9 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -24,7 +24,7 @@ import Session from "@app/views/session/Index.svelte"; import Source from "@app/views/projects/Source.svelte"; - import LoadError from "@app/components/LoadError.svelte"; + import Error from "@app/views/error/View.svelte"; import Loading from "@app/components/Loading.svelte"; const activeRouteStore = router.activeRouteStore; @@ -87,8 +87,8 @@ {:else if $activeRouteStore.resource === "project.patch"} -{:else if $activeRouteStore.resource === "loadError"} - +{:else if $activeRouteStore.resource === "error"} + {:else if $activeRouteStore.resource === "notFound"} {:else} diff --git a/src/App/Header/Breadcrumbs.svelte b/src/App/Header/Breadcrumbs.svelte index 24d134ef0..c0c8a7e34 100644 --- a/src/App/Header/Breadcrumbs.svelte +++ b/src/App/Header/Breadcrumbs.svelte @@ -20,7 +20,7 @@ } -{#if $activeRouteStore.resource === "booting" || $activeRouteStore.resource === "home" || $activeRouteStore.resource === "session" || $activeRouteStore.resource === "loadError" || $activeRouteStore.resource === "notFound"} +{#if $activeRouteStore.resource === "booting" || $activeRouteStore.resource === "home" || $activeRouteStore.resource === "session" || $activeRouteStore.resource === "error" || $activeRouteStore.resource === "notFound"} {:else if $activeRouteStore.resource === "nodes"}
diff --git a/src/components/ErrorMessage.svelte b/src/components/ErrorMessage.svelte index 16ec3b06b..20b9faf76 100644 --- a/src/components/ErrorMessage.svelte +++ b/src/components/ErrorMessage.svelte @@ -1,10 +1,20 @@
- - {message} + +
+ {title} +
+ +
{@html description}
{#if error}
If you need help resolving this issue, copy the error message @@ -40,11 +66,7 @@
diff --git a/src/components/LoadError.svelte b/src/components/LoadError.svelte deleted file mode 100644 index 904153239..000000000 --- a/src/components/LoadError.svelte +++ /dev/null @@ -1,58 +0,0 @@ - - - - - -
- -
-
- {title} -
-
- If you need help resolving this issue, copy the error message -
- below and send it to us on - - radicle.zulipchat.com - -
-
- -
- -
-
- diff --git a/src/lib/router.ts b/src/lib/router.ts index ed1474d75..302268301 100644 --- a/src/lib/router.ts +++ b/src/lib/router.ts @@ -122,8 +122,8 @@ function setTitle(loadedRoute: LoadedRoute) { if (loadedRoute.resource === "booting" || loadedRoute.resource === "home") { title.push("Radicle"); - } else if (loadedRoute.resource === "loadError") { - title.push("Load error"); + } else if (loadedRoute.resource === "error") { + title.push("Error"); title.push("Radicle"); } else if (loadedRoute.resource === "notFound") { title.push("Page not found"); @@ -259,7 +259,7 @@ export function routeToPath(route: Route): string { } else if ( route.resource === "booting" || route.resource === "notFound" || - route.resource === "loadError" + route.resource === "error" ) { return ""; } else { diff --git a/src/lib/router/definitions.ts b/src/lib/router/definitions.ts index 132a41c33..3fb9b1b8f 100644 --- a/src/lib/router/definitions.ts +++ b/src/lib/router/definitions.ts @@ -1,4 +1,8 @@ import type { HomeRoute, HomeLoadedRoute } from "@app/views/home/router"; +import type { + ResponseParseError, + ResponseError, +} from "@httpd-client/lib/fetcher"; import type { ProjectLoadedRoute, ProjectRoute, @@ -29,19 +33,19 @@ interface SessionRoute { }; } -export interface LoadErrorRoute { - resource: "loadError"; +export interface ErrorRoute { + resource: "error"; params: { title: string; - errorMessage: string; - stackTrace: string; + description: string; + error: Error | ResponseError | ResponseParseError; }; } export type Route = | BootingRoute | HomeRoute - | LoadErrorRoute + | ErrorRoute | NotFoundRoute | ProjectRoute | NodesRoute @@ -50,7 +54,7 @@ export type Route = export type LoadedRoute = | BootingRoute | HomeLoadedRoute - | LoadErrorRoute + | ErrorRoute | NotFoundRoute | ProjectLoadedRoute | NodesLoadedRoute diff --git a/src/lib/utils.ts b/src/lib/utils.ts index fb83bb13f..6ad298cfa 100644 --- a/src/lib/utils.ts +++ b/src/lib/utils.ts @@ -1,4 +1,4 @@ -import type { Comment } from "@httpd-client"; +import type { BaseUrl, Comment } from "@httpd-client"; import md5 from "md5"; import bs58 from "bs58"; @@ -93,6 +93,10 @@ export function formatEditedCaption(lastEdit: Comment["edits"][0]) { } edited ${formatTimestamp(lastEdit.timestamp / 1000)}`; } +export function baseUrlToUrl(baseUrl: BaseUrl): URL { + return new URL(`${baseUrl.scheme}://${baseUrl.hostname}:${baseUrl.port}`); +} + // Generates a publicly shareable link. export function formatPublicExplorer( publicExplorer: string, diff --git a/src/views/error/View.svelte b/src/views/error/View.svelte new file mode 100644 index 000000000..56814ea47 --- /dev/null +++ b/src/views/error/View.svelte @@ -0,0 +1,38 @@ + + + + + +
+
+ +
+
+ diff --git a/src/views/home/Index.svelte b/src/views/home/Index.svelte index 9a8e9baa6..7f9397652 100644 --- a/src/views/home/Index.svelte +++ b/src/views/home/Index.svelte @@ -1,6 +1,7 @@