fix: dont allow posts to crash whole page

akari-blue · Jan 9, 2025 · 80915a5 · 80915a5
1 parent 2221da0
commit 80915a5
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 6 deletions.
diff --git a/src/components/ErrorBoundary.tsx b/src/components/ErrorBoundary.tsx
@@ -34,7 +34,7 @@ class ErrorBoundaryInner extends Component<Props, State> {
         this.props.fallback || (
           <div className="flex items-center justify-center bg-white dark:bg-black">
             <h1 className="text-2xl font-bold text-red-600 dark:text-red-400 mb-4">{t('somethingWentWrong')}</h1>
-            <pre className="text-gray-600 dark:text-gray-300">
+            <pre className="text-gray-600 dark:text-gray-300 max-w-full overflow-x-auto">
               {this.state.error
                 ? JSON.stringify(error2json(this.state.error), null, 2)
                     .split('\n')

diff --git a/src/components/Timeline.tsx b/src/components/Timeline.tsx
@@ -8,6 +8,7 @@ import { useSettings } from '../hooks/useSetting';
 import { Virtuoso } from 'react-virtuoso';
 import { Loading } from './ui/loading';
 import { useUnlike } from '@/lib/bluesky/hooks/useUnlike';
+import { ErrorBoundary } from './ErrorBoundary';
 
 export function Timeline({ columnNumber = 1 }: { columnNumber: number }) {
   const { columns } = useSettings();
@@ -120,7 +121,9 @@ export function Timeline({ columnNumber = 1 }: { columnNumber: number }) {
           }),
         }}
         itemContent={(index: number) => (
-          <PostCard key={posts[index]?.post.uri} post={posts[index]?.post} context={posts[index]?.feedContext} />
+          <ErrorBoundary>
+            <PostCard key={posts[index]?.post.uri} post={posts[index]?.post} context={posts[index]?.feedContext} />
+          </ErrorBoundary>
         )}
       />
     </div>

diff --git a/src/routes/profile/$handle/index.lazy.tsx b/src/routes/profile/$handle/index.lazy.tsx
@@ -23,6 +23,7 @@ import { TabList } from '@/components/ui/tab-list';
 import { Handle } from '@/components/ui/Handle';
 import { Avatar } from '@/components/ui/avatar';
 import { Banner } from '@/components/ui/banner';
+import { ErrorBoundary } from '@/components/ErrorBoundary';
 
 export const Route = createLazyFileRoute('/profile/$handle/')({
   component: Profile,
@@ -76,7 +77,9 @@ function Posts() {
         List,
       }}
       itemContent={(index: number) => (
-        <PostCard key={filteredPosts[index]?.post.uri} post={filteredPosts[index]?.post as BSkyPost} />
+        <ErrorBoundary>
+          <PostCard key={filteredPosts[index]?.post.uri} post={filteredPosts[index]?.post as BSkyPost} />
+        </ErrorBoundary>
       )}
     />
   );
@@ -103,7 +106,9 @@ function Reposts() {
         List,
       }}
       itemContent={(index: number) => (
-        <PostCard key={filteredPosts[index]?.post.uri} post={filteredPosts[index]?.post as BSkyPost} />
+        <ErrorBoundary>
+          <PostCard key={filteredPosts[index]?.post.uri} post={filteredPosts[index]?.post as BSkyPost} />
+        </ErrorBoundary>
       )}
     />
   );
@@ -130,7 +135,9 @@ function Replies() {
         List,
       }}
       itemContent={(index: number) => (
-        <PostCard key={filteredPosts[index]?.post.uri} post={filteredPosts[index]?.post as BSkyPost} />
+        <ErrorBoundary>
+          <PostCard key={filteredPosts[index]?.post.uri} post={filteredPosts[index]?.post as BSkyPost} />
+        </ErrorBoundary>
       )}
     />
   );
@@ -159,7 +166,9 @@ function Media() {
         List,
       }}
       itemContent={(index: number) => (
-        <PostCard key={filteredPosts[index]?.post.uri} post={filteredPosts[index]?.post as BSkyPost} />
+        <ErrorBoundary>
+          <PostCard key={filteredPosts[index]?.post.uri} post={filteredPosts[index]?.post as BSkyPost} />
+        </ErrorBoundary>
       )}
     />
   );