Improve comment error handling

app/actions/comments.ts

@@ -37,9 +37,10 @@ const notificationBody = (comment: { id: number, content: string }, user: { name
 }
 
 export async function addComment(prevState: { message: string }, formData: FormData) {
-    const general_error = 'There was a problem with your comment, please try again later.'
+    const validation_error = 'Validation error, your comment was invalid.'
     const authorisation_error = 'Error, you must be logged in to post a comment.'
-    const success_message = 'Thanks, your comment was submitted and is awaiting approval.'
+    const server_error = 'Server error, please try again later.'
+    const success_message = 'Your comment was submitted and is awaiting approval.'
 
     const schema = z.object({
         comment: z.string().min(1).max(300),
@@ -55,7 +56,7 @@ export async function addComment(prevState: { message: string }, formData: FormD
 
     const parse = schema.safeParse({comment, slug, parent_id});
     if (!parse.success) {
-        return {message: general_error}
+        return {message: validation_error}
     }
 
     if (parent_id === '') parent_id = null
@@ -82,7 +83,7 @@ export async function addComment(prevState: { message: string }, formData: FormD
             .single()
 
         if (error || newComment?.id === null) {
-            return {message: general_error}
+            return {message: server_error}
         }
 
         if (process.env.NODE_ENV === 'production') {
@@ -92,6 +93,6 @@ export async function addComment(prevState: { message: string }, formData: FormD
         return {message: success_message}
     } catch (error) {
         console.error('Error posting comment:', error)
-        return {message: general_error}
+        return {message: server_error}
     }
 }

components/ui/Comments.tsx

@@ -172,7 +172,7 @@ Comments.Form = function Form({slug}: { slug: string }) {
                     </div>
                     <input type="hidden" name="parent_id" value={parentId ?? ''}/>
                     <input type="hidden" name="slug" value={slug}/>
-                    <div className="mt-2 flex justify-between items-start gap-x-4">
+                    <div className="mt-2 flex justify-between items-center gap-x-4">
                         <p className="text-sm text-zinc-600 dark:text-zinc-400">{`${commentLength} / ${commentMaxLength}`}</p>
                         <div className="flex gap-x-4">
                             {replyContext?.replyTo &&

lib/ntfy.ts

@@ -1,15 +1,19 @@
 import fetcher from '@/lib/fetcher'
 
-const NTFY_URL = process.env.NTFY_URL || ''
+const NTFY_URL = process.env.NTFY_URL ?? ''
 
 export async function sendNotification(notificationBody: any) {
     if (NTFY_URL !== '') {
-        await fetcher(NTFY_URL, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify(notificationBody)
-        })
+        try {
+            await fetcher(NTFY_URL, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(notificationBody)
+            })
+        } catch (error) {
+            console.error('Failed to send notification:', error)
+        }
     }
 }