diff --git a/public/index.css b/public/index.css index ef86f18c5..239b59f24 100644 --- a/public/index.css +++ b/public/index.css @@ -98,6 +98,10 @@ html { color: var(--color-background); } +.error::selection, .error ::selection { + background: var(--color-negative); +} + code { font-family: monospace; font-size: 0.95rem; @@ -247,6 +251,10 @@ input.wide { border-color: var(--color-negative) !important; --box-shadow-color: var(--color-negative-2) !important; } +.error-message { + background-color: var(--color-negative-background); + padding: 1rem; +} .highlight { color: var(--color-secondary); } @@ -290,7 +298,7 @@ input.wide { justify-content: center; } -span.small { +span.small, .text-small { font-size: 0.75rem; } diff --git a/src/api.ts b/src/api.ts index fb8184949..23c7447dd 100644 --- a/src/api.ts +++ b/src/api.ts @@ -3,15 +3,36 @@ import type { Config } from '@app/config'; export async function get(path: string, config: Config): Promise { if (! config.seed.api) return null; - const response = await fetch(`${config.seed.api}/v1/${path}`, { - method: 'GET', - headers: { - 'Accept': 'application/json', - } - }); + const url = `${config.seed.api}/v1/${path}`; - if (! response.ok) { - return null; + try { + const response = await fetch(url, { + method: 'GET', + headers: { + 'Accept': 'application/json', + } + }); + + if (! response.ok) { + return null; + } + return response.json(); + } catch { + throw new ApiError(url, "API request failed"); + } +} + +class ApiError extends Error { + url: string; + + constructor(url: string, message: string) { + super(message); + + if (Error.captureStackTrace) { + Error.captureStackTrace(this, ApiError); + } + + this.name = "ApiError"; + this.url = url; } - return response.json(); } diff --git a/src/base/orgs/View.svelte b/src/base/orgs/View.svelte index 4afa39508..c7f45b209 100644 --- a/src/base/orgs/View.svelte +++ b/src/base/orgs/View.svelte @@ -118,10 +118,6 @@ height: 2rem; margin-right: 1rem; } - .error { - background-color: var(--color-negative-background); - padding: 1rem; - } {#await Org.get(address, config)} @@ -223,7 +219,7 @@ {/each} {:catch err} -
+
Error loading projects: {err}.
{/await} diff --git a/src/base/projects/Browser.svelte b/src/base/projects/Browser.svelte index aa87d6f18..b3a160b51 100644 --- a/src/base/projects/Browser.svelte +++ b/src/base/projects/Browser.svelte @@ -29,6 +29,20 @@ -
- {#if commit} -
-
- {#await proj.getTree(urn, commit, "/", config)} - Loading.. - {:then tree} - - {:catch err} - {err} - {/await} +
+ {#await proj.getTree(urn, commit, "/", config)} + Loading.. + {:then tree} +
+
+ commit {commit} +
+
+
+ {#if commit} +
+
+ +
+
+
+ {#await blob} + + {:then blob} + {#if blob} + + {:else} + + {/if} + {:catch} + + {/await} +
+ {/if} +
+ {:catch err} +
+
+ API request to {err.url} failed
-
- {#await blob} - - {:then blob} - {#if blob} - - {:else} - - {/if} - {:catch} - - {/await} -
- {/if} -
+ {/await} + diff --git a/src/base/projects/View.svelte b/src/base/projects/View.svelte index 6d827f16f..53699b106 100644 --- a/src/base/projects/View.svelte +++ b/src/base/projects/View.svelte @@ -38,24 +38,12 @@ padding: 4rem 0; } main > header { - margin-bottom: 4rem; padding: 0 8rem; } .title { font-size: 2.25rem; margin-bottom: 0.5rem; } - - .anchor { - display: inline-block; - font-size: 0.75rem; - font-family: var(--font-family-monospace); - color: var(--color-secondary); - background-color: var(--color-secondary-background); - padding: 0.75rem; - border-radius: 0.25rem; - } - .urn { font-family: var(--font-family-monospace); font-size: 0.75rem; @@ -76,9 +64,6 @@
{project.meta.name}
{urn}
{project.meta.description}
-
- commit {commit || project.head} -
{:else}