fix: Add error boundary around bookmark cards

4 files changed, 45 insertions, 3 deletions

diff --git a/apps/web/components/dashboard/bookmarks/BookmarkCard.tsx b/apps/web/components/dashboard/bookmarks/BookmarkCard.tsx
index ec0d4069..5f8e4e0a 100644
--- a/apps/web/components/dashboard/bookmarks/BookmarkCard.tsx
+++ b/apps/web/components/dashboard/bookmarks/BookmarkCard.tsx
@@ -6,6 +6,7 @@ import { BookmarkTypes, ZBookmark } from "@hoarder/shared/types/bookmarks";
 import AssetCard from "./AssetCard";
 import LinkCard from "./LinkCard";
 import TextCard from "./TextCard";
+import UnknownCard from "./UnknownCard";
 
 export default function BookmarkCard({
   bookmark: initialData,
@@ -55,5 +56,7 @@ export default function BookmarkCard({
           bookmark={{ ...bookmark, content: bookmark.content }}
         />
       );
+    case BookmarkTypes.UNKNOWN:
+      return <UnknownCard className={className} bookmark={bookmark} />;
   }
 }
diff --git a/apps/web/components/dashboard/bookmarks/BookmarksGrid.tsx b/apps/web/components/dashboard/bookmarks/BookmarksGrid.tsx
index bb3222a7..b8e8d1e6 100644
--- a/apps/web/components/dashboard/bookmarks/BookmarksGrid.tsx
+++ b/apps/web/components/dashboard/bookmarks/BookmarksGrid.tsx
@@ -7,6 +7,7 @@ import {
 } from "@/lib/userLocalSettings/bookmarksLayout";
 import tailwindConfig from "@/tailwind.config";
 import { Slot } from "@radix-ui/react-slot";
+import { ErrorBoundary } from "react-error-boundary";
 import { useInView } from "react-intersection-observer";
 import Masonry from "react-masonry-css";
 import resolveConfig from "tailwindcss/resolveConfig";
@@ -15,6 +16,7 @@ import type { ZBookmark } from "@hoarder/shared/types/bookmarks";
 
 import BookmarkCard from "./BookmarkCard";
 import EditorCard from "./EditorCard";
+import UnknownCard from "./UnknownCard";
 
 function StyledBookmarkCard({ children }: { children: React.ReactNode }) {
   return (
@@ -78,9 +80,11 @@ export default function BookmarksGrid({
       </StyledBookmarkCard>
     ),
     ...bookmarks.map((b) => (
-      <StyledBookmarkCard key={b.id}>
-        <BookmarkCard bookmark={b} />
-      </StyledBookmarkCard>
+      <ErrorBoundary key={b.id} fallback={<UnknownCard bookmark={b} />}>
+        <StyledBookmarkCard>
+          <BookmarkCard bookmark={b} />
+        </StyledBookmarkCard>
+      </ErrorBoundary>
     )),
   ];
   return (
diff --git a/apps/web/components/dashboard/bookmarks/UnknownCard.tsx b/apps/web/components/dashboard/bookmarks/UnknownCard.tsx
new file mode 100644
index 00000000..970b5e30
--- /dev/null
+++ b/apps/web/components/dashboard/bookmarks/UnknownCard.tsx
@@ -0,0 +1,34 @@
+"use client";
+
+import { useTranslation } from "@/lib/i18n/client";
+import { AlertCircle } from "lucide-react";
+
+import type { ZBookmark } from "@hoarder/shared/types/bookmarks";
+
+import { BookmarkLayoutAdaptingCard } from "./BookmarkLayoutAdaptingCard";
+
+export default function UnknownCard({
+  bookmark,
+  className,
+}: {
+  bookmark: ZBookmark;
+  className?: string;
+}) {
+  const { t } = useTranslation();
+  return (
+    <BookmarkLayoutAdaptingCard
+      title={bookmark.title}
+      bookmark={bookmark}
+      className={className}
+      wrapTags={false}
+      image={(_layout) => (
+        <div className="flex size-full flex-1 flex-col items-center justify-center bg-red-50 dark:bg-red-950/10">
+          <AlertCircle className="mb-3 h-10 w-10 text-red-500" />
+          <h3 className="font-medium text-red-700 dark:text-red-400">
+            {t("common.something_went_wrong")}
+          </h3>
+        </div>
+      )}
+    />
+  );
+}
diff --git a/apps/web/package.json b/apps/web/package.json
index cb7f6d85..f1c84285 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -74,6 +74,7 @@
     "react-dom": "^18.3.1",
     "react-draggable": "^4.4.6",
     "react-dropzone": "^14.2.3",
+    "react-error-boundary": "^5.0.0",
     "react-hook-form": "^7.50.1",
     "react-i18next": "^15.1.1",
     "react-intersection-observer": "^9.13.1",