fix: add error handling to deleteInvoice action#1127
fix: add error handling to deleteInvoice action#1127hamed-zeidabadi wants to merge 1 commit intovercel:mainfrom
Conversation
Add try-catch block to deleteInvoice function to properly handle database errors. This ensures consistent error handling across all CRUD operations and prevents unhandled promise rejections when database operations fail. Changes: - Wrap database operation in try-catch block - Return error message on failure - Return success message on completion
|
@hamed-zeidabadi is attempting to deploy a commit to the Vercel Team on Vercel. A member of the Team first needs to authorize it. |
| try { | ||
| await sql`DELETE FROM invoices WHERE id = ${id}`; | ||
| revalidatePath('/dashboard/invoices'); | ||
| return { message: 'Deleted Invoice.' }; |
There was a problem hiding this comment.
| return { message: 'Deleted Invoice.' }; | |
| redirect('/dashboard/invoices'); |
The deleteInvoice function returns error and success messages that cannot be displayed to the user because the DeleteInvoice component doesn't use useActionState to capture return values, leaving errors silently unhandled.
View Details
Analysis
Database errors during invoice deletion are silently masked with no user feedback
What fails: The deleteInvoice() Server Action in dashboard/final-example/app/lib/actions.ts (lines 112-120) lacks a redirect after successful deletion, making error messages unreachable to the user. When a database error occurs, the deletion fails silently with no indication to the user, leaving them confused about whether their action succeeded.
How to reproduce:
- Navigate to dashboard invoices page (
/dashboard/invoices) - Click the delete button (trash icon) on any invoice
- If a database error occurs during deletion (e.g., connection failure, constraint violation), the operation fails silently
- The page remains unchanged with no error message displayed
- User cannot determine if the deletion succeeded or failed
Result: On database error, the function returns { message: 'Database Error: Failed to Delete Invoice.' } (line 119), but this return value is never displayed because the DeleteInvoice component doesn't use useActionState. The error is silently dropped.
Expected: Following the pattern of createInvoice() and updateInvoice() functions in the same file (lines 74 and 109), the deleteInvoice() function should call redirect('/dashboard/invoices') after successful deletion. This ensures:
- On success: User is redirected to fresh page with updated invoice list
- On error: User sees error message via the existing error handling pattern
- Consistent UX across all CRUD operations
Implementation: Added redirect('/dashboard/invoices') after revalidatePath() in the success path of deleteInvoice(), matching the pattern of other invoice operations. This ensures user gets immediate visual feedback (page redirect with fresh data) on successful deletion, and error messages return to the client for display.
Add try-catch block to deleteInvoice function to properly handle database errors. This ensures consistent error handling across all CRUD operations and prevents unhandled promise rejections when database operations fail.
Changes: