Error boundary messaging (#182)

dgca · web-flow · commit 8788c8f5dcc4 · 2024-03-25T16:50:05.000-06:00
* Update messaging on error boundary

* Update messaging

* Tweak function name

* Add restart app button
diff --git a/main/api/updates/index.ts b/main/api/updates/index.ts
@@ -1,6 +1,7 @@
 import axios from "axios";
 import { app } from "electron";
 import log from "electron-log";
+import { clean, gt } from "semver";
 
 import { PartialGithubRelease } from "../../../shared/types";
 import { t } from "../trpc";
@@ -16,52 +17,67 @@ let cachedResult:
   | { ok: true; data: ReadonlyArray<PartialGithubRelease> }
   | { ok: false; data: string } = { ok: false, data: "" };
 
+async function getLatestReleases() {
+  const now = performance.now();
+
+  if (now - cacheTime > lastAttempt) {
+    lastAttempt = now;
+    log.log("Fetching releases from GitHub");
+    await axios
+      .get(githubReleaseUrl, {
+        headers: {
+          accept: "application/vnd.github+json",
+          "X-GitHub-Api-Version": "2022-11-28",
+        },
+      })
+      .then((response) => {
+        cachedResult = { ok: true, data: response.data };
+      })
+      .catch((error) => {
+        let errorData;
+        if (error.response) {
+          // The request was made and the server responded with a status code
+          // that falls out of the range of 2xx
+          errorData = JSON.stringify(error.response.data);
+        } else if (error.request) {
+          // The request was made but no response was received
+          // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
+          // http.ClientRequest in node.js
+          errorData = JSON.stringify(error.request);
+        } else {
+          errorData = JSON.stringify(error.message);
+        }
+
+        log.error("An error occurred while fetching update notes:", errorData);
+        cachedResult = { ok: false, data: errorData };
+      });
+  }
+
+  return cachedResult;
+}
+
 export const updateRouter = t.router({
   getCurrentVersion: t.procedure.query(async () => {
     return app.getVersion();
   }),
-  getUpdateNotes: t.procedure.query(async () => {
-    const now = performance.now();
+  isUpdateAvailable: t.procedure.query(async () => {
+    const latestRelease = await getLatestReleases();
 
-    if (now - cacheTime > lastAttempt) {
-      lastAttempt = now;
-      log.log("Fetching releases from GitHub");
-      await axios
-        .get(githubReleaseUrl, {
-          headers: {
-            accept: "application/vnd.github+json",
-            "X-GitHub-Api-Version": "2022-11-28",
-          },
-        })
-        .then((response) => {
-          cachedResult = { ok: true, data: response.data };
-        })
-        .catch((error) => {
-          let errorData;
-          if (error.response) {
-            // The request was made and the server responded with a status code
-            // that falls out of the range of 2xx
-            errorData = JSON.stringify(error.response.data);
-          } else if (error.request) {
-            // The request was made but no response was received
-            // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
-            // http.ClientRequest in node.js
-            errorData = JSON.stringify(error.request);
-          } else {
-            errorData = JSON.stringify(error.message);
-          }
+    if (!latestRelease.ok) return false;
 
-          log.error(
-            "An error occurred while fetching update notes:",
-            errorData,
-          );
-          cachedResult = { ok: false, data: errorData };
-        });
-    }
+    const latestVersion = clean(latestRelease.data[0].tag_name);
 
-    if (cachedResult.ok) {
-      return cachedResult.data;
+    if (!latestVersion) return false;
+
+    return gt(latestVersion, app.getVersion());
+  }),
+  getUpdateNotes: t.procedure.query(async () => {
+    const latestRelease = await getLatestReleases();
+
+    if (latestRelease.ok) {
+      return latestRelease.data;
     }
-    throw new Error(cachedResult.data);
+
+    throw new Error(latestRelease.data);
   }),
 });
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -86,6 +86,7 @@
     "react-intl": "^6.5.5",
     "react-markdown": "9.0.1",
     "react-virtuoso": "^4.6.2",
+    "semver": "^7.6.0",
     "tar": "^6.2.0",
     "tsx": "^4.6.2",
     "type-fest": "^4.6.0",
diff --git a/renderer/components/ErrorBoundary/ErrorBoundary.tsx b/renderer/components/ErrorBoundary/ErrorBoundary.tsx
@@ -1,5 +1,16 @@
 import { CopyIcon } from "@chakra-ui/icons";
-import { Box, Flex, Text, Heading, Code, HStack } from "@chakra-ui/react";
+import {
+  Box,
+  Flex,
+  Text,
+  Heading,
+  Code,
+  HStack,
+  chakra,
+  Grid,
+  ListItem,
+  OrderedList,
+} from "@chakra-ui/react";
 import log from "electron-log";
 import { Component, ErrorInfo, ReactNode } from "react";
 import { defineMessages, useIntl } from "react-intl";
@@ -8,6 +19,7 @@ import { useCopyToClipboard } from "usehooks-ts";
 import { WithDraggableArea } from "@/layouts/WithDraggableArea";
 import { trpcReact } from "@/providers/TRPCProvider";
 import { COLORS } from "@/ui/colors";
+import { PillButton } from "@/ui/PillButton/PillButton";
 import { useIFToast } from "@/ui/Toast/Toast";
 
 import { ResetNodeButton } from "../NodeSettings/NodeSettings";
@@ -16,16 +28,33 @@ const messages = defineMessages({
   errorStateHeading: {
     defaultMessage: "Something went wrong",
   },
-  errorStateDescription: {
-    defaultMessage:
-      "Please restart the app and try again. If the issue persists, let us know on Discord so we can help troubleshoot.",
-  },
   errorMessage: {
     defaultMessage: "Error Message",
   },
   errorCopied: {
     defaultMessage: "Error copied to clipboard",
   },
+  troubleshootingSteps: {
+    defaultMessage: "Troubleshooting Steps",
+  },
+  restartApp: {
+    defaultMessage: "Try restarting the app",
+  },
+  updateAvailable: {
+    defaultMessage:
+      "An app update is available. Wait for it to finish downloading and restart the app, or download the latest version from the <link>Iron Fish website</link>.",
+  },
+  resetNode: {
+    defaultMessage:
+      "Reset the node. You'll have to re-scan the blockchain, but your accounts and funds will not be affected.",
+  },
+  reportIssue: {
+    defaultMessage:
+      "If none of these steps help, please report the issue on <link>Discord</link>.",
+  },
+  restartAppButton: {
+    defaultMessage: "Restart App",
+  },
 });
 
 type Props = {
@@ -68,16 +97,16 @@ function DefaultFallback({ error }: { error: Error }) {
   const [_, copyToClipboard] = useCopyToClipboard();
   const toast = useIFToast();
   const { mutate: relaunchApp } = trpcReact.relaunchApp.useMutation();
+
+  const { data: isUpdateAvailable } = trpcReact.isUpdateAvailable.useQuery();
+
   return (
     <WithDraggableArea>
       <Flex h="100%" alignItems="center" justifyContent="center" p={4}>
         <Box maxW="100%" w="800px">
           <Heading as="h1" textAlign="center" mb={4}>
             {formatMessage(messages.errorStateHeading)}
           </Heading>
-          <Text textAlign="center" fontSize="md" mb={6}>
-            {formatMessage(messages.errorStateDescription)}
-          </Text>
 
           <HStack>
             <Text
@@ -108,19 +137,72 @@ function DefaultFallback({ error }: { error: Error }) {
             maxW="100%"
             w="100%"
             overflow="auto"
-            mb={8}
+            mb={6}
           >
             <Text as="pre">{error.message}</Text>
           </Code>
 
-          <ResetNodeButton
-            buttonProps={{
-              variant: "primary",
-            }}
-            onSuccess={() => {
-              relaunchApp();
-            }}
-          />
+          <Grid gap={4} mb={6}>
+            <Text fontWeight="bold" fontSize="md">
+              {formatMessage(messages.troubleshootingSteps)}
+            </Text>
+            <OrderedList>
+              <ListItem>{formatMessage(messages.restartApp)}</ListItem>
+              {isUpdateAvailable && (
+                <ListItem>
+                  {formatMessage(messages.updateAvailable, {
+                    link: (content: unknown) => {
+                      return (
+                        <chakra.span
+                          as="a"
+                          color={COLORS.LINK}
+                          href="https://ironfish.network/use/node-app"
+                          target="_blank"
+                          rel="noreferrer"
+                          _hover={{ textDecoration: "underline" }}
+                        >
+                          {Array.isArray(content) && content.at(0)}
+                        </chakra.span>
+                      );
+                    },
+                  })}
+                </ListItem>
+              )}
+              <ListItem>{formatMessage(messages.resetNode)}</ListItem>
+              <ListItem>
+                {formatMessage(messages.reportIssue, {
+                  link: (content: unknown) => {
+                    return (
+                      <chakra.span
+                        as="a"
+                        color={COLORS.LINK}
+                        href="https://discord.ironfish.network/"
+                        target="_blank"
+                        rel="noreferrer"
+                        _hover={{ textDecoration: "underline" }}
+                      >
+                        {Array.isArray(content) && content.at(0)}
+                      </chakra.span>
+                    );
+                  },
+                })}
+              </ListItem>
+            </OrderedList>
+          </Grid>
+
+          <HStack>
+            <ResetNodeButton
+              buttonProps={{
+                variant: "inverted",
+              }}
+              onSuccess={() => {
+                relaunchApp();
+              }}
+            />
+            <PillButton onClick={() => relaunchApp()}>
+              {formatMessage(messages.restartAppButton)}
+            </PillButton>
+          </HStack>
         </Box>
       </Flex>
     </WithDraggableArea>
diff --git a/renderer/intl/locales/en-US.json b/renderer/intl/locales/en-US.json
@@ -108,6 +108,9 @@
   "6P/bTL": {
     "message": "Connection Type"
   },
+  "6Zll8z": {
+    "message": "Reset the node. You'll have to re-scan the blockchain, but your accounts and funds will not be affected."
+  },
   "6q3tCn": {
     "message": "Connecting"
   },
@@ -228,6 +231,9 @@
   "HtgUU8": {
     "message": "Type ''{accountName}'' to remove"
   },
+  "IwW0RC": {
+    "message": "If none of these steps help, please report the issue on <link>Discord</link>."
+  },
   "JJNc3c": {
     "message": "Previous"
   },
@@ -256,6 +262,9 @@
   "KN7zKn": {
     "message": "Error"
   },
+  "KiaI4a": {
+    "message": "Try restarting the app"
+  },
   "Kkv03/": {
     "message": "Transaction Details"
   },
@@ -400,9 +409,6 @@
   "VzzYJk": {
     "message": "Create"
   },
-  "WHjylD": {
-    "message": "Please restart the app and try again. If the issue persists, let us know on Discord so we can help troubleshoot."
-  },
   "WKCp0D": {
     "message": "Asset"
   },
@@ -466,6 +472,9 @@
   "bcOwoF": {
     "message": "Choose your language"
   },
+  "bqjW+S": {
+    "message": "Troubleshooting Steps"
+  },
   "c/KktL": {
     "message": "Resources"
   },
@@ -553,6 +562,9 @@
   "kF9XUo": {
     "message": "Timestamp"
   },
+  "kNJdlj": {
+    "message": "Restart App"
+  },
   "kTt/ND": {
     "message": "Russian"
   },
@@ -577,6 +589,9 @@
   "o0DpEu": {
     "message": "Unzipping..."
   },
+  "oZO6n5": {
+    "message": "An app update is available. Wait for it to finish downloading and restart the app, or download the latest version from the <link>Iron Fish website</link>."
+  },
   "omnNfq": {
     "message": "About Fees"
   },
