Add Error Boundary to Notifications

casesandberg · Sep 21, 2024 · b1b1b2b · b1b1b2b
1 parent 212253d
commit b1b1b2b
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 32 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/notifications/components/NotificationDropdown.tsx b/packages/notifications/components/NotificationDropdown.tsx
@@ -2,6 +2,7 @@
 
 import { BellIcon } from 'lucide-react'
 import { useState } from 'react'
+import { ErrorBoundary } from 'react-error-boundary'
 import { createMyNotifications } from '@play-money/api-helpers/client'
 import { useNotifications } from '@play-money/api-helpers/client/hooks'
 import { Badge } from '@play-money/ui/badge'
@@ -46,38 +47,50 @@ export function NotificationDropdown() {
  }}
  >
  <Card className="border-0 shadow-lg">
- <div className="flex justify-between border-b p-3 px-4 md:p-3 md:px-4">
- <div>
- Notifications
- <Badge variant="outline" className="ml-2">
- {data?.unreadCount}
- </Badge>
+ <ErrorBoundary
+ fallback={
+ <div className="p-4 text-sm uppercase text-muted-foreground">
+ There was an error loading notifications
+ </div>
+ }
+ >
+ <div className="flex justify-between border-b p-3 px-4 md:p-3 md:px-4">
+ <div>
+ Notifications
+ <Badge variant="outline" className="ml-2">
+ {data?.unreadCount}
+ </Badge>
+ </div>
+ <div>
+ <Button
+ variant="link"
+ size="sm"
+ className="h-6 p-1"
+ disabled={!data?.unreadCount}
+ onClick={handleMarkAllRead}
+ >
+ Mark all read
+ </Button>
+ </div>
  </div>
- <div>
- <Button
- variant="link"
- size="sm"
- className="h-6 p-1"
- disabled={!data?.unreadCount}
- onClick={handleMarkAllRead}
- >
- Mark all read
- </Button>
- </div>
- </div>
- <CardContent className="max-h-[450px] overflow-y-auto p-0 md:p-0">
- <div className="divide-y">
- {data?.notifications?.length ? (
- data?.notifications.map(({ id, count, lastNotification }, i) => (
- <div key={id} onClick={() => setIsOpen(false)}>
- <NotificationItem notification={lastNotification} count={count} unread={!lastNotification.readAt} />
- </div>
- ))
- ) : (
- <div className="p-4 text-center text-sm text-muted-foreground">Zero notifications</div>
- )}
- </div>
- </CardContent>
+ <CardContent className="max-h-[450px] overflow-y-auto p-0 md:p-0">
+ <div className="divide-y">
+ {data?.notifications?.length ? (
+ data?.notifications.map(({ id, count, lastNotification }, i) => (
+ <div key={id} onClick={() => setIsOpen(false)}>
+ <NotificationItem
+ notification={lastNotification}
+ count={count}
+ unread={!lastNotification.readAt}
+ />
+ </div>
+ ))
+ ) : (
+ <div className="p-4 text-center text-sm text-muted-foreground">Zero notifications</div>
+ )}
+ </div>
+ </CardContent>
+ </ErrorBoundary>
  </Card>
  </DropdownMenuContent>
  </DropdownMenu>

diff --git a/packages/notifications/components/NotificationItem.tsx b/packages/notifications/components/NotificationItem.tsx
@@ -104,7 +104,7 @@ export function NotificationItem({
  }
  case 'COMMENT_REACTION': {
  topLine = createSnippet(notification.comment.content)
- bottomLine = `${notification.actor.displayName}${othersCount} reacted: ${notification.commentReaction.emoji}`
+ bottomLine = `${notification.actor.displayName}${othersCount} reacted: ${notification.commentReaction?.emoji}`
  break
  }
  case 'COMMENT_MENTION': {

diff --git a/packages/notifications/package.json b/packages/notifications/package.json
@@ -11,6 +11,7 @@
  "decimal.js": "^10.4.3",
  "next": "^14.1.1",
  "react": "^18.2.0",
+ "react-error-boundary": "^4.0.13",
  "zod": "^3.23.5"
  }
 }