From 32bf0a978e3eb13df9cd2225df1e5bf8b30701df Mon Sep 17 00:00:00 2001
From: samuel1-ona <samuonanikesamuel123@gmail.com>
Date: Wed, 25 Mar 2026 08:12:02 +0100
Subject: [PATCH] feat: add React Error Boundaries and Sentry integration
 (Issue 170)

---
 client/app/error.tsx                      | 39 +++++++----
 client/app/not-found.tsx                  | 38 ++++++-----
 client/components/pages/subscriptions.tsx | 80 ++++++++++++++++-------
 3 files changed, 104 insertions(+), 53 deletions(-)

diff --git a/client/app/error.tsx b/client/app/error.tsx
index 87f02ca..e1abd4e 100644
--- a/client/app/error.tsx
+++ b/client/app/error.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect } from "react";
-import { ErrorBoundary } from "@/components/ui/error-boundary";
+import * as Sentry from "@sentry/nextjs";
 import { Button } from "@/components/ui/button";
 
 export default function Error({
@@ -12,31 +12,42 @@ export default function Error({
   reset: () => void;
 }) {
   useEffect(() => {
-    // Log error to error reporting service
+    // Report to Sentry
+    Sentry.captureException(error);
     console.error("Application error:", error);
   }, [error]);
 
   return (
-    <div className="min-h-screen bg-[#F9F6F2] dark:bg-[#1E2A35] flex items-center justify-center p-4">
-      <div className="max-w-md w-full text-center space-y-4">
-        <h2 className="text-2xl font-bold text-[#1E2A35] dark:text-[#F9F6F2]">
-          Something went wrong!
-        </h2>
-        <p className="text-[#1E2A35]/70 dark:text-[#F9F6F2]/70">
-          {error.message || "An unexpected error occurred"}
-        </p>
-        {error.digest && (
-          <p className="text-sm text-[#1E2A35]/50 dark:text-[#F9F6F2]/50">
-            Error ID: {error.digest}
+    <div className="min-h-screen bg-[#F9F6F2] dark:bg-[#1E2A35] flex flex-col items-center justify-center p-4">
+      <div className="max-w-md w-full text-center space-y-6">
+        <div className="space-y-2">
+          <h2 className="text-3xl font-bold text-[#1E2A35] dark:text-[#F9F6F2]">
+            Something went wrong
+          </h2>
+          <p className="text-[#1E2A35]/70 dark:text-[#F9F6F2]/70">
+            {error.message || "An unexpected error occurred. Our team has been notified."}
           </p>
+        </div>
+        
+        {error.digest && (
+          <div className="bg-black/5 dark:bg-white/5 py-2 px-4 rounded-md inline-block">
+            <p className="text-xs font-mono text-[#1E2A35]/50 dark:text-[#F9F6F2]/50">
+              Error ID: {error.digest}
+            </p>
+          </div>
         )}
+
         <div className="flex gap-4 justify-center">
-          <Button onClick={reset} variant="default">
+          <Button 
+            onClick={reset} 
+            className="bg-[#E86A33] hover:bg-[#E86A33]/90 text-white px-8"
+          >
             Try again
           </Button>
           <Button
             onClick={() => (window.location.href = "/")}
             variant="outline"
+            className="border-[#1E2A35]/20 dark:border-[#F9F6F2]/20"
           >
             Go home
           </Button>
diff --git a/client/app/not-found.tsx b/client/app/not-found.tsx
index ce59673..0220e4f 100644
--- a/client/app/not-found.tsx
+++ b/client/app/not-found.tsx
@@ -1,29 +1,35 @@
+"use client";
+
 import Link from "next/link";
 import { Button } from "@/components/ui/button";
 
 export default function NotFound() {
   return (
-    <div className="min-h-screen bg-[#F9F6F2] dark:bg-[#1E2A35] flex items-center justify-center p-4">
-      <div className="max-w-md w-full text-center space-y-4">
-        <h1 className="text-6xl font-bold text-[#1E2A35] dark:text-[#F9F6F2]">
-          404
-        </h1>
-        <h2 className="text-2xl font-semibold text-[#1E2A35] dark:text-[#F9F6F2]">
-          Page Not Found
-        </h2>
-        <p className="text-[#1E2A35]/70 dark:text-[#F9F6F2]/70">
-          The page you're looking for doesn't exist or has been moved.
-        </p>
-        <div className="flex gap-4 justify-center pt-4">
-          <Button asChild>
+    <div className="min-h-screen bg-[#F9F6F2] dark:bg-[#1E2A35] flex flex-col items-center justify-center p-4">
+      <div className="max-w-md w-full text-center space-y-6">
+        <div className="space-y-2">
+          <div className="text-6xl font-bold text-[#E86A33]">404</div>
+          <h2 className="text-3xl font-bold text-[#1E2A35] dark:text-[#F9F6F2]">
+            Page Not Found
+          </h2>
+          <p className="text-[#1E2A35]/70 dark:text-[#F9F6F2]/70">
+            The page you are looking for doesn't exist or has been moved.
+          </p>
+        </div>
+
+        <div className="flex gap-4 justify-center">
+          <Button asChild className="bg-[#E86A33] hover:bg-[#E86A33]/90 text-white px-8">
             <Link href="/">Go home</Link>
           </Button>
-          <Button asChild variant="outline">
-            <Link href="/dashboard">Go to dashboard</Link>
+          <Button
+            asChild
+            variant="outline"
+            className="border-[#1E2A35]/20 dark:border-[#F9F6F2]/20"
+          >
+            <Link href="/dashboard">Dashboard</Link>
           </Button>
         </div>
       </div>
     </div>
   );
 }
-
diff --git a/client/components/pages/subscriptions.tsx b/client/components/pages/subscriptions.tsx
index 3c39968..2b64fd3 100644
--- a/client/components/pages/subscriptions.tsx
+++ b/client/components/pages/subscriptions.tsx
@@ -1,10 +1,11 @@
 "use client"
 
-import { useState, useEffect } from "react"
-import { Edit2, Trash2, Mail, Clock, Copy } from "lucide-react"
+import { useState, useEffect, Suspense } from "react"
+import { Edit2, Trash2, Mail, Clock, Copy, AlertCircle } from "lucide-react"
 import { useDebounce } from "@/hooks/use-debounce"
 import { VirtualizedList } from "@/components/ui/virtualized-list"
 import { EmptyState } from "@/components/ui/empty-state"
+import { ErrorBoundary } from "@/components/ui/error-boundary"
 
 interface SubscriptionsPageProps {
   subscriptions?: any[]
@@ -277,33 +278,41 @@ export default function SubscriptionsPage({
               itemHeight={80}
               containerHeight={600}
               renderItem={(sub: any, index: number) => (
-                <SubscriptionCard
-                  key={sub.id}
-                  subscription={sub}
-                  onDelete={onDelete}
-                  onManage={onManage}
-                  selectedSubscriptions={selectedSubscriptions}
-                  onToggleSelect={onToggleSelect}
-                  darkMode={darkMode}
-                  isDuplicate={duplicates.some((dup: any) => dup.subscriptions.some((s: any) => s.id === sub.id))}
-                  unusedInfo={unusedSubscriptions.find((unused: any) => unused.id === sub.id)}
-                />
+                <ErrorBoundary 
+                  fallback={<BrokenCardPlaceholder name={sub?.name} darkMode={darkMode} />}
+                >
+                  <SubscriptionCard
+                    key={sub.id}
+                    subscription={sub}
+                    onDelete={onDelete}
+                    onManage={onManage}
+                    selectedSubscriptions={selectedSubscriptions}
+                    onToggleSelect={onToggleSelect}
+                    darkMode={darkMode}
+                    isDuplicate={duplicates.some((dup: any) => dup.subscriptions.some((s: any) => s.id === sub.id))}
+                    unusedInfo={unusedSubscriptions.find((unused: any) => unused.id === sub.id)}
+                  />
+                </ErrorBoundary>
               )}
             />
           ) : (
             <div className="space-y-3">
               {filtered.map((sub: any) => (
-                <SubscriptionCard
+                <ErrorBoundary 
                   key={sub.id}
-                  subscription={sub}
-                  onDelete={onDelete}
-                  onManage={onManage}
-                  selectedSubscriptions={selectedSubscriptions}
-                  onToggleSelect={onToggleSelect}
-                  darkMode={darkMode}
-                  isDuplicate={duplicates.some((dup: any) => dup.subscriptions.some((s: any) => s.id === sub.id))}
-                  unusedInfo={unusedSubscriptions.find((unused: any) => unused.id === sub.id)}
-                />
+                  fallback={<BrokenCardPlaceholder name={sub?.name} darkMode={darkMode} />}
+                >
+                  <SubscriptionCard
+                    subscription={sub}
+                    onDelete={onDelete}
+                    onManage={onManage}
+                    selectedSubscriptions={selectedSubscriptions}
+                    onToggleSelect={onToggleSelect}
+                    darkMode={darkMode}
+                    isDuplicate={duplicates.some((dup: any) => dup.subscriptions.some((s: any) => s.id === sub.id))}
+                    unusedInfo={unusedSubscriptions.find((unused: any) => unused.id === sub.id)}
+                  />
+                </ErrorBoundary>
               ))}
             </div>
           )}
@@ -445,3 +454,28 @@ function SubscriptionCard({
     </div>
   )
 }
+
+function BrokenCardPlaceholder({ name, darkMode }: { name?: string; darkMode?: boolean }) {
+  return (
+    <div
+      className={`${darkMode ? "bg-[#2D3748] border-[#374151]" : "bg-white border-gray-200"} border rounded-xl p-5 flex items-center justify-between opacity-70`}
+    >
+      <div className="flex items-center gap-4 flex-1">
+        <div className={`w-12 h-12 ${darkMode ? "bg-[#1E2A35]" : "bg-gray-100"} rounded-lg flex items-center justify-center`}>
+          <AlertCircle className="w-6 h-6 text-destructive" />
+        </div>
+        <div>
+          <h4 className={`font-semibold ${darkMode ? "text-white" : "text-gray-900"}`}>
+            {name || "Subscription"} (Error)
+          </h4>
+          <p className={`text-xs ${darkMode ? "text-gray-400" : "text-gray-500"}`}>
+            This component failed to load.
+          </p>
+        </div>
+      </div>
+      <div className="text-right">
+        <p className={`text-xs ${darkMode ? "text-gray-400" : "text-gray-500"}`}>Unavailable</p>
+      </div>
+    </div>
+  )
+}