Handle global errors + fix fetch sequence number crash

src/app/error.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { Button, Card, Heading, Icon, Text } from "@stellar/design-system";
+import { Box } from "@/components/layout/Box";
+import { LayoutContentContainer } from "@/components/layout/LayoutContentContainer";
+import { openUrl } from "@/helpers/openUrl";
+
+export default function Error({
+  error,
+}: {
+  error: Error & { digest?: string };
+}) {
+  // TODO: track this in Sentry once set up
+  console.log("Unhandled error: ", error);
+
+  return (
+    <LayoutContentContainer>
+      <Card>
+        <Box gap="xl" align="start">
+          <Box gap="md">
+            <Heading as="h2" size="xs" weight="medium">
+              Unhandled Error
+            </Heading>
+
+            <Text size="sm" as="p">
+              Uh-oh, we didn’t handle this error. We would appreciate it if you
+              opened an issue on GitHub, providing as many details as possible
+              to help us fix this bug.
+            </Text>
+          </Box>
+
+          <Box gap="md" direction="row">
+            <Button
+              size="sm"
+              variant="secondary"
+              icon={<Icon.ArrowLeft />}
+              iconPosition="left"
+              onClick={() => {
+                location.reload();
+              }}
+            >
+              Return
+            </Button>
+
+            <Button
+              size="sm"
+              variant="primary"
+              iconPosition="left"
+              onClick={() =>
+                openUrl("https://github.com/stellar/laboratory/issues")
+              }
+            >
+              Open Issue
+            </Button>
+          </Box>
+        </Box>
+      </Card>
+    </LayoutContentContainer>
+  );
+}

src/query/useAccountSequenceNumber.ts

@@ -18,26 +18,30 @@ export const useAccountSequenceNumber = ({
         sourceAccount = muxedAccount.baseAccount().accountId();
       }
 
-      const response = await fetch(`${horizonUrl}/accounts/${sourceAccount}`);
-      const responseJson = await response.json();
+      try {
+        const response = await fetch(`${horizonUrl}/accounts/${sourceAccount}`);
+        const responseJson = await response.json();
 
-      if (responseJson?.status === 0) {
-        throw `Unable to reach server at ${horizonUrl}.`;
-      }
+        if (responseJson?.status === 0) {
+          throw `Unable to reach server at ${horizonUrl}.`;
+        }
 
-      if (responseJson?.status?.toString()?.startsWith("4")) {
-        if (responseJson?.title === "Resource Missing") {
-          throw "Account not found. Make sure the correct network is selected and the account is funded/created.";
+        if (responseJson?.status?.toString()?.startsWith("4")) {
+          if (responseJson?.title === "Resource Missing") {
+            throw "Account not found. Make sure the correct network is selected and the account is funded/created.";
+          }
+
+          throw (
+            responseJson?.extras?.reason ||
+            responseJson?.detail ||
+            "Something went wrong when fetching the transaction sequence number. Please try again."
+          );
         }
 
-        throw (
-          responseJson?.extras?.reason ||
-          responseJson?.detail ||
-          "Something went wrong when fetching the transaction sequence number. Please try again."
-        );
+        return (BigInt(responseJson.sequence) + BigInt(1)).toString();
+      } catch (e: any) {
+        throw `${e}. Check network configuration.`;
       }
-
-      return (BigInt(responseJson.sequence) + BigInt(1)).toString();
     },
     enabled: false,
   });