fix: Properly handle & translate socket/misc errors on login

Signed-off-by: Pecacheu <3608878+Pecacheu@users.noreply.github.com>

Author: Pecacheu

packages/client/components/auth/src/flows/FlowHome.tsx

@@ -5,10 +5,11 @@ import { css } from "styled-system/css";
 
 import { useClientLifecycle } from "@revolt/client";
 import { State, TransitionType } from "@revolt/client/Controller";
+import { useError } from "@revolt/i18n";
 import { Navigate } from "@revolt/routing";
+import { useState } from "@revolt/state";
 import { Button, CircularProgress, Column } from "@revolt/ui";
 
-import { useState } from "@revolt/state";
 import Wordmark from "../../../../public/assets/web/wordmark.svg?component-solid";
 
 /**
@@ -17,6 +18,7 @@ import Wordmark from "../../../../public/assets/web/wordmark.svg?component-solid
 export default function FlowHome() {
   const state = useState();
   const { lifecycle, isLoggedIn, isError } = useClientLifecycle();
+  const error = useError();
 
   return (
     <Switch
@@ -88,12 +90,7 @@ export default function FlowHome() {
         <CircularProgress />
       </Match>
       <Match when={isError()}>
-        <Show
-          when={lifecycle.permanentError === "InvalidSession"}
-          fallback={lifecycle.permanentError || "An unknown error occurred."}
-        >
-          <Trans>You were logged out!</Trans>
-        </Show>
+        {error(lifecycle.permanentError)}
         <Button
           variant="filled"
           onPress={() =>

packages/client/components/client/Controller.ts

@@ -7,6 +7,7 @@ import { ProtocolV1 } from "stoat.js/lib/events/v1";
 import { ModalControllerExtended } from "@revolt/modal";
 import type { State as ApplicationState } from "@revolt/state";
 import type { Session } from "@revolt/state/stores/Auth";
+import { useNavigate } from "@solidjs/router";
 
 import Instance from "../instance/Instance";
 import { killServiceWorkerSubscription } from "./NotificationsController";
@@ -50,7 +51,7 @@ export type Transition =
     }
   | {
       type: TransitionType.PermanentFailure;
-      error: string;
+      error: unknown;
     }
   | {
       type:
@@ -91,11 +92,13 @@ class Lifecycle {
   private client: Client;
 
   #connectionFailures = 0;
-  #permanentError: string | undefined;
+  #permanentError: unknown | undefined;
   #retryTimeout: number | undefined;
+  #nav;
 
   constructor(controller: ClientController) {
     this.#controller = controller;
+    this.#nav = useNavigate();
 
     this.onState = this.onState.bind(this);
     this.onReady = this.onReady.bind(this);
@@ -204,6 +207,8 @@ class Lifecycle {
           }, retryIn * 1e3) as never;
         }
         break;
+      case State.Error:
+        this.#nav("/login");
     }
   }
 
@@ -357,30 +362,29 @@ class Lifecycle {
   }
 
   private onState(state: ConnectionState) {
-    switch (state) {
-      case ConnectionState.Disconnected:
-        if (this.client.events.lastError) {
-          if (this.client.events.lastError.type === "revolt") {
-            this.showError(this.client.events.lastError.data.type);
-            break;
-          }
-        }
-        this.transition({
-          type: TransitionType.TemporaryFailure,
-        });
-        break;
+    if (state === ConnectionState.Disconnected) {
+      if (this.client.events.lastError) {
+        const revolt = this.client.events.lastError.type === "revolt";
+        if (revolt || !this.loadedOnce())
+          return this.showError(
+            revolt
+              ? this.client.events.lastError.data
+              : { type: "SocketError" },
+          );
+      }
+      this.transition({ type: TransitionType.TemporaryFailure });
     }
   }
 
   /**
    * Get the permanent error
    */
   get permanentError() {
-    return this.#permanentError!;
+    return this.#permanentError;
   }
 
   /** Redirect to client error page */
-  showError(e: string) {
+  showError(e: unknown) {
     this.transition({
       type: TransitionType.PermanentFailure,
       error: e,

packages/client/components/i18n/errors.tsx

@@ -4,9 +4,7 @@ import { API } from "stoat.js";
 
 const RE_BREAK = /\s*\n\s*/g;
 
-function cleanError(
-  error: unknown,
-): { type?: never } | { message?: never } | string | undefined {
+function cleanError(error: unknown) {
   // Attempt to parse the incoming error as JSON if it is a string,
   // as some errors (e.g on login) are sent to this function as a string,
   // which then causes the error message to be unlocalised and unhelpful.
@@ -15,11 +13,9 @@ function cleanError(
       return JSON.parse(error);
     } catch {
       // Ignore JSON parse errors
-      return error;
     }
   }
-
-  return error as { type?: never } | { message?: never } | undefined;
+  return error;
 }
 
 /**
@@ -30,15 +26,13 @@ export function useError() {
 
   return (error: unknown) => {
     error = cleanError(error);
+    console.error(error);
 
     // TODO: HTTP errors
 
     // handle Revolt API errors
-    if (
-      (error as { type?: never } | undefined)?.type &&
-      typeof (error as { type: never }).type === "string"
-    ) {
-      const err = error as API.Error;
+    if (typeof (error as { type: never })?.type === "string") {
+      const err = error as API.Error | { type: "SocketError" };
 
       switch (err.type) {
         case "AlreadyFriends":
@@ -96,7 +90,7 @@ export function useError() {
         case "InvalidCredentials":
           return t`Provided email or password is wrong.`;
         case "InvalidSession":
-          return t`Please log in again.`;
+          return t`You were logged out!`;
         case "InvalidUsername":
           return t`This username is not allowed.`;
         case "MissingPermission":
@@ -132,6 +126,8 @@ export function useError() {
           return t`This account is not activated! Please check your account's inbox and try again.`;
         case "TotpAlreadyEnabled":
           return t`Multi-factor authentication is already enabled for this account.`;
+        case "SocketError":
+          return t`The web socket was unable to connect to the backend.`;
 
         // unreachable errors (in theory)
         case "FileTooLarge":
@@ -169,10 +165,7 @@ export function useError() {
     }
 
     // pass-through pre-localised errors with new Error({ message: <> })
-    if (
-      (error as { message?: never } | undefined)?.message &&
-      typeof (error as { message: never }).message === "string"
-    ) {
+    if (typeof (error as { message: never })?.message === "string") {
       const message = (error as { message: string }).message.trim();
       if (message) return message;
     } else if (typeof error === "string") {