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
getAlby · Sep 10, 2024 · 2308c1a · 2308c1a
1 parent 1a08bed
commit 2308c1a
Show file tree

Hide file tree

Showing 11 changed files with 81 additions and 63 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,4 +1,3 @@
-
 import Screen from "~/components/Screen";
 import { router, useLocalSearchParams } from "expo-router";
 import React from "react";
@@ -39,24 +38,26 @@ 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();
         }}
       >
         <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
@@ -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
@@ -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);
   }