notification-rendering error boundary

since a lot is going on there now

atproto-notifications/package-lock.json

···
         "psl": "^1.15.0",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
+        "react-error-boundary": "^6.0.0",
         "react-router": "^7.6.3",
         "react-time-ago": "^7.3.3",
         "reactjs-popup": "^2.0.6"
···
     "../lexicons": {
       "version": "0.0.1",
       "dependencies": {
+        "@atcute/client": "^4.0.3",
+        "@atcute/identity-resolver": "^1.1.3",
+        "jsonpath-plus": "^10.3.0",
         "psl": "^1.15.0"
       }
     },
···
       },
       "peerDependencies": {
         "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/runtime": {
+      "version": "7.27.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.6.tgz",
+      "integrity": "sha512-vbavdySgbTTrmFE+EsiqUTzlOr5bzlnJtUv9PynGCAKvfQqjIXbvFdumPM/GxMDfyuGMJaJAU6TO4zc1Jf1i8Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/template": {
···
       },
       "peerDependencies": {
         "react": "^19.1.0"
+      }
+    },
+    "node_modules/react-error-boundary": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-6.0.0.tgz",
+      "integrity": "sha512-gdlJjD7NWr0IfkPlaREN2d9uUZUlksrfOx7SX62VRerwXbMY6ftGCIZua1VG1aXFNOimhISsTq+Owp725b9SiA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5"
+      },
+      "peerDependencies": {
+        "react": ">=16.13.1"
       }
     },
     "node_modules/react-is": {

atproto-notifications/package.json

···
     "psl": "^1.15.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-error-boundary": "^6.0.0",
     "react-router": "^7.6.3",
     "react-time-ago": "^7.3.3",
     "reactjs-popup": "^2.0.6"

atproto-notifications/src/components/Notification.css

···
   border-bottom-color: hsla(0, 0%, 0%, 0.3);
 }
 
+.notification.error {
+  background: hsla(347, 72%, 20%, 0.333);
+  align-items: center;
+}
+.notification.error p {
+  margin: 0;
+}
+
 .handle {
   color: skyblue;
 }

atproto-notifications/src/components/Notification.tsx

···
 
 import './Notification.css';
 
+export function fallbackRender({ error, resetErrorBoundary }) {
+  console.error('rendering fallback for error', error);
+  return (
+    <div className="notification error">
+      <p>sorry, something went wrong trying to show this notification</p>
+      <p><button onClick={resetErrorBoundary}>retry</button></p>
+    </div>
+  );
+}
+
 export function Notification({ app, group, source, source_record, source_did, subject, timestamp }) {
   const [resolvedLink, setResolvedLink] = useState(null);
 

atproto-notifications/src/pages/Feed.tsx

···
 import { useCallback, useEffect, useState } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
 import Popup from 'reactjs-popup';
 import { getNotifications, getSecondary } from '../db';
 import { ButtonGroup } from '../components/Buttons';
 import { NotificationSettings } from '../components/NotificationSettings';
-import { Notification } from '../components/Notification';
+import { Notification, fallbackRender } from '../components/Notification';
 import { GetJson, PostJson } from '../components/Fetch';
 import psl from 'psl';
 import lexicons from 'lexicons';
···
 
       <div className="feed-notifications">
         {feed.map(([k, n]) => (
-          <Notification key={k} {...n} />
+          <ErrorBoundary key={k} fallbackRender={fallbackRender}>
+            <Notification {...n} />
+          </ErrorBoundary>
         ))}
       </div>
     </div>