UpdaterPage: Do not error if update check failed

src/components/ErrorBoundary.tsx

@@ -1,5 +1,6 @@
 import Logger from "../utils/logger";
 import { Card, React } from "../webpack/common";
+import { ErrorCard } from "./ErrorCard";
 
 interface Props {
     fallback?: React.ComponentType<React.PropsWithChildren<{ error: any; }>>;
@@ -49,12 +50,8 @@ export default class ErrorBoundary extends React.Component<React.PropsWithChildr
             />;
 
         return (
-            <Card style={{
+            <ErrorCard style={{
                 overflow: "hidden",
-                padding: "2em",
-                backgroundColor: color + "30",
-                borderColor: color,
-                color: "var(--text-normal)"
             }}>
                 <h1>Oh no!</h1>
                 <p>
@@ -62,10 +59,11 @@ export default class ErrorBoundary extends React.Component<React.PropsWithChildr
                     and in your console.
                 </p>
                 <code>
-                    <pre>{this.state.error}
+                    <pre>
+                        {this.state.error}
                     </pre>
                 </code>
-            </Card>
+            </ErrorCard>
         );
     }
 }

src/components/ErrorCard.tsx

@@ -0,0 +1,21 @@
+import { Card } from "../webpack/common";
+
+interface Props {
+    style?: React.CSSProperties;
+    className?: string;
+}
+export function ErrorCard(props: React.PropsWithChildren<Props>) {
+    return (
+        <Card className={props.className} style={
+            {
+                padding: "2em",
+                backgroundColor: "#e7828430",
+                borderColor: "#e78284",
+                color: "var(--text-normal)",
+                ...props.style
+            }
+        }>
+            {props.children}
+        </Card>
+    );
+}

src/components/Settings.tsx

@@ -74,7 +74,7 @@ export default ErrorBoundary.wrap(function Settings() {
 
             <Flex className={classes(Margins.marginBottom20)}>
                 <Button
-                    onClick={() => VencordNative.ipc.invoke(IpcEvents.OPEN_PATH, settingsDir)}
+                    onClick={() => window.DiscordNative.fileManager.showItemInFolder(settingsDir)}
                     size={Button.Sizes.SMALL}
                     disabled={settingsDirPending}
                 >

src/components/Updater.tsx

@@ -1,10 +1,11 @@
 import gitHash from "git-hash";
-import { changes, checkForUpdates, getRepo, rebuild, update, UpdateLogger } from "../utils/updater";
+import { changes, checkForUpdates, getRepo, rebuild, update, UpdateLogger, updateError } from '../utils/updater';
 import { React, Forms, Button, Margins, Alerts, Card, Parser, Toasts } from '../webpack/common';
 import { Flex } from "./Flex";
 import { useAwaiter } from '../utils/misc';
 import { Link } from "./Link";
 import ErrorBoundary from "./ErrorBoundary";
+import { ErrorCard } from "./ErrorCard";
 
 
 function withDispatcher(dispatcher: React.Dispatch<React.SetStateAction<boolean>>, action: () => any) {
@@ -31,7 +32,11 @@ function withDispatcher(dispatcher: React.Dispatch<React.SetStateAction<boolean>
             }
             Alerts.show({
                 title: "Oops!",
-                body: err.split("\n").map(line => <div>{Parser.parse(line)}</div>)
+                body: (
+                    <ErrorCard>
+                        {err.split("\n").map(line => <div>{Parser.parse(line)}</div>)}
+                    </ErrorCard>
+                )
             });
         }
         finally {
@@ -51,7 +56,7 @@ export default ErrorBoundary.wrap(function Updater() {
             UpdateLogger.error("Failed to retrieve repo", err);
     }, [err]);
 
-    const isOutdated = updates.length > 0;
+    const isOutdated = updates?.length > 0;
 
     return (
         <Forms.FormSection tag="h1" title="Vencord Updater">
@@ -67,11 +72,22 @@ export default ErrorBoundary.wrap(function Updater() {
 
             <Forms.FormTitle tag="h5">Updates</Forms.FormTitle>
 
-            <Forms.FormText className={Margins.marginBottom8}>
+            {!updates && updateError ? (
-                {updates.length ? `There are ${updates.length} Updates` : "Up to Date!"}
+                <>
-            </Forms.FormText>
+                    <Forms.FormText>Failed to check updates. Check the console for more info</Forms.FormText>
+                    <ErrorCard style={{ padding: "1em" }}>
+                        <p>{updateError.stderr || updateError.stdout || "An unknown error occurred"}</p>
+                    </ErrorCard>
+                </>
+            ) :
+                (
+                    <Forms.FormText className={Margins.marginBottom8}>
+                        {isOutdated ? `There are ${updates.length} Updates` : "Up to Date!"}
+                    </Forms.FormText>
+                )
+            }
 
-            {updates.length > 0 && (
+            {isOutdated && (
                 <Card style={{ padding: ".5em" }}>
                     {updates.map(({ hash, author, message }) => (
                         <div>
@@ -139,6 +155,6 @@ export default ErrorBoundary.wrap(function Updater() {
                     Check for Updates
                 </Button>
             </Flex>
-        </Forms.FormSection>
+        </Forms.FormSection >
     );
 });

src/utils/updater.ts

@@ -4,12 +4,15 @@ import { IpcRes } from './types';
 
 export const UpdateLogger = new Logger("Updater", "white");
 export let isOutdated = false;
+export let updateError: any;
 export let changes: Record<"hash" | "author" | "message", string>[];
 
 async function Unwrap<T>(p: Promise<IpcRes<T>>) {
     const res = await p;
 
     if (res.ok) return res.value;
+
+    updateError = res.error;
     throw res.error;
 }