I'm building a full-stack app using Next.js 14 with the App Router. I have a MeetingForm component that uses 'use client' and calls a createMeeting Server Action when submitting the form.

Everything works perfectly in development (npm run dev), but once I build the app and run it in production mode (npm run build && npm start), I get this error when submitting the form:

There was an unknown error saving your event.
An error occurred in the Server Components render.
The specific message is omitted in production builds to avoid leaking sensitive details.
A digest property is included on this error instance which may provide additional details about the nature of the error.


Code


const router = useRouter()

async function onSubmit(values) {
try {
const meetingData = await createMeeting({
...values,
eventId,
clerkUserId,
})

const path = /book/${meetingData.clerkUserId}/${meetingData.eventId}/success?startTime=${meetingData.startTime.toISOString()}
router.push(path)

} catch (error) {
console.error('Error creating meeting:', error)
form.setError('root', {
message: There was an unknown error saving your event.,
})
}
}

if (form.formState.isSubmitting) return <Booking />

return (
<form onSubmit={form.handleSubmit(onSubmit)}>
{form.formState.errors.root && (
<div className="text-red-500 text-sm">
{form.formState.errors.root.message}
</div>
)}
{/* Other form fields */}
</form>
)
}





Question now is


Is calling a Server Action directly from a Client Component supported in production?

Could this issue be caused by something in createMeeting that's server-only (like accessing cookies/headers)?

What's the best way to debug hidden errors like this in Next.js production?

Would moving the action logic to an API route be more reliable?