From 2308c1a7c7511ea2a804d62a9158b0e34d7cdd66 Mon Sep 17 00:00:00 2001
From: Roland Bewick <roland.bewick@gmail.com>
Date: Tue, 10 Sep 2024 13:28:34 +0700
Subject: [PATCH] fix: error handling

previously we do not properly catch errors in the swr methods.

errorToast also threw an uncaught exception if it did not receive an error, which lead to the app hanging
---
 components/ToastConfig.tsx                  | 10 ++---
 hooks/useBalance.ts                         | 11 +++++-
 hooks/useInfo.ts                            | 11 +++++-
 hooks/useTransactions.ts                    | 17 ++++++---
 lib/errorToast.ts                           |  6 ++-
 lib/swr.ts                                  |  3 +-
 pages/receive/Receive.tsx                   | 18 ++++-----
 pages/send/ConfirmPayment.tsx               | 41 +++++++++++----------
 pages/send/LNURLPay.tsx                     | 14 +++----
 pages/send/Send.tsx                         |  9 ++---
 pages/settings/wallets/WalletConnection.tsx |  4 +-
 11 files changed, 81 insertions(+), 63 deletions(-)

diff --git a/components/ToastConfig.tsx b/components/ToastConfig.tsx
index d68ade5..cd4b8a7 100644
--- a/components/ToastConfig.tsx
+++ b/components/ToastConfig.tsx
@@ -13,20 +13,16 @@ export const toastConfig: ToastConfig = {
         <CheckCircle className="text-background" width={16} height={16} />
         <Text className="text-background font-semibold2">{text1}</Text>
       </View>
-      {text2 &&
-        <Text className="text-background text-center">{text2}</Text>
-      }
+      {text2 && <Text className="text-background text-center">{text2}</Text>}
     </View>
   ),
   error: ({ text1, text2, hide }) => (
-    <View className="bg-foreground rounded-full px-6 py-3 mx-6">
+    <View className="bg-destructive rounded-full px-6 py-3 mx-6">
       <View className="flex flex-row gap-2 justify-center items-center">
         <XCircle className="text-background" width={16} height={16} />
         <Text className="text-background font-semibold2">{text1}</Text>
       </View>
-      {text2 &&
-        <Text className="text-background text-center">{text2}</Text>
-      }
+      {text2 && <Text className="text-background text-center">{text2}</Text>}
     </View>
   ),
   connectionError: ({ text1, text2, hide }) => {
diff --git a/hooks/useBalance.ts b/hooks/useBalance.ts
index b643f4b..90fa221 100644
--- a/hooks/useBalance.ts
+++ b/hooks/useBalance.ts
@@ -1,13 +1,20 @@
 import { useAppStore } from "lib/state/appStore";
 import useSWR from "swr";
+import { errorToast } from "~/lib/errorToast";
 
 type FetchArgs = Parameters<typeof fetch>;
-const fetcher = (...args: FetchArgs) => {
+const fetcher = async (...args: FetchArgs) => {
   const nwcClient = useAppStore.getState().nwcClient;
   if (!nwcClient) {
     throw new Error("No NWC client");
   }
-  return nwcClient.getBalance();
+  try {
+    const balance = await nwcClient.getBalance();
+    return balance;
+  } catch (error) {
+    errorToast(error);
+    throw error;
+  }
 };
 
 export function useBalance() {
diff --git a/hooks/useInfo.ts b/hooks/useInfo.ts
index db89bd3..f62618f 100644
--- a/hooks/useInfo.ts
+++ b/hooks/useInfo.ts
@@ -1,13 +1,20 @@
 import { useAppStore } from "lib/state/appStore";
 import useSWR from "swr";
+import { errorToast } from "~/lib/errorToast";
 
 type FetchArgs = Parameters<typeof fetch>;
-const fetcher = (...args: FetchArgs) => {
+const fetcher = async (...args: FetchArgs) => {
   const nwcClient = useAppStore.getState().nwcClient;
   if (!nwcClient) {
     throw new Error("No NWC client");
   }
-  return nwcClient.getInfo();
+  try {
+    const info = await nwcClient.getInfo();
+    return info;
+  } catch (error) {
+    errorToast(error);
+    throw error;
+  }
 };
 
 export function useInfo() {
diff --git a/hooks/useTransactions.ts b/hooks/useTransactions.ts
index 574b15f..993d17e 100644
--- a/hooks/useTransactions.ts
+++ b/hooks/useTransactions.ts
@@ -1,10 +1,11 @@
 import { useAppStore } from "lib/state/appStore";
 import useSWR from "swr";
 import { TRANSACTIONS_PAGE_SIZE } from "~/lib/constants";
+import { errorToast } from "~/lib/errorToast";
 
 type FetchArgs = Parameters<typeof fetch>;
 
-const fetcher = (...args: FetchArgs) => {
+const fetcher = async (...args: FetchArgs) => {
   const nwcClient = useAppStore.getState().nwcClient;
   if (!nwcClient) {
     throw new Error("No NWC client");
@@ -13,10 +14,16 @@ const fetcher = (...args: FetchArgs) => {
   const transactionsUrl = new URL("http://" + (args[0] as string));
   const page = +(transactionsUrl.searchParams.get("page") as string);
 
-  return nwcClient.listTransactions({
-    limit: TRANSACTIONS_PAGE_SIZE,
-    offset: (page - 1) * TRANSACTIONS_PAGE_SIZE,
-  });
+  try {
+    const transactions = await nwcClient.listTransactions({
+      limit: TRANSACTIONS_PAGE_SIZE,
+      offset: (page - 1) * TRANSACTIONS_PAGE_SIZE,
+    });
+    return transactions;
+  } catch (error) {
+    errorToast(error);
+    throw error;
+  }
 };
 
 export function useTransactions(page = 1) {
diff --git a/lib/errorToast.ts b/lib/errorToast.ts
index f7820c8..d620adc 100644
--- a/lib/errorToast.ts
+++ b/lib/errorToast.ts
@@ -1,8 +1,10 @@
 import Toast from "react-native-toast-message";
 
-export function errorToast(error: Error) {
+export function errorToast(error: Error | unknown) {
   Toast.show({
     type: "error",
-    text1: error.message,
+    text1:
+      (error as Error | undefined)?.message ||
+      "An unknown error occured. Please check your internet connection or try restarting Alby Go",
   });
 }
diff --git a/lib/swr.ts b/lib/swr.ts
index 20eb19d..ce69b84 100644
--- a/lib/swr.ts
+++ b/lib/swr.ts
@@ -1,5 +1,4 @@
-import { BareFetcher, SWRConfiguration } from "swr";
-import { useAppStore } from "./state/appStore";
+import { SWRConfiguration } from "swr";
 // import AsyncStorage from "@react-native-async-storage/async-storage";
 
 export const swrConfiguration: SWRConfiguration = {
diff --git a/pages/receive/Receive.tsx b/pages/receive/Receive.tsx
index 9454d14..66e4b37 100644
--- a/pages/receive/Receive.tsx
+++ b/pages/receive/Receive.tsx
@@ -58,7 +58,7 @@ export function Receive() {
         setEnterCustomAmount(false);
       } catch (error) {
         console.error(error);
-        errorToast(error as Error);
+        errorToast(error);
       }
       setLoading(false);
     })();
@@ -100,7 +100,7 @@ export function Receive() {
                 polling &&
                 pollCount > 0 &&
                 receivedTransaction.payment_hash !==
-                prevTransaction?.payment_hash
+                  prevTransaction?.payment_hash
               ) {
                 if (
                   !invoiceRef.current ||
@@ -169,15 +169,13 @@ export function Receive() {
       });
     } catch (error) {
       console.error("Error sharing:", error);
-      errorToast(error as Error);
+      errorToast(error);
     }
   }
 
   return (
     <>
-      <Screen
-        title="Receive"
-      />
+      <Screen title="Receive" />
       {!enterCustomAmount && !invoice && !lightningAddress && (
         <>
           <View className="flex-1 h-full flex flex-col items-center justify-center gap-5">
@@ -242,7 +240,11 @@ export function Receive() {
           </View>
 
           <View className="flex flex-row gap-3 p-6">
-            <Button onPress={share} variant="secondary" className="flex-1 flex flex-col gap-2">
+            <Button
+              onPress={share}
+              variant="secondary"
+              className="flex-1 flex flex-col gap-2"
+            >
               <Share2 className="text-muted-foreground" />
               <Text>Share</Text>
             </Button>
@@ -311,5 +313,3 @@ export function Receive() {
     </>
   );
 }
-
-
diff --git a/pages/send/ConfirmPayment.tsx b/pages/send/ConfirmPayment.tsx
index 7d8c1fc..2d72f9c 100644
--- a/pages/send/ConfirmPayment.tsx
+++ b/pages/send/ConfirmPayment.tsx
@@ -46,7 +46,7 @@ export function ConfirmPayment() {
       });
     } catch (error) {
       console.error(error);
-      errorToast(error as Error);
+      errorToast(error);
     }
     setLoading(false);
   }
@@ -56,9 +56,7 @@ export function ConfirmPayment() {
   });
   return (
     <>
-      <Screen
-        title="Confirm Payment"
-      />
+      <Screen title="Confirm Payment" />
       <View className="flex-1 justify-center items-center gap-8 p-6">
         <View className="flex flex-col gap-2">
           <View className="flex flex-row items-center justify-center gap-2">
@@ -98,24 +96,29 @@ export function ConfirmPayment() {
         )}
         {
           /* only show "To" for lightning addresses */ originalText !==
-          invoice &&
-          originalText
-            .toLowerCase()
-            .replace("lightning:", "")
-            .includes("@") && (
-            <View className="flex flex-col gap-2">
-              <Text className="text-muted-foreground text-center font-semibold2">
-                To
-              </Text>
-              <Text className="text-center text-foreground text-2xl font-medium2">
-                {originalText.toLowerCase().replace("lightning:", "")}
-              </Text>
-            </View>
-          )
+            invoice &&
+            originalText
+              .toLowerCase()
+              .replace("lightning:", "")
+              .includes("@") && (
+              <View className="flex flex-col gap-2">
+                <Text className="text-muted-foreground text-center font-semibold2">
+                  To
+                </Text>
+                <Text className="text-center text-foreground text-2xl font-medium2">
+                  {originalText.toLowerCase().replace("lightning:", "")}
+                </Text>
+              </View>
+            )
         }
       </View>
       <View className="p-6">
-        <Button size="lg" onPress={pay} className="flex flex-row gap-2" disabled={isLoading}>
+        <Button
+          size="lg"
+          onPress={pay}
+          className="flex flex-row gap-2"
+          disabled={isLoading}
+        >
           {isLoading ? (
             <Loading className="text-primary-foreground" />
           ) : (
diff --git a/pages/send/LNURLPay.tsx b/pages/send/LNURLPay.tsx
index 21f1a92..03b98e5 100644
--- a/pages/send/LNURLPay.tsx
+++ b/pages/send/LNURLPay.tsx
@@ -1,4 +1,3 @@
-
 import Screen from "~/components/Screen";
 import { router, useLocalSearchParams } from "expo-router";
 import React from "react";
@@ -39,16 +38,14 @@ export function LNURLPay() {
       });
     } catch (error) {
       console.error(error);
-      errorToast(error as Error);
+      errorToast(error);
     }
     setLoading(false);
   }
 
   return (
     <>
-      <Screen
-        title="Send"
-      />
+      <Screen title="Send" />
       <TouchableWithoutFeedback
         onPress={() => {
           Keyboard.dismiss();
@@ -56,7 +53,11 @@ export function LNURLPay() {
       >
         <View className="flex-1 flex flex-col">
           <View className="flex-1 justify-center items-center p-6 gap-6">
-            <DualCurrencyInput amount={amount} setAmount={setAmount} autoFocus />
+            <DualCurrencyInput
+              amount={amount}
+              setAmount={setAmount}
+              autoFocus
+            />
             <View className="w-full">
               <Text className="text-muted-foreground text-center font-semibold2">
                 Comment
@@ -91,7 +92,6 @@ export function LNURLPay() {
           </View>
         </View>
       </TouchableWithoutFeedback>
-
     </>
   );
 }
diff --git a/pages/send/Send.tsx b/pages/send/Send.tsx
index 58a1c6e..5811592 100644
--- a/pages/send/Send.tsx
+++ b/pages/send/Send.tsx
@@ -1,4 +1,3 @@
-
 import Screen from "~/components/Screen";
 import React, { useEffect } from "react";
 import { Keyboard, TouchableWithoutFeedback, View } from "react-native";
@@ -103,16 +102,14 @@ export function Send() {
       }
     } catch (error) {
       console.error("failed to load payment", originalText, error);
-      errorToast(error as Error);
+      errorToast(error);
       setLoading(false);
     }
   }
 
   return (
     <>
-      <Screen
-        title="Send"
-      />
+      <Screen title="Send" />
       {isLoading && (
         <View className="flex-1 flex flex-col items-center justify-center">
           <Loading className="text-primary-foreground" />
@@ -173,7 +170,7 @@ export function Send() {
                     inputMode="email"
                     autoFocus
                     returnKeyType="done"
-                  // aria-errormessage="inputError"
+                    // aria-errormessage="inputError"
                   />
                 </View>
                 <Button onPress={submitKeyboardText} size="lg">
diff --git a/pages/settings/wallets/WalletConnection.tsx b/pages/settings/wallets/WalletConnection.tsx
index 3bb0909..6c78d6b 100644
--- a/pages/settings/wallets/WalletConnection.tsx
+++ b/pages/settings/wallets/WalletConnection.tsx
@@ -45,7 +45,7 @@ export function WalletConnection() {
       nostrWalletConnectUrl = await Clipboard.getStringAsync();
     } catch (error) {
       console.error("Failed to read clipboard", error);
-      errorToast(error as Error);
+      errorToast(error);
       return;
     }
     connect(nostrWalletConnectUrl);
@@ -81,7 +81,7 @@ export function WalletConnection() {
       });
     } catch (error) {
       console.error(error);
-      errorToast(error as Error);
+      errorToast(error);
     }
     setConnecting(false);
   }