cleanup error boundaries

2025-03-17 21:31:43 +01:00 · 2024-09-30 08:54:23 -05:00 · 2024-09-30 08:54:23 -05:00 · 6d79cf6b0c
commit 6d79cf6b0c
parent d562a0c849
16 changed files with 38 additions and 82 deletions
--- a/src/components/error-boundary.tsx
+++ b/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 }) => (
-  <ErrorBoundaryHelper FallbackComponent={ErrorFallback} {...props}>
-    {children}
-  </ErrorBoundaryHelper>
-));
+export const ErrorBoundary = memo(
+  ({ children, event, ...props }: { children: React.ReactNode; event?: NostrEvent }) => (
+    <ErrorBoundaryHelper fallbackRender={({ error }) => <ErrorFallback error={error} event={event} />} {...props}>
+      {children}
+    </ErrorBoundaryHelper>
+  ),
+);
--- a/src/components/timeline-page/generic-note-timeline/timeline-item.tsx
+++ b/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>
--- a/src/views/communities/index.tsx
+++ b/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>
            ))}
--- a/src/views/files/index.tsx
+++ b/src/views/files/index.tsx
@ -132,8 +132,8 @@ function FilesPage() {
      <IntersectionObserverProvider callback={callback}>
        <SimpleGrid minChildWidth="20rem" spacing="2">
          {events.map((event) => (
-            <ErrorBoundary>
-              <FileType key={event.id} event={event} />
+            <ErrorBoundary key={event.id} event={event}>
+              <FileType event={event} />
            </ErrorBoundary>
          ))}
        </SimpleGrid>
--- a/src/views/goals/browse.tsx
+++ b/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>
          ))}
--- a/src/views/launchpad/components/notifications-card.tsx
+++ b/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>
        ))}
--- a/src/views/launchpad/components/streams-card.tsx
+++ b/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>
        ))}
--- a/src/views/map/timeline.tsx
+++ b/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>
      ))}
--- a/src/views/relays/index-old.tsx
+++ b/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>
-            <RelayCard key={url} url={url} variant="outline" />
+          <ErrorBoundary key={url}>
+            <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>
-                <RelayCard key={url} url={url} variant="outline" />
+              <ErrorBoundary key={url}>
+                <RelayCard url={url} variant="outline" />
              </ErrorBoundary>
            ))}
          </SimpleGrid>
--- a/src/views/settings/index.tsx
+++ b/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>
-//   );
-// }
--- a/src/views/tools/dm-timeline.tsx
+++ b/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>
        ))}
--- a/src/views/user/articles.tsx
+++ b/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>
--- a/src/views/user/following.tsx
+++ b/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>
-          <UserCard key={pubkey} pubkey={pubkey} relay={relay} />
+        <ErrorBoundary key={pubkey}>
+          <UserCard pubkey={pubkey} relay={relay} />
        </ErrorBoundary>
      ))}
    </SimpleGrid>
--- a/src/views/user/relays.tsx
+++ b/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>
-            <Relay key={url} url={url} reviews={getRelayReviews(url, reviews)} />
+          <ErrorBoundary key={url}>
+            <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>
-            <Relay key={url} url={url} reviews={getRelayReviews(url, reviews)} />
+          <ErrorBoundary key={url}>
+            <Relay url={url} reviews={getRelayReviews(url, reviews)} />
          </ErrorBoundary>
        ))}
      </VStack>
--- a/src/views/user/zaps.tsx
+++ b/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>
        ))}
--- a/src/views/videos/index.tsx
+++ b/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>
-              <VideoCard key={getEventUID(video)} video={video} />
+            <ErrorBoundary key={getEventUID(video)} event={video}>
+              <VideoCard video={video} />
            </ErrorBoundary>
          ))}
        </SimpleGrid>