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

6 files changed, 58 insertions, 13 deletions

diff --git a/apps/mobile/app/dashboard/(tabs)/lists.tsx b/apps/mobile/app/dashboard/(tabs)/lists.tsx
index c7e3a874..fa97f67a 100644
--- a/apps/mobile/app/dashboard/(tabs)/lists.tsx
+++ b/apps/mobile/app/dashboard/(tabs)/lists.tsx
@@ -2,9 +2,11 @@ import { useEffect, useRef, useState } from "react";
 import { FlatList, Pressable, Text, View } from "react-native";
 import * as Haptics from "expo-haptics";
 import { Link } from "expo-router";
+import FullPageError from "@/components/FullPageError";
 import NewListModal from "@/components/lists/NewListModal";
 import { TailwindResolver } from "@/components/TailwindResolver";
 import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
+import FullPageSpinner from "@/components/ui/FullPageSpinner";
 import PageTitle from "@/components/ui/PageTitle";
 import { api } from "@/lib/trpc";
 import { BottomSheetModal } from "@gorhom/bottom-sheet";
@@ -65,7 +67,7 @@ function traverseTree(
 
 export default function Lists() {
   const [refreshing, setRefreshing] = useState(false);
-  const { data: lists, isPending } = useBookmarkLists();
+  const { data: lists, isPending, error, refetch } = useBookmarkLists();
   const [showChildrenOf, setShowChildrenOf] = useState<Record<string, boolean>>(
     {},
   );
@@ -76,9 +78,12 @@ export default function Lists() {
     setRefreshing(isPending);
   }, [isPending]);
 
+  if (error) {
+    return <FullPageError error={error.message} onRetry={() => refetch()} />;
+  }
+
   if (!lists) {
-    // Add spinner
-    return <View />;
+    return <FullPageSpinner />;
   }
 
   const onRefresh = () => {
diff --git a/apps/mobile/app/dashboard/(tabs)/search.tsx b/apps/mobile/app/dashboard/(tabs)/search.tsx
index ee029ab8..d29c3b05 100644
--- a/apps/mobile/app/dashboard/(tabs)/search.tsx
+++ b/apps/mobile/app/dashboard/(tabs)/search.tsx
@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { View } from "react-native";
 import BookmarkList from "@/components/bookmarks/BookmarkList";
+import FullPageError from "@/components/FullPageError";
 import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
 import FullPageSpinner from "@/components/ui/FullPageSpinner";
 import { Input } from "@/components/ui/Input";
@@ -16,10 +17,15 @@ export default function Search() {
 
   const onRefresh = api.useUtils().bookmarks.searchBookmarks.invalidate;
 
-  const { data, isPending } = api.bookmarks.searchBookmarks.useQuery(
-    { text: query },
-    { placeholderData: keepPreviousData },
-  );
+  const { data, error, refetch, isPending } =
+    api.bookmarks.searchBookmarks.useQuery(
+      { text: query },
+      { placeholderData: keepPreviousData },
+    );
+
+  if (error) {
+    return <FullPageError error={error.message} onRetry={() => refetch()} />;
+  }
 
   if (!data) {
     return <FullPageSpinner />;
diff --git a/apps/mobile/app/dashboard/lists/[slug].tsx b/apps/mobile/app/dashboard/lists/[slug].tsx
index 10b9243d..72e3d0ae 100644
--- a/apps/mobile/app/dashboard/lists/[slug].tsx
+++ b/apps/mobile/app/dashboard/lists/[slug].tsx
@@ -2,6 +2,7 @@ import { Alert, Platform, View } from "react-native";
 import * as Haptics from "expo-haptics";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import UpdatingBookmarkList from "@/components/bookmarks/UpdatingBookmarkList";
+import FullPageError from "@/components/FullPageError";
 import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
 import FullPageSpinner from "@/components/ui/FullPageSpinner";
 import PageTitle from "@/components/ui/PageTitle";
@@ -14,7 +15,11 @@ export default function ListView() {
   if (typeof slug !== "string") {
     throw new Error("Unexpected param type");
   }
-  const { data: list } = api.lists.get.useQuery({ listId: slug });
+  const {
+    data: list,
+    error,
+    refetch,
+  } = api.lists.get.useQuery({ listId: slug });
 
   return (
     <CustomSafeAreaView>
@@ -25,7 +30,9 @@ export default function ListView() {
           headerTransparent: true,
         }}
       />
-      {list ? (
+      {error ? (
+        <FullPageError error={error.message} onRetry={() => refetch()} />
+      ) : list ? (
         <View>
           <UpdatingBookmarkList
             query={{
diff --git a/apps/mobile/app/dashboard/tags/[slug].tsx b/apps/mobile/app/dashboard/tags/[slug].tsx
index 23d00a7c..54bbc31b 100644
--- a/apps/mobile/app/dashboard/tags/[slug].tsx
+++ b/apps/mobile/app/dashboard/tags/[slug].tsx
@@ -1,6 +1,7 @@
 import { View } from "react-native";
 import { Stack, useLocalSearchParams } from "expo-router";
 import UpdatingBookmarkList from "@/components/bookmarks/UpdatingBookmarkList";
+import FullPageError from "@/components/FullPageError";
 import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
 import FullPageSpinner from "@/components/ui/FullPageSpinner";
 import PageTitle from "@/components/ui/PageTitle";
@@ -12,7 +13,7 @@ export default function TagView() {
     throw new Error("Unexpected param type");
   }
 
-  const { data: tag } = api.tags.get.useQuery({ tagId: slug });
+  const { data: tag, error, refetch } = api.tags.get.useQuery({ tagId: slug });
 
   return (
     <CustomSafeAreaView>
@@ -23,7 +24,9 @@ export default function TagView() {
           headerTransparent: true,
         }}
       />
-      {tag ? (
+      {error ? (
+        <FullPageError error={error.message} onRetry={() => refetch()} />
+      ) : tag ? (
         <View>
           <UpdatingBookmarkList
             query={{
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) {