From 14e06f34e423443f82081ff988398871ef33132b Mon Sep 17 00:00:00 2001
From: phil <uniphil@gmail.com>
Date: Wed, 23 Jul 2025 10:45:33 -0400
Subject: [PATCH] notification-rendering error boundary

since a lot is going on there now
---
 atproto-notifications/package-lock.json       | 25 +++++++++++++++++++
 atproto-notifications/package.json            |  1 +
 .../src/components/Notification.css           |  8 ++++++
 .../src/components/Notification.tsx           | 10 ++++++++
 atproto-notifications/src/pages/Feed.tsx      |  7 ++++--
 5 files changed, 49 insertions(+), 2 deletions(-)

diff --git a/atproto-notifications/package-lock.json b/atproto-notifications/package-lock.json
index deb3491..1fca723 100644
--- a/atproto-notifications/package-lock.json
+++ b/atproto-notifications/package-lock.json
@@ -15,6 +15,7 @@
         "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"
@@ -36,6 +37,9 @@
     "../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"
       }
     },
@@ -329,6 +333,15 @@
         "@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": {
       "version": "7.27.2",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz",
@@ -3077,6 +3090,18 @@
         "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": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/atproto-notifications/package.json b/atproto-notifications/package.json
index d20d065..adb76f2 100644
--- a/atproto-notifications/package.json
+++ b/atproto-notifications/package.json
@@ -18,6 +18,7 @@
     "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"
diff --git a/atproto-notifications/src/components/Notification.css b/atproto-notifications/src/components/Notification.css
index d4ba7f8..df75597 100644
--- a/atproto-notifications/src/components/Notification.css
+++ b/atproto-notifications/src/components/Notification.css
@@ -22,6 +22,14 @@ a.notification:hover {
   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;
 }
diff --git a/atproto-notifications/src/components/Notification.tsx b/atproto-notifications/src/components/Notification.tsx
index d19af95..1624bda 100644
--- a/atproto-notifications/src/components/Notification.tsx
+++ b/atproto-notifications/src/components/Notification.tsx
@@ -7,6 +7,16 @@ import { Fetch } from './Fetch';
 
 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);
 
diff --git a/atproto-notifications/src/pages/Feed.tsx b/atproto-notifications/src/pages/Feed.tsx
index a004654..f0098e1 100644
--- a/atproto-notifications/src/pages/Feed.tsx
+++ b/atproto-notifications/src/pages/Feed.tsx
@@ -1,9 +1,10 @@
 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';
@@ -232,7 +233,9 @@ export function Feed() {
 
       <div className="feed-notifications">
         {feed.map(([k, n]) => (
-          <Notification key={k} {...n} />
+          <ErrorBoundary key={k} fallbackRender={fallbackRender}>
+            <Notification {...n} />
+          </ErrorBoundary>
         ))}
       </div>
     </div>
-- 
2.51.2