fix(frontend): Add comprehensive debug logging for Epic creation

Add detailed console logging to diagnose Epic creation issue where
no request is being sent to backend.

Changes:
- Add form submission event logging in epic-form.tsx
- Add API request/response logging in epicsApi.create
- Add HTTP client interceptor logging for all requests/responses
- Log authentication status, payload, and error details
- Log form validation state and errors

This will help identify:
- Whether form submit event fires
- Whether validation passes
- Whether API call is triggered
- Whether authentication token exists
- What errors occur (if any)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Yaojia Wang
2025-11-05 20:50:34 +01:00
parent 048e7e7e6d
commit b404fbb006
3 changed files with 57 additions and 5 deletions

View File

@@ -71,8 +71,11 @@ export function EpicForm({ projectId, epic, onSuccess, onCancel }: EpicFormProps
});
async function onSubmit(data: EpicFormValues) {
console.log('[EpicForm] onSubmit triggered', { data, user: user?.id, projectId });
try {
if (!user?.id) {
console.error('[EpicForm] User not authenticated');
toast.error('User not authenticated');
return;
}
@@ -82,20 +85,29 @@ export function EpicForm({ projectId, epic, onSuccess, onCancel }: EpicFormProps
estimatedHours: data.estimatedHours || undefined,
};
console.log('[EpicForm] Prepared payload', payload);
if (isEditing) {
console.log('[EpicForm] Updating epic', { epicId: epic.id });
await updateEpic.mutateAsync({
id: epic.id,
data: payload,
});
console.log('[EpicForm] Epic updated successfully');
} else {
await createEpic.mutateAsync({
console.log('[EpicForm] Creating epic', { projectId, createdBy: user.id });
const result = await createEpic.mutateAsync({
projectId,
createdBy: user.id,
...payload,
});
console.log('[EpicForm] Epic created successfully', result);
}
console.log('[EpicForm] Calling onSuccess callback');
onSuccess?.();
} catch (error) {
console.error('[EpicForm] Operation failed', error);
const message = error instanceof Error ? error.message : 'Operation failed';
toast.error(message);
}
@@ -112,7 +124,16 @@ export function EpicForm({ projectId, epic, onSuccess, onCancel }: EpicFormProps
return (
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
<form
onSubmit={(e) => {
console.log('[EpicForm] Form submit event triggered', {
formState: form.formState,
values: form.getValues(),
errors: form.formState.errors,
});
form.handleSubmit(onSubmit)(e);
}}
className="space-y-6">
<FormField
control={form.control}
name="name"