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

1 files changed, 3 insertions, 2 deletions

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) {