Radish alpha
r
radicle-desktop
rad:z4D5UCArafTzTQpDZNQRuqswh3ury
Radicle desktop app
Radicle
Git
Patches › 8a7d149c
Provide a full window error if something goes wrong
Merged did:key:z6MkkfM3...sVz5 opened 10 months ago

Explain to users what could have gone wrong, how to fix it, and else show them where the support channel is.

Also show a spinner if startup takes more than 1 sec

Activity Changes +169 -2
7 files changed +169 -2 b001e6d5 → 8e683cf7
modified crates/radicle-tauri/src/commands/startup.rs
@@ -48,9 +48,13 @@ pub(crate) fn check_radicle_cli(ctx: tauri::State<AppState>) -> Result<(), Error
#[tauri::command]

pub(crate) fn startup(app: AppHandle) -> Result<Config, Error> {

    let profile = radicle::Profile::load()?;
+ 
    let home = profile.home();

    let repositories = profile.storage.repositories()?;

    let public_key = profile.public_key;
+ 
    let cobs_cache = radicle::cob::cache::Store::open(home.cobs().join(COBS_DB_FILE))?;
+ 
    cobs_cache.check_version()?;
+ 


    let inbox_db = radicle_types::outbound::sqlite::Sqlite::reader(

        profile.node().join(NOTIFICATIONS_DB_FILE),

    )?;
modified crates/radicle-types/src/error.rs
@@ -19,6 +19,10 @@ pub enum Error {
    #[error("ssh agent not running")]

    AgentNotRunning,
+ 
    /// Generic Cob cache error.
+ 
    #[error(transparent)]
+ 
    Cache(#[from] radicle::cob::cache::Error),
+ 


    /// Embeds error.

    #[error("not able to save embed")]

    SaveEmbedError,
modified src/App.svelte
@@ -18,6 +18,7 @@
  } from "@app/lib/appearance.svelte";

  import { theme } from "@app/components/ThemeSwitch.svelte";

  import { unreachable, isMac } from "@app/lib/utils";
+ 
  import delay from "lodash/delay";



  import Auth from "@app/views/booting/Auth.svelte";

  import CreateIdentity from "@app/views/booting/CreateIdentity.svelte";
@@ -28,6 +29,10 @@
  import Patches from "@app/views/repo/Patches.svelte";

  import RepoHome from "@app/views/repo/RepoHome.svelte";

  import Repos from "@app/views/home/Repos.svelte";
+ 
  import Spinner from "./components/Spinner.svelte";
+ 
  import FullWindowError from "./components/FullWindowError.svelte";
+ 
  import ExternalLink from "./components/ExternalLink.svelte";
+ 
  import Command from "./components/Command.svelte";



  const activeRouteStore = router.activeRouteStore;
@@ -36,6 +41,9 @@
  let unlistenNodeEvents: UnlistenFn | undefined = undefined;

  let unlistenSyncStatus: UnlistenFn | undefined = undefined;
+ 
  let showSpinner = $state(false);
+ 
  delay(() => (showSpinner = true), 1000);
+ 


  onMount(async () => {

    try {

      profile = await invoke<Config>("startup");
@@ -85,6 +93,15 @@
  $effect(() => document.documentElement.setAttribute("data-theme", $theme));

</script>
+ 
<style>
+ 
  .spinner {
+ 
    display: flex;
+ 
    justify-content: center;
+ 
    align-items: center;
+ 
    height: 100%;
+ 
  }
+ 
</style>
+ 


<svelte:document

  onkeydown={e => {

    const auxiliarKey = isMac() ? e.metaKey : e.ctrlKey;
@@ -104,6 +121,26 @@
    <CreateIdentity />

  {:else if startup.error?.code === "PassphraseError.InvalidPassphrase" && profile}

    <Auth profile={{ did: profile.publicKey, alias: profile.alias }} />
+ 
  {:else if startup.error}
+ 
    <FullWindowError title="An error occurred" error={startup.error}>
+ 
      We were unable to load your Radicle identity, or your Radicle installation
+ 
      is outdated.
+ 
      <br />
+ 
      If you have an existing Radicle installation, make sure you have
+ 
      <ExternalLink href="https://radicle.xyz/download">
+ 
        the latest version.
+ 
      </ExternalLink>
+ 
      <br />
+ 
      <br />
+ 
      <div
+ 
        style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
+ 
        To migrate your Radicle storage, make sure to restart your radicle-node
+ 
        or run:
+ 
        <Command styleWidth="30rem" command="rad cob migrate" />
+ 
      </div>
+ 
    </FullWindowError>
+ 
  {:else if showSpinner}
+ 
    <div class="spinner"><Spinner /></div>

  {/if}

{:else if $activeRouteStore.resource === "home"}

  <Repos {...$activeRouteStore.params} />
modified src/components/Border.svelte
@@ -10,6 +10,7 @@
    stylePadding?: string;

    styleHeight?: string;

    styleMaxHeight?: string;
+ 
    styleMaxWidth?: string;

    styleMinHeight?: string;

    styleMinWidth?: string;

    styleWidth?: string;
@@ -33,6 +34,7 @@
    stylePadding,

    styleHeight,

    styleMaxHeight,
+ 
    styleMaxWidth,

    styleMinHeight,

    stylePosition,

    styleWidth,
@@ -221,6 +223,7 @@
<!-- svelte-ignore a11y_click_events_have_key_events -->

<div

  style:width={styleWidth}
+ 
  style:max-width={styleMaxWidth}

  style:cursor={styleCursor}

  class="container"

  class:flat-top={flatTop}
modified src/components/Command.svelte
@@ -5,9 +5,10 @@
  interface Props {

    command: string;

    styleWidth: string;
+ 
    showPrompt?: boolean;

  }
- 
  const { command, styleWidth }: Props = $props();
+ 
  const { command, styleWidth, showPrompt = true }: Props = $props();



  let clipboard: Clipboard;

</script>
@@ -33,7 +34,7 @@
    {styleWidth}

    variant="ghost">

    <span class="txt-overflow">
- 
      $ {command}
+ 
      {showPrompt ? "$ " : ""}{command}

    </span>

    <Clipboard bind:this={clipboard} text={command} />

  </Border>
added src/components/ExternalLink.svelte
@@ -0,0 +1,42 @@
+ 
<script lang="ts">
+ 
  import type { Snippet } from "svelte";
+
+ 
  import Icon from "./Icon.svelte";
+
+ 
  const { href, children }: { href: string; children?: Snippet } = $props();
+ 
</script>
+
+ 
<style>
+ 
  a {
+ 
    font-weight: var(--font-weight-semibold);
+ 
    color: inherit;
+ 
    display: inline-flex;
+ 
    align-items: center;
+ 
    gap: 0.25rem;
+ 
    text-decoration: none;
+ 
  }
+ 
  a:hover {
+ 
    text-decoration: underline;
+ 
    text-underline-offset: 2px;
+ 
    color: var(--color-fill-secondary);
+ 
  }
+
+ 
  .icon {
+ 
    color: var(--color-foreground-dim);
+ 
    position: relative;
+ 
    bottom: 1px;
+ 
  }
+
+ 
  a:hover .icon {
+ 
    color: var(--color-fill-secondary-hover);
+ 
  }
+ 
</style>
+
+ 
<a {href} target="_blank" rel="noreferrer">
+ 
  {#if children}
+ 
    {@render children()}
+ 
  {:else}
+ 
    {href}
+ 
  {/if}
+ 
  <span class="icon"><Icon name="open-external" /></span>
+ 
</a>
added src/components/FullWindowError.svelte
@@ -0,0 +1,76 @@
+ 
<script lang="ts">
+ 
  import type { Snippet } from "svelte";
+ 
  import type { ErrorWrapper } from "@bindings/error/ErrorWrapper";
+
+ 
  import ExternalLink from "./ExternalLink.svelte";
+ 
  import Border from "./Border.svelte";
+ 
  import Icon from "./Icon.svelte";
+ 
  import Command from "./Command.svelte";
+
+ 
  const {
+ 
    title = "An error occurred",
+ 
    children,
+ 
    error,
+ 
  }: { title?: string; children?: Snippet; error?: ErrorWrapper } = $props();
+ 
</script>
+
+ 
<style>
+ 
  .error-container {
+ 
    display: flex;
+ 
    align-items: center;
+ 
    justify-content: center;
+ 
    height: 100%;
+ 
    width: 100%;
+ 
  }
+
+ 
  .error-icon {
+ 
    color: var(--color-fill-);
+ 
    margin-bottom: 1rem;
+ 
  }
+
+ 
  .error-title {
+ 
    font-size: var(--font-size-large);
+ 
    font-weight: var(--font-weight-bold);
+ 
    margin: 0 0 0.75rem 0;
+ 
  }
+
+ 
  .error-support {
+ 
    padding: 0 2rem;
+ 
    margin-bottom: 0;
+ 
  }
+ 
</style>
+
+ 
<div class="error-container txt-small">
+ 
  <Border
+ 
    styleMaxWidth="45rem"
+ 
    variant="float"
+ 
    styleJustifyContent="center"
+ 
    styleBackgroundColor="var(--color-background-float)"
+ 
    styleDisplay="flex"
+ 
    styleFlexDirection="column"
+ 
    stylePadding="1.5rem">
+ 
    <div class="error-icon">
+ 
      <Icon size="32" name="warning" />
+ 
    </div>
+
+ 
    <h2 class="error-title">{title}</h2>
+
+ 
    {#if children}
+ 
      <p class="error-support" style:text-align="center">
+ 
        {@render children()}
+ 
      </p>
+ 
    {/if}
+
+ 
    <p class="error-support">
+ 
      If this problem persists, please contact
+ 
      <ExternalLink
+ 
        href="https://radicle.zulipchat.com/#narrow/channel/444463-desktop/topic/support">
+ 
        support{error ? " with the error details below." : "."}
+ 
      </ExternalLink>
+ 
    </p>
+
+ 
    {#if error?.message}
+ 
      <Command styleWidth="30rem" showPrompt={false} command={error.message} />
+ 
    {/if}
+ 
  </Border>
+ 
</div>