Implement comprehensive error handling

- Add try-catch blocks to all server actions with retry logic
- Implement exponential backoff retry mechanism for database operations
- Add input validation to all server actions
- Create ErrorBoundary component for React error handling
- Add page-level error handlers (error.tsx, global-error.tsx)
- Add route-specific error pages for list and item routes
- Enhance database connection with graceful error handling
- Add user-friendly error messages throughout the application
- Implement proper error logging for debugging

Task: 16. Implement error handling
Requirements: All (error handling is cross-cutting)

.kiro/specs/ultimate-lists-app/tasks.md

@@ -199,7 +199,7 @@
   - Implement skeleton loaders
   - _Requirements: 7.3_
 
-- [ ] 16. Implement error handling
+- [-] 16. Implement error handling
   - Add try-catch blocks to all server actions
   - Implement error boundaries in React components
   - Add user-friendly error messages

app/error.tsx

@@ -0,0 +1,46 @@
+'use client'
+
+import { useEffect } from 'react'
+import { AlertTriangle } from 'lucide-react'
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string }
+  reset: () => void
+}) {
+  useEffect(() => {
+    console.error('Page error:', error)
+  }, [error])
+
+  return (
+    <div className="min-h-screen flex items-center justify-center p-4 bg-gray-50">
+      <div className="max-w-md w-full bg-white rounded-lg shadow-lg p-6 sm:p-8">
+        <div className="flex items-center justify-center w-12 h-12 sm:w-16 sm:h-16 bg-red-100 rounded-full mx-auto mb-4">
+          <AlertTriangle className="w-6 h-6 sm:w-8 sm:h-8 text-red-600" />
+        </div>
+        <h2 className="text-xl sm:text-2xl font-bold text-gray-900 text-center mb-2">
+          Something went wrong
+        </h2>
+        <p className="text-sm sm:text-base text-gray-600 text-center mb-6">
+          {error.message || 'We encountered an unexpected error. Please try again.'}
+        </p>
+        <div className="flex flex-col sm:flex-row gap-3">
+          <button
+            onClick={reset}
+            className="flex-1 px-4 py-3 bg-blue-500 hover:bg-blue-600 active:bg-blue-700 text-white rounded-lg transition-colors font-medium text-sm sm:text-base tap-target"
+          >
+            Try Again
+          </button>
+          <button
+            onClick={() => window.location.href = '/'}
+            className="flex-1 px-4 py-3 bg-gray-200 hover:bg-gray-300 active:bg-gray-400 text-gray-700 rounded-lg transition-colors font-medium text-sm sm:text-base tap-target"
+          >
+            Go Home
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

app/global-error.tsx

@@ -0,0 +1,50 @@
+'use client'
+
+import { useEffect } from 'react'
+import { AlertTriangle } from 'lucide-react'
+
+export default function GlobalError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string }
+  reset: () => void
+}) {
+  useEffect(() => {
+    console.error('Global error:', error)
+  }, [error])
+
+  return (
+    <html lang="en">
+      <body className="bg-gray-50 min-h-screen">
+        <div className="min-h-screen flex items-center justify-center p-4">
+          <div className="max-w-md w-full bg-white rounded-lg shadow-lg p-6 sm:p-8">
+            <div className="flex items-center justify-center w-12 h-12 sm:w-16 sm:h-16 bg-red-100 rounded-full mx-auto mb-4">
+              <AlertTriangle className="w-6 h-6 sm:w-8 sm:h-8 text-red-600" />
+            </div>
+            <h2 className="text-xl sm:text-2xl font-bold text-gray-900 text-center mb-2">
+              Application Error
+            </h2>
+            <p className="text-sm sm:text-base text-gray-600 text-center mb-6">
+              A critical error occurred. Please refresh the page or contact support if the problem persists.
+            </p>
+            <div className="flex flex-col sm:flex-row gap-3">
+              <button
+                onClick={reset}
+                className="flex-1 px-4 py-3 bg-blue-500 hover:bg-blue-600 active:bg-blue-700 text-white rounded-lg transition-colors font-medium text-sm sm:text-base"
+              >
+                Try Again
+              </button>
+              <button
+                onClick={() => window.location.href = '/'}
+                className="flex-1 px-4 py-3 bg-gray-200 hover:bg-gray-300 active:bg-gray-400 text-gray-700 rounded-lg transition-colors font-medium text-sm sm:text-base"
+              >
+                Go Home
+              </button>
+            </div>
+          </div>
+        </div>
+      </body>
+    </html>
+  )
+}

app/layout.tsx

@@ -3,6 +3,7 @@ import './globals.css'
 import ServiceWorkerRegistration from '@/components/ServiceWorkerRegistration'
 import OfflineIndicator from '@/components/OfflineIndicator'
 import { ToastProvider } from '@/components/ToastContainer'
+import ErrorBoundary from '@/components/ErrorBoundary'
 
 export const metadata: Metadata = {
   title: 'Ultimate Lists',
@@ -68,11 +69,13 @@ export default function RootLayout({
         <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
       </head>
       <body className="bg-gray-50 min-h-screen">
-        <ToastProvider>
+        <ErrorBoundary>
-          <ServiceWorkerRegistration />
+          <ToastProvider>
-          <OfflineIndicator />
+            <ServiceWorkerRegistration />
-          {children}
+            <OfflineIndicator />
-        </ToastProvider>
+            {children}
+          </ToastProvider>
+        </ErrorBoundary>
       </body>
     </html>
   )

app/list/[id]/error.tsx

@@ -0,0 +1,53 @@
+'use client'
+
+import { useEffect } from 'react'
+import { AlertTriangle } from 'lucide-react'
+import Link from 'next/link'
+
+export default function ListError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string }
+  reset: () => void
+}) {
+  useEffect(() => {
+    console.error('List page error:', error)
+  }, [error])
+
+  const isNotFound = error.message.includes('not found')
+
+  return (
+    <div className="min-h-screen flex items-center justify-center p-4 bg-gray-50">
+      <div className="max-w-md w-full bg-white rounded-lg shadow-lg p-6 sm:p-8">
+        <div className="flex items-center justify-center w-12 h-12 sm:w-16 sm:h-16 bg-red-100 rounded-full mx-auto mb-4">
+          <AlertTriangle className="w-6 h-6 sm:w-8 sm:h-8 text-red-600" />
+        </div>
+        <h2 className="text-xl sm:text-2xl font-bold text-gray-900 text-center mb-2">
+          {isNotFound ? 'List Not Found' : 'Error Loading List'}
+        </h2>
+        <p className="text-sm sm:text-base text-gray-600 text-center mb-6">
+          {isNotFound
+            ? 'The list you are looking for does not exist or has been deleted.'
+            : error.message || 'We encountered an error loading this list. Please try again.'}
+        </p>
+        <div className="flex flex-col sm:flex-row gap-3">
+          {!isNotFound && (
+            <button
+              onClick={reset}
+              className="flex-1 px-4 py-3 bg-blue-500 hover:bg-blue-600 active:bg-blue-700 text-white rounded-lg transition-colors font-medium text-sm sm:text-base tap-target"
+            >
+              Try Again
+            </button>
+          )}
+          <Link
+            href="/"
+            className="flex-1 px-4 py-3 bg-gray-200 hover:bg-gray-300 active:bg-gray-400 text-gray-700 rounded-lg transition-colors font-medium text-sm sm:text-base tap-target text-center"
+          >
+            Back to Lists
+          </Link>
+        </div>
+      </div>
+    </div>
+  )
+}

app/list/[id]/item/[itemId]/error.tsx

@@ -0,0 +1,55 @@
+'use client'
+
+import { useEffect } from 'react'
+import { AlertTriangle } from 'lucide-react'
+import { useRouter } from 'next/navigation'
+
+export default function ItemError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string }
+  reset: () => void
+}) {
+  const router = useRouter()
+
+  useEffect(() => {
+    console.error('Item page error:', error)
+  }, [error])
+
+  const isNotFound = error.message.includes('not found')
+
+  return (
+    <div className="min-h-screen flex items-center justify-center p-4 bg-gray-50">
+      <div className="max-w-md w-full bg-white rounded-lg shadow-lg p-6 sm:p-8">
+        <div className="flex items-center justify-center w-12 h-12 sm:w-16 sm:h-16 bg-red-100 rounded-full mx-auto mb-4">
+          <AlertTriangle className="w-6 h-6 sm:w-8 sm:h-8 text-red-600" />
+        </div>
+        <h2 className="text-xl sm:text-2xl font-bold text-gray-900 text-center mb-2">
+          {isNotFound ? 'Item Not Found' : 'Error Loading Item'}
+        </h2>
+        <p className="text-sm sm:text-base text-gray-600 text-center mb-6">
+          {isNotFound
+            ? 'The item you are looking for does not exist or has been deleted.'
+            : error.message || 'We encountered an error loading this item. Please try again.'}
+        </p>
+        <div className="flex flex-col sm:flex-row gap-3">
+          {!isNotFound && (
+            <button
+              onClick={reset}
+              className="flex-1 px-4 py-3 bg-blue-500 hover:bg-blue-600 active:bg-blue-700 text-white rounded-lg transition-colors font-medium text-sm sm:text-base tap-target"
+            >
+              Try Again
+            </button>
+          )}
+          <button
+            onClick={() => router.back()}
+            className="flex-1 px-4 py-3 bg-gray-200 hover:bg-gray-300 active:bg-gray-400 text-gray-700 rounded-lg transition-colors font-medium text-sm sm:text-base tap-target"
+          >
+            Go Back
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

components/ErrorBoundary.tsx

@@ -0,0 +1,81 @@
+'use client'
+
+import React, { Component, ReactNode } from 'react'
+import { AlertTriangle } from 'lucide-react'
+
+interface Props {
+  children: ReactNode
+  fallback?: ReactNode
+}
+
+interface State {
+  hasError: boolean
+  error: Error | null
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props)
+    this.state = { hasError: false, error: null }
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error }
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    console.error('Error caught by boundary:', error, errorInfo)
+  }
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback
+      }
+
+      return (
+        <div className="min-h-screen flex items-center justify-center p-4 bg-gray-50">
+          <div className="max-w-md w-full bg-white rounded-lg shadow-lg p-6 sm:p-8">
+            <div className="flex items-center justify-center w-12 h-12 sm:w-16 sm:h-16 bg-red-100 rounded-full mx-auto mb-4">
+              <AlertTriangle className="w-6 h-6 sm:w-8 sm:h-8 text-red-600" />
+            </div>
+            <h2 className="text-xl sm:text-2xl font-bold text-gray-900 text-center mb-2">
+              Something went wrong
+            </h2>
+            <p className="text-sm sm:text-base text-gray-600 text-center mb-6">
+              We encountered an unexpected error. Please try refreshing the page.
+            </p>
+            {this.state.error && (
+              <details className="mb-6 p-3 sm:p-4 bg-gray-50 rounded-lg text-xs sm:text-sm">
+                <summary className="cursor-pointer font-medium text-gray-700 mb-2">
+                  Error details
+                </summary>
+                <pre className="text-red-600 overflow-auto whitespace-pre-wrap break-words">
+                  {this.state.error.message}
+                </pre>
+              </details>
+            )}
+            <div className="flex flex-col sm:flex-row gap-3">
+              <button
+                onClick={() => window.location.reload()}
+                className="flex-1 px-4 py-3 bg-blue-500 hover:bg-blue-600 active:bg-blue-700 text-white rounded-lg transition-colors font-medium text-sm sm:text-base tap-target"
+              >
+                Refresh Page
+              </button>
+              <button
+                onClick={() => window.location.href = '/'}
+                className="flex-1 px-4 py-3 bg-gray-200 hover:bg-gray-300 active:bg-gray-400 text-gray-700 rounded-lg transition-colors font-medium text-sm sm:text-base tap-target"
+              >
+                Go Home
+              </button>
+            </div>
+          </div>
+        </div>
+      )
+    }
+
+    return this.props.children
+  }
+}
+
+export default ErrorBoundary

lib/actions.ts

@@ -3,48 +3,149 @@
 import { prisma } from './db'
 import { revalidatePath } from 'next/cache'
 
+// Retry utility for database operations
+async function retryOperation<T>(
+  operation: () => Promise<T>,
+  maxRetries: number = 3,
+  delayMs: number = 1000
+): Promise<T> {
+  let lastError: Error | undefined
+  
+  for (let attempt = 0; attempt < maxRetries; attempt++) {
+    try {
+      return await operation()
+    } catch (error) {
+      lastError = error as Error
+      
+      // Don't retry on validation errors or not found errors
+      if (
+        error instanceof Error &&
+        (error.message.includes('Unique constraint') ||
+         error.message.includes('Record to update not found') ||
+         error.message.includes('Record to delete does not exist'))
+      ) {
+        throw error
+      }
+      
+      // Wait before retrying (exponential backoff)
+      if (attempt < maxRetries - 1) {
+        await new Promise(resolve => setTimeout(resolve, delayMs * Math.pow(2, attempt)))
+      }
+    }
+  }
+  
+  throw lastError
+}
+
 export async function getLists() {
-  return await prisma.list.findMany({
+  try {
-    include: {
+    return await retryOperation(() =>
-      items: true,
+      prisma.list.findMany({
-    },
+        include: {
-    orderBy: {
+          items: true,
-      updatedAt: 'desc',
+        },
-    },
+        orderBy: {
-  })
+          updatedAt: 'desc',
+        },
+      })
+    )
+  } catch (error) {
+    console.error('Error fetching lists:', error)
+    throw new Error('Failed to load lists. Please check your connection and try again.')
+  }
 }
 
 export async function createList(title: string, color: string = '#3B82F6') {
-  const list = await prisma.list.create({
+  try {
-    data: {
+    // Validate input
-      title,
+    if (!title || !title.trim()) {
-      color,
+      throw new Error('List title is required')
-    },
+    }
-  })
+    
-  revalidatePath('/')
+    if (title.length > 200) {
-  return list
+      throw new Error('List title must be less than 200 characters')
+    }
+    
+    const list = await retryOperation(() =>
+      prisma.list.create({
+        data: {
+          title: title.trim(),
+          color,
+        },
+      })
+    )
+    
+    revalidatePath('/')
+    return list
+  } catch (error) {
+    console.error('Error creating list:', error)
+    if (error instanceof Error && error.message.includes('required')) {
+      throw error
+    }
+    throw new Error('Failed to create list. Please try again.')
+  }
 }
 
 export async function getListWithItems(listId: string) {
-  return await prisma.list.findUnique({
+  try {
-    where: { id: listId },
+    if (!listId) {
-    include: {
+      throw new Error('List ID is required')
-      items: {
+    }
-        orderBy: {
+    
-          createdAt: 'desc',
+    const list = await retryOperation(() =>
+      prisma.list.findUnique({
+        where: { id: listId },
+        include: {
+          items: {
+            orderBy: {
+              createdAt: 'desc',
+            },
+          },
         },
-      },
+      })
-    },
+    )
-  })
+    
+    if (!list) {
+      throw new Error('List not found')
+    }
+    
+    return list
+  } catch (error) {
+    console.error('Error fetching list:', error)
+    if (error instanceof Error && error.message === 'List not found') {
+      throw error
+    }
+    throw new Error('Failed to load list. Please try again.')
+  }
 }
 
 export async function getItem(itemId: string) {
-  return await prisma.item.findUnique({
+  try {
-    where: { id: itemId },
+    if (!itemId) {
-    include: {
+      throw new Error('Item ID is required')
-      list: true,
+    }
-    },
+    
-  })
+    const item = await retryOperation(() =>
+      prisma.item.findUnique({
+        where: { id: itemId },
+        include: {
+          list: true,
+        },
+      })
+    )
+    
+    if (!item) {
+      throw new Error('Item not found')
+    }
+    
+    return item
+  } catch (error) {
+    console.error('Error fetching item:', error)
+    if (error instanceof Error && error.message === 'Item not found') {
+      throw error
+    }
+    throw new Error('Failed to load item. Please try again.')
+  }
 }
 
 export async function createItem(
@@ -58,31 +159,75 @@ export async function createItem(
     notes?: string | null
   }
 ) {
-  const item = await prisma.item.create({
+  try {
-    data: {
+    // Validate input
-      title,
+    if (!listId) {
-      description,
+      throw new Error('List ID is required')
-      listId,
+    }
-      ...(metadata?.priority && { priority: metadata.priority }),
+    
-      ...(metadata?.dueDate !== undefined && { dueDate: metadata.dueDate }),
+    if (!title || !title.trim()) {
-      ...(metadata?.tags && { tags: metadata.tags }),
+      throw new Error('Item title is required')
-      ...(metadata?.notes !== undefined && { notes: metadata.notes }),
+    }
-    },
+    
-  })
+    if (title.length > 200) {
-  revalidatePath(`/list/${listId}`)
+      throw new Error('Item title must be less than 200 characters')
-  return item
+    }
+    
+    const item = await retryOperation(() =>
+      prisma.item.create({
+        data: {
+          title: title.trim(),
+          description: description?.trim() || null,
+          listId,
+          ...(metadata?.priority && { priority: metadata.priority }),
+          ...(metadata?.dueDate !== undefined && { dueDate: metadata.dueDate }),
+          ...(metadata?.tags && { tags: metadata.tags }),
+          ...(metadata?.notes !== undefined && { notes: metadata.notes }),
+        },
+      })
+    )
+    
+    revalidatePath(`/list/${listId}`)
+    return item
+  } catch (error) {
+    console.error('Error creating item:', error)
+    if (error instanceof Error && (error.message.includes('required') || error.message.includes('must be'))) {
+      throw error
+    }
+    throw new Error('Failed to create item. Please try again.')
+  }
 }
 
 export async function toggleItem(itemId: string) {
-  const item = await prisma.item.findUnique({ where: { id: itemId } })
+  try {
-  if (!item) return null
+    if (!itemId) {
-  
+      throw new Error('Item ID is required')
-  const updated = await prisma.item.update({
+    }
-    where: { id: itemId },
+    
-    data: { completed: !item.completed },
+    const item = await retryOperation(() =>
-  })
+      prisma.item.findUnique({ where: { id: itemId } })
-  revalidatePath(`/list/${item.listId}`)
+    )
-  return updated
+    
+    if (!item) {
+      throw new Error('Item not found')
+    }
+    
+    const updated = await retryOperation(() =>
+      prisma.item.update({
+        where: { id: itemId },
+        data: { completed: !item.completed },
+      })
+    )
+    
+    revalidatePath(`/list/${item.listId}`)
+    return updated
+  } catch (error) {
+    console.error('Error toggling item:', error)
+    if (error instanceof Error && error.message === 'Item not found') {
+      throw error
+    }
+    throw new Error('Failed to update item. Please try again.')
+  }
 }
 
 export async function updateItem(
@@ -97,34 +242,114 @@ export async function updateItem(
     notes?: string | null
   }
 ) {
-  const item = await prisma.item.findUnique({ where: { id: itemId } })
+  try {
-  if (!item) return null
+    if (!itemId) {
+      throw new Error('Item ID is required')
+    }
+    
+    // Validate title if provided
+    if (data.title !== undefined) {
+      if (!data.title || !data.title.trim()) {
+        throw new Error('Item title cannot be empty')
+      }
+      if (data.title.length > 200) {
+        throw new Error('Item title must be less than 200 characters')
+      }
+      data.title = data.title.trim()
+    }
+    
+    // Trim description if provided
+    if (data.description !== undefined && data.description !== null) {
+      data.description = data.description.trim() || null
+    }
+    
+    const item = await retryOperation(() =>
+      prisma.item.findUnique({ where: { id: itemId } })
+    )
+    
+    if (!item) {
+      throw new Error('Item not found')
+    }
 
-  const updated = await prisma.item.update({
+    const updated = await retryOperation(() =>
-    where: { id: itemId },
+      prisma.item.update({
-    data,
+        where: { id: itemId },
-  })
+        data,
-  revalidatePath(`/list/${item.listId}`)
+      })
-  return updated
+    )
+    
+    revalidatePath(`/list/${item.listId}`)
+    return updated
+  } catch (error) {
+    console.error('Error updating item:', error)
+    if (error instanceof Error && (error.message.includes('not found') || error.message.includes('required') || error.message.includes('cannot be'))) {
+      throw error
+    }
+    throw new Error('Failed to update item. Please try again.')
+  }
 }
 
 export async function deleteItem(itemId: string) {
-  const item = await prisma.item.findUnique({ where: { id: itemId } })
+  try {
-  if (!item) return null
+    if (!itemId) {
+      throw new Error('Item ID is required')
+    }
+    
+    const item = await retryOperation(() =>
+      prisma.item.findUnique({ where: { id: itemId } })
+    )
+    
+    if (!item) {
+      throw new Error('Item not found')
+    }
 
-  await prisma.item.delete({
+    await retryOperation(() =>
-    where: { id: itemId },
+      prisma.item.delete({
-  })
+        where: { id: itemId },
-  revalidatePath(`/list/${item.listId}`)
+      })
-  return { success: true }
+    )
+    
+    revalidatePath(`/list/${item.listId}`)
+    return { success: true }
+  } catch (error) {
+    console.error('Error deleting item:', error)
+    if (error instanceof Error && error.message === 'Item not found') {
+      throw error
+    }
+    throw new Error('Failed to delete item. Please try again.')
+  }
 }
 
 export async function deleteList(listId: string) {
-  await prisma.list.delete({
+  try {
-    where: { id: listId },
+    if (!listId) {
-  })
+      throw new Error('List ID is required')
-  revalidatePath('/')
+    }
-  return { success: true }
+    
+    // Check if list exists
+    const list = await retryOperation(() =>
+      prisma.list.findUnique({ where: { id: listId } })
+    )
+    
+    if (!list) {
+      throw new Error('List not found')
+    }
+
+    await retryOperation(() =>
+      prisma.list.delete({
+        where: { id: listId },
+      })
+    )
+    
+    revalidatePath('/')
+    return { success: true }
+  } catch (error) {
+    console.error('Error deleting list:', error)
+    if (error instanceof Error && error.message === 'List not found') {
+      throw error
+    }
+    throw new Error('Failed to delete list. Please try again.')
+  }
 }
 
 export async function updateList(
@@ -134,85 +359,120 @@ export async function updateList(
     color?: string
   }
 ) {
-  const updated = await prisma.list.update({
+  try {
-    where: { id: listId },
+    if (!listId) {
-    data,
+      throw new Error('List ID is required')
-  })
+    }
-  revalidatePath('/')
+    
-  revalidatePath(`/list/${listId}`)
+    // Validate title if provided
-  return updated
+    if (data.title !== undefined) {
+      if (!data.title || !data.title.trim()) {
+        throw new Error('List title cannot be empty')
+      }
+      if (data.title.length > 200) {
+        throw new Error('List title must be less than 200 characters')
+      }
+      data.title = data.title.trim()
+    }
+    
+    const updated = await retryOperation(() =>
+      prisma.list.update({
+        where: { id: listId },
+        data,
+      })
+    )
+    
+    revalidatePath('/')
+    revalidatePath(`/list/${listId}`)
+    return updated
+  } catch (error) {
+    console.error('Error updating list:', error)
+    if (error instanceof Error && (error.message.includes('not found') || error.message.includes('required') || error.message.includes('cannot be'))) {
+      throw error
+    }
+    throw new Error('Failed to update list. Please try again.')
+  }
 }
 
 export async function searchItems(query: string, listId?: string) {
-  if (!query.trim()) {
+  try {
-    return []
+    if (!query || !query.trim()) {
-  }
+      return []
+    }
 
-  const searchTerm = query.toLowerCase()
+    const searchTerm = query.toLowerCase()
 
-  // Build the where clause
+    // Build the where clause
-  const whereClause: any = {
+    const whereClause: any = {
-    OR: [
+      OR: [
-      {
+        {
-        title: {
+          title: {
-          contains: query,
+            contains: query,
-          mode: 'insensitive' as const,
+            mode: 'insensitive' as const,
+          },
         },
-      },
+        {
-      {
+          description: {
-        description: {
+            contains: query,
-          contains: query,
+            mode: 'insensitive' as const,
-          mode: 'insensitive' as const,
+          },
         },
-      },
+        {
-      {
+          notes: {
-        notes: {
+            contains: query,
-          contains: query,
+            mode: 'insensitive' as const,
-          mode: 'insensitive' as const,
+          },
         },
-      },
+      ],
-    ],
+    }
-  }
 
-  // Add list scope if specified
+    // Add list scope if specified
-  if (listId) {
+    if (listId) {
-    whereClause.listId = listId
+      whereClause.listId = listId
-  }
+    }
 
-  const items = await prisma.item.findMany({
+    const items = await retryOperation(() =>
-    where: whereClause,
+      prisma.item.findMany({
-    include: {
+        where: whereClause,
-      list: true,
+        include: {
-    },
+          list: true,
-    orderBy: {
+        },
-      updatedAt: 'desc',
+        orderBy: {
-    },
+          updatedAt: 'desc',
-  })
+        },
-
-  // Also search in tags (stored as JSON)
-  const allItems = listId
-    ? await prisma.item.findMany({
-        where: { listId },
-        include: { list: true },
       })
-    : await prisma.item.findMany({
-        include: { list: true },
-      })
-
-  const tagMatches = allItems.filter((item) => {
-    const tags = Array.isArray(item.tags) ? item.tags : []
-    return tags.some((tag) =>
-      typeof tag === 'string' && tag.toLowerCase().includes(searchTerm)
     )
-  })
 
-  // Combine results and remove duplicates
+    // Also search in tags (stored as JSON)
-  const combinedResults = [...items, ...tagMatches]
+    const allItems = await retryOperation(() =>
-  const uniqueResults = Array.from(
+      listId
-    new Map(combinedResults.map((item) => [item.id, item])).values()
+        ? prisma.item.findMany({
-  )
+            where: { listId },
+            include: { list: true },
+          })
+        : prisma.item.findMany({
+            include: { list: true },
+          })
+    )
 
-  return uniqueResults
+    const tagMatches = allItems.filter((item) => {
+      const tags = Array.isArray(item.tags) ? item.tags : []
+      return tags.some((tag) =>
+        typeof tag === 'string' && tag.toLowerCase().includes(searchTerm)
+      )
+    })
+
+    // Combine results and remove duplicates
+    const combinedResults = [...items, ...tagMatches]
+    const uniqueResults = Array.from(
+      new Map(combinedResults.map((item) => [item.id, item])).values()
+    )
+
+    return uniqueResults
+  } catch (error) {
+    console.error('Error searching items:', error)
+    throw new Error('Failed to search items. Please try again.')
+  }
 }
 
 export async function getItemsByFilter(
@@ -226,93 +486,100 @@ export async function getItemsByFilter(
     sortOrder?: 'asc' | 'desc'
   } = {}
 ) {
-  // Build the where clause with compound filters (AND logic)
+  try {
-  const whereClause: any = {}
+    // Build the where clause with compound filters (AND logic)
+    const whereClause: any = {}
 
-  // Add list scope if specified
+    // Add list scope if specified
-  if (listId) {
+    if (listId) {
-    whereClause.listId = listId
+      whereClause.listId = listId
-  }
-
-  // Filter by priority
-  if (filters.priority) {
-    whereClause.priority = filters.priority
-  }
-
-  // Filter by completed status
-  if (filters.completed !== undefined && filters.completed !== null) {
-    whereClause.completed = filters.completed
-  }
-
-  // Filter by due date range
-  if (filters.dueDateRange) {
-    const { start, end } = filters.dueDateRange
-    if (start || end) {
-      whereClause.dueDate = {}
-      if (start) {
-        whereClause.dueDate.gte = start
-      }
-      if (end) {
-        whereClause.dueDate.lte = end
-      }
     }
-  }
 
-  // Fetch items from database
+    // Filter by priority
-  const items = await prisma.item.findMany({
+    if (filters.priority) {
-    where: whereClause,
+      whereClause.priority = filters.priority
-    include: {
+    }
-      list: true,
-    },
-  })
 
-  // Filter by tags (client-side since tags are stored as JSON)
+    // Filter by completed status
-  let filteredItems = items
+    if (filters.completed !== undefined && filters.completed !== null) {
-  if (filters.tags && filters.tags.length > 0) {
+      whereClause.completed = filters.completed
-    filteredItems = items.filter((item) => {
+    }
-      const itemTags = Array.isArray(item.tags) ? item.tags : []
-      return filters.tags!.every((filterTag) =>
-        itemTags.some((itemTag) => typeof itemTag === 'string' && itemTag === filterTag)
-      )
-    })
-  }
 
-  // Sort items
+    // Filter by due date range
-  const sortBy = filters.sortBy || 'createdAt'
+    if (filters.dueDateRange) {
-  const sortOrder = filters.sortOrder || 'desc'
+      const { start, end } = filters.dueDateRange
-
+      if (start || end) {
-  const sortedItems = [...filteredItems].sort((a, b) => {
+        whereClause.dueDate = {}
-    let comparison = 0
+        if (start) {
-
+          whereClause.dueDate.gte = start
-    switch (sortBy) {
-      case 'createdAt':
-        comparison = a.createdAt.getTime() - b.createdAt.getTime()
-        break
-      case 'dueDate':
-        // Handle null due dates - place at end
-        if (a.dueDate === null && b.dueDate === null) {
-          comparison = 0
-        } else if (a.dueDate === null) {
-          comparison = 1 // a goes after b
-        } else if (b.dueDate === null) {
-          comparison = -1 // b goes after a
-        } else {
-          comparison = a.dueDate.getTime() - b.dueDate.getTime()
         }
-        break
+        if (end) {
-      case 'priority':
+          whereClause.dueDate.lte = end
-        const priorityOrder = { low: 1, medium: 2, high: 3 }
+        }
-        const aPriority = priorityOrder[a.priority as keyof typeof priorityOrder] || 2
+      }
-        const bPriority = priorityOrder[b.priority as keyof typeof priorityOrder] || 2
-        comparison = aPriority - bPriority
-        break
-      case 'title':
-        comparison = a.title.localeCompare(b.title)
-        break
     }
 
-    return sortOrder === 'asc' ? comparison : -comparison
+    // Fetch items from database
-  })
+    const items = await retryOperation(() =>
+      prisma.item.findMany({
+        where: whereClause,
+        include: {
+          list: true,
+        },
+      })
+    )
 
-  return sortedItems
+    // Filter by tags (client-side since tags are stored as JSON)
+    let filteredItems = items
+    if (filters.tags && filters.tags.length > 0) {
+      filteredItems = items.filter((item) => {
+        const itemTags = Array.isArray(item.tags) ? item.tags : []
+        return filters.tags!.every((filterTag) =>
+          itemTags.some((itemTag) => typeof itemTag === 'string' && itemTag === filterTag)
+        )
+      })
+    }
+
+    // Sort items
+    const sortBy = filters.sortBy || 'createdAt'
+    const sortOrder = filters.sortOrder || 'desc'
+
+    const sortedItems = [...filteredItems].sort((a, b) => {
+      let comparison = 0
+
+      switch (sortBy) {
+        case 'createdAt':
+          comparison = a.createdAt.getTime() - b.createdAt.getTime()
+          break
+        case 'dueDate':
+          // Handle null due dates - place at end
+          if (a.dueDate === null && b.dueDate === null) {
+            comparison = 0
+          } else if (a.dueDate === null) {
+            comparison = 1 // a goes after b
+          } else if (b.dueDate === null) {
+            comparison = -1 // b goes after a
+          } else {
+            comparison = a.dueDate.getTime() - b.dueDate.getTime()
+          }
+          break
+        case 'priority':
+          const priorityOrder = { low: 1, medium: 2, high: 3 }
+          const aPriority = priorityOrder[a.priority as keyof typeof priorityOrder] || 2
+          const bPriority = priorityOrder[b.priority as keyof typeof priorityOrder] || 2
+          comparison = aPriority - bPriority
+          break
+        case 'title':
+          comparison = a.title.localeCompare(b.title)
+          break
+      }
+
+      return sortOrder === 'asc' ? comparison : -comparison
+    })
+
+    return sortedItems
+  } catch (error) {
+    console.error('Error filtering items:', error)
+    throw new Error('Failed to filter items. Please try again.')
+  }
 }

lib/db.ts

@@ -4,6 +4,22 @@ const globalForPrisma = globalThis as unknown as {
   prisma: PrismaClient | undefined
 }
 
-export const prisma = globalForPrisma.prisma ?? new PrismaClient()
+// Create Prisma client with connection error handling
+export const prisma = globalForPrisma.prisma ?? new PrismaClient({
+  log: process.env.NODE_ENV === 'development' ? ['error', 'warn'] : ['error'],
+})
+
+// Handle connection errors
+prisma.$connect().catch((error) => {
+  console.error('Failed to connect to database:', error)
+  // Don't throw here - let individual queries handle connection errors
+})
+
+// Graceful shutdown
+if (typeof window === 'undefined') {
+  process.on('beforeExit', async () => {
+    await prisma.$disconnect()
+  })
+}
 
 if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma