cleanup error boundaries

src/components/error-boundary.tsx

@@ -1,19 +1,24 @@
 import React, { memo } from "react";
 import { ErrorBoundary as ErrorBoundaryHelper, FallbackProps } from "react-error-boundary";
 import { Alert, AlertIcon, AlertTitle, AlertDescription } from "@chakra-ui/react";
+import { NostrEvent } from "nostr-tools";
+import DebugEventButton from "./debug-modal/debug-event-button";
 
-export function ErrorFallback({ error, resetErrorBoundary }: Partial<FallbackProps>) {
+export function ErrorFallback({ error, event, resetErrorBoundary }: Partial<FallbackProps> & { event?: NostrEvent }) {
   return (
     <Alert status="error">
       <AlertIcon />
       <AlertTitle>Something went wrong</AlertTitle>
       <AlertDescription>{error?.message}</AlertDescription>
+      {event && <DebugEventButton event={event} size="sm" variant="ghost" ml="auto" />}
     </Alert>
   );
 }
 
-export const ErrorBoundary = memo(({ children, ...props }: { children: React.ReactNode }) => (
+export const ErrorBoundary = memo(
-  <ErrorBoundaryHelper FallbackComponent={ErrorFallback} {...props}>
+  ({ children, event, ...props }: { children: React.ReactNode; event?: NostrEvent }) => (
-    {children}
+    <ErrorBoundaryHelper fallbackRender={({ error }) => <ErrorFallback error={error} event={event} />} {...props}>
-  </ErrorBoundaryHelper>
+      {children}
-));
+    </ErrorBoundaryHelper>
+  ),
+);

src/components/timeline-page/generic-note-timeline/timeline-item.tsx

@@ -46,7 +46,7 @@ function TimelineItem({ event, visible, minHeight }: { event: NostrEvent; visibl
   }
 
   return (
-    <ErrorBoundary>
+    <ErrorBoundary event={event}>
       <Box minHeight={minHeight + "px"} ref={ref}>
         {visible && content}
       </Box>

src/views/communities/index.tsx

@@ -157,7 +157,7 @@ function CommunitiesHomePage() {
             <Flex gap="2" direction="column" w="md" flexShrink={0} hideBelow="xl">
               <Heading size="md">Joined Communities</Heading>
               {communities.map((community) => (
-                <ErrorBoundary key={getEventCoordinate(community)}>
+                <ErrorBoundary key={getEventCoordinate(community)} event={community}>
                   <CommunityCard community={community} />
                 </ErrorBoundary>
               ))}
@@ -187,7 +187,7 @@ function CommunitiesHomePage() {
 
           <DrawerBody display="flex" flexDirection="column" gap="2" px="4" pt="0" pb="8" overflowY="auto">
             {communities.map((community) => (
-              <ErrorBoundary key={getEventCoordinate(community)}>
+              <ErrorBoundary key={getEventCoordinate(community)} event={community}>
                 <CommunityCard community={community} flexShrink={0} />
               </ErrorBoundary>
             ))}

src/views/files/index.tsx

@@ -132,8 +132,8 @@ function FilesPage() {
       <IntersectionObserverProvider callback={callback}>
         <SimpleGrid minChildWidth="20rem" spacing="2">
           {events.map((event) => (
-            <ErrorBoundary>
+            <ErrorBoundary key={event.id} event={event}>
-              <FileType key={event.id} event={event} />
+              <FileType event={event} />
             </ErrorBoundary>
           ))}
         </SimpleGrid>

src/views/goals/browse.tsx

@@ -51,7 +51,7 @@ function GoalsBrowsePage() {
 
         <SimpleGrid columns={{ base: 1, lg: 2 }} spacing="2">
           {goals.map((event) => (
-            <ErrorBoundary key={getEventUID(event)}>
+            <ErrorBoundary key={getEventUID(event)} event={event}>
               <GoalCard goal={event} />
             </ErrorBoundary>
           ))}

src/views/launchpad/components/notifications-card.tsx

@@ -44,7 +44,7 @@ export default function NotificationsCard({ ...props }: Omit<CardProps, "childre
       </CardHeader>
       <CardBody overflowX="hidden" overflowY="auto" pt="4" display="flex" flexDirection="column">
         {limit.map((event) => (
-          <ErrorBoundary key={getEventUID(event)}>
+          <ErrorBoundary key={getEventUID(event)} event={event}>
             <NotificationItem event={event} onClick={handleClick} visible />
           </ErrorBoundary>
         ))}

src/views/launchpad/components/streams-card.tsx

@@ -76,7 +76,7 @@ function StreamsCardContent({ ...props }: Omit<CardProps, "children">) {
       </CardHeader>
       <CardBody overflowX="hidden" overflowY="auto" pt="4" display="flex" gap="2" flexDirection="column" maxH="50vh">
         {streams.map((stream) => (
-          <ErrorBoundary key={getEventUID(stream.event)}>
+          <ErrorBoundary key={getEventUID(stream.event)} event={stream.event}>
             <LiveStream stream={stream} />
           </ErrorBoundary>
         ))}

src/views/map/timeline.tsx

@@ -26,7 +26,7 @@ const MapTimeline = React.memo(({ timeline, focused }: { timeline: TimelineLoade
   return (
     <>
       {events.map((event) => (
-        <ErrorBoundary key={event.id}>
+        <ErrorBoundary key={event.id} event={event}>
           <RenderEvent event={event} focused={focused === event.id} />
         </ErrorBoundary>
       ))}

src/views/relays/index-old.tsx

@@ -64,8 +64,8 @@ export default function RelaysView() {
       </Flex>
       <SimpleGrid columns={{ base: 1, lg: 2, xl: 3 }} spacing="2">
         {filteredRelays.map((url) => (
-          <ErrorBoundary>
+          <ErrorBoundary key={url}>
-            <RelayCard key={url} url={url} variant="outline" />
+            <RelayCard url={url} variant="outline" />
           </ErrorBoundary>
         ))}
       </SimpleGrid>
@@ -77,8 +77,8 @@ export default function RelaysView() {
           </Heading>
           <SimpleGrid columns={{ base: 1, lg: 2, xl: 3 }} spacing="2">
             {discoveredRelays.map((url) => (
-              <ErrorBoundary>
+              <ErrorBoundary key={url}>
-                <RelayCard key={url} url={url} variant="outline" />
+                <RelayCard url={url} variant="outline" />
               </ErrorBoundary>
             ))}
           </SimpleGrid>

src/views/settings/index.tsx

@@ -86,55 +86,3 @@ export default function SettingsView() {
     </ErrorBoundary>
   );
 }
-
-// export default function SettingsView() {
-//   const toast = useToast();
-//   const { updateSettings, ...settings } = useAppSettings();
-
-//   const form = useForm({
-//     mode: "all",
-//     values: settings,
-//     resetOptions: {
-//       keepDirty: true,
-//     },
-//   });
-
-//   const saveSettings = form.handleSubmit(async (values) => {
-//     try {
-//       await updateSettings(values);
-//       toast({ title: "Settings saved", status: "success" });
-//     } catch (e) {
-//       if (e instanceof Error) toast({ description: e.message, status: "error" });
-//     }
-//   });
-
-//   return (
-//     <VerticalPageLayout as="form" onSubmit={saveSettings}>
-//       <FormProvider {...form}>
-//         <Accordion defaultIndex={[]} allowMultiple>
-//           <DisplaySettings />
-//           <PostSettings />
-//           <PerformanceSettings />
-//           <PrivacySettings />
-//           <LightningSettings />
-//           <DatabaseSettings />
-//         </Accordion>
-//       </FormProvider>
-//       <Flex gap="4" padding="4" alignItems="center" wrap="wrap">
-//         <Link isExternal href="https://github.com/hzrd149/nostrudel">
-//           <GithubIcon /> Github
-//         </Link>
-//         <VersionButton />
-//         <Button
-//           ml="auto"
-//           isLoading={form.formState.isLoading || form.formState.isValidating || form.formState.isSubmitting}
-//           isDisabled={!form.formState.isDirty}
-//           colorScheme="primary"
-//           type="submit"
-//         >
-//           Save Settings
-//         </Button>
-//       </Flex>
-//     </VerticalPageLayout>
-//   );
-// }

src/views/tools/dm-timeline.tsx

@@ -69,7 +69,7 @@ export function DMTimelinePage() {
       </Flex>
       <IntersectionObserverProvider callback={callback}>
         {dms.map((dm) => (
-          <ErrorBoundary key={dm.id}>
+          <ErrorBoundary key={dm.id} event={dm}>
             <DirectMessage dm={dm} />
           </ErrorBoundary>
         ))}

src/views/user/articles.tsx

@@ -9,6 +9,7 @@ import { useTimelineCurserIntersectionCallback } from "../../hooks/use-timeline-
 import TimelineActionAndStatus from "../../components/timeline/timeline-action-and-status";
 import VerticalPageLayout from "../../components/vertical-page-layout";
 import ArticleCard from "../articles/components/article-card";
+import { ErrorBoundary } from "../../components/error-boundary";
 
 export default function UserArticlesTab() {
   const { pubkey } = useOutletContext() as { pubkey: string };
@@ -26,7 +27,9 @@ export default function UserArticlesTab() {
     <IntersectionObserverProvider callback={callback}>
       <VerticalPageLayout>
         {articles.map((article) => (
-          <ArticleCard key={article.id} article={article} />
+          <ErrorBoundary key={article.id} event={article}>
+            <ArticleCard article={article} />
+          </ErrorBoundary>
         ))}
         <TimelineActionAndStatus timeline={timeline} />
       </VerticalPageLayout>

src/views/user/following.tsx

@@ -23,8 +23,8 @@ export default function UserFollowingTab() {
   return (
     <SimpleGrid columns={{ base: 1, lg: 2, xl: 3 }} spacing="2" p="2">
       {sorted.map(({ pubkey, relay }) => (
-        <ErrorBoundary>
+        <ErrorBoundary key={pubkey}>
-          <UserCard key={pubkey} pubkey={pubkey} relay={relay} />
+          <UserCard pubkey={pubkey} relay={relay} />
         </ErrorBoundary>
       ))}
     </SimpleGrid>

src/views/user/relays.tsx

@@ -82,8 +82,8 @@ const UserRelaysTab = () => {
       </Heading>
       <VStack divider={<StackDivider />} py="2" align="stretch">
         {Array.from(mailboxes?.inboxes ?? []).map((url) => (
-          <ErrorBoundary>
+          <ErrorBoundary key={url}>
-            <Relay key={url} url={url} reviews={getRelayReviews(url, reviews)} />
+            <Relay url={url} reviews={getRelayReviews(url, reviews)} />
           </ErrorBoundary>
         ))}
       </VStack>
@@ -92,8 +92,8 @@ const UserRelaysTab = () => {
       </Heading>
       <VStack divider={<StackDivider />} py="2" align="stretch">
         {Array.from(mailboxes?.outboxes ?? []).map((url) => (
-          <ErrorBoundary>
+          <ErrorBoundary key={url}>
-            <Relay key={url} url={url} reviews={getRelayReviews(url, reviews)} />
+            <Relay url={url} reviews={getRelayReviews(url, reviews)} />
           </ErrorBoundary>
         ))}
       </VStack>

src/views/user/zaps.tsx

@@ -122,7 +122,7 @@ const UserZapsTab = () => {
           )}
         </Flex>
         {events.map((event) => (
-          <ErrorBoundary key={event.id}>
+          <ErrorBoundary key={event.id} event={event}>
             <Zap zapEvent={event} />
           </ErrorBoundary>
         ))}

src/views/videos/index.tsx

@@ -34,8 +34,8 @@ function VideosPage() {
       <IntersectionObserverProvider callback={callback}>
         <SimpleGrid columns={{ base: 1, sm: 2, md: 3, lg: 4, xl: 5 }} spacing="2">
           {videos.map((video) => (
-            <ErrorBoundary>
+            <ErrorBoundary key={getEventUID(video)} event={video}>
-              <VideoCard key={getEventUID(video)} video={video} />
+              <VideoCard video={video} />
             </ErrorBoundary>
           ))}
         </SimpleGrid>