feature(mobile): Add proper error handling for server errors

2 files changed, 26 insertions, 2 deletions

diff --git a/apps/mobile/components/FullPageError.tsx b/apps/mobile/components/FullPageError.tsx
new file mode 100644
index 00000000..57fd62ed
--- /dev/null
+++ b/apps/mobile/components/FullPageError.tsx
@@ -0,0 +1,23 @@
+import { Text, View } from "react-native";
+
+import { Button } from "./ui/Button";
+
+export default function FullPageError({
+  error,
+  onRetry,
+}: {
+  error: string;
+  onRetry: () => void;
+}) {
+  return (
+    <View className="size-full items-center justify-center">
+      <View className="h-1/4 items-center justify-between rounded-lg border border-gray-500 border-transparent bg-background px-10 py-4">
+        <Text className="text-bold text-3xl text-foreground">
+          Something Went Wrong
+        </Text>
+        <Text className="text-foreground"> {error}</Text>
+        <Button onPress={() => onRetry()} label="Retry" />
+      </View>
+    </View>
+  );
+}
diff --git a/apps/mobile/components/bookmarks/UpdatingBookmarkList.tsx b/apps/mobile/components/bookmarks/UpdatingBookmarkList.tsx
index f7421740..8644dcbf 100644
--- a/apps/mobile/components/bookmarks/UpdatingBookmarkList.tsx
+++ b/apps/mobile/components/bookmarks/UpdatingBookmarkList.tsx
@@ -1,9 +1,9 @@
-import { Text } from "react-native";
 import { api } from "@/lib/trpc";
 
 import type { ZGetBookmarksRequest } from "@hoarder/shared/types/bookmarks";
 import { BookmarkTypes } from "@hoarder/shared/types/bookmarks";
 
+import FullPageError from "../FullPageError";
 import FullPageSpinner from "../ui/FullPageSpinner";
 import BookmarkList from "./BookmarkList";
 
@@ -22,6 +22,7 @@ export default function UpdatingBookmarkList({
     error,
     fetchNextPage,
     isFetchingNextPage,
+    refetch,
   } = api.bookmarks.getBookmarks.useInfiniteQuery(
     { ...query, useCursorV2: true },
     {
@@ -31,7 +32,7 @@ export default function UpdatingBookmarkList({
   );
 
   if (error) {
-    return <Text>{JSON.stringify(error)}</Text>;
+    return <FullPageError error={error.message} onRetry={() => refetch()} />;
   }
 
   if (isPending || !data) {