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:
@@ -71,8 +71,11 @@ export function EpicForm({ projectId, epic, onSuccess, onCancel }: EpicFormProps
|
|||||||
});
|
});
|
||||||
|
|
||||||
async function onSubmit(data: EpicFormValues) {
|
async function onSubmit(data: EpicFormValues) {
|
||||||
|
console.log('[EpicForm] onSubmit triggered', { data, user: user?.id, projectId });
|
||||||
|
|
||||||
try {
|
try {
|
||||||
if (!user?.id) {
|
if (!user?.id) {
|
||||||
|
console.error('[EpicForm] User not authenticated');
|
||||||
toast.error('User not authenticated');
|
toast.error('User not authenticated');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@@ -82,20 +85,29 @@ export function EpicForm({ projectId, epic, onSuccess, onCancel }: EpicFormProps
|
|||||||
estimatedHours: data.estimatedHours || undefined,
|
estimatedHours: data.estimatedHours || undefined,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
console.log('[EpicForm] Prepared payload', payload);
|
||||||
|
|
||||||
if (isEditing) {
|
if (isEditing) {
|
||||||
|
console.log('[EpicForm] Updating epic', { epicId: epic.id });
|
||||||
await updateEpic.mutateAsync({
|
await updateEpic.mutateAsync({
|
||||||
id: epic.id,
|
id: epic.id,
|
||||||
data: payload,
|
data: payload,
|
||||||
});
|
});
|
||||||
|
console.log('[EpicForm] Epic updated successfully');
|
||||||
} else {
|
} else {
|
||||||
await createEpic.mutateAsync({
|
console.log('[EpicForm] Creating epic', { projectId, createdBy: user.id });
|
||||||
|
const result = await createEpic.mutateAsync({
|
||||||
projectId,
|
projectId,
|
||||||
createdBy: user.id,
|
createdBy: user.id,
|
||||||
...payload,
|
...payload,
|
||||||
});
|
});
|
||||||
|
console.log('[EpicForm] Epic created successfully', result);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
console.log('[EpicForm] Calling onSuccess callback');
|
||||||
onSuccess?.();
|
onSuccess?.();
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
|
console.error('[EpicForm] Operation failed', error);
|
||||||
const message = error instanceof Error ? error.message : 'Operation failed';
|
const message = error instanceof Error ? error.message : 'Operation failed';
|
||||||
toast.error(message);
|
toast.error(message);
|
||||||
}
|
}
|
||||||
@@ -112,7 +124,16 @@ export function EpicForm({ projectId, epic, onSuccess, onCancel }: EpicFormProps
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Form {...form}>
|
<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
|
<FormField
|
||||||
control={form.control}
|
control={form.control}
|
||||||
name="name"
|
name="name"
|
||||||
|
|||||||
@@ -49,9 +49,18 @@ apiClient.interceptors.request.use(
|
|||||||
if (token) {
|
if (token) {
|
||||||
config.headers.Authorization = `Bearer ${token}`;
|
config.headers.Authorization = `Bearer ${token}`;
|
||||||
}
|
}
|
||||||
|
console.log('[API] Request:', {
|
||||||
|
method: config.method?.toUpperCase(),
|
||||||
|
url: config.url,
|
||||||
|
hasAuth: !!token,
|
||||||
|
data: config.data,
|
||||||
|
});
|
||||||
return config;
|
return config;
|
||||||
},
|
},
|
||||||
(error) => Promise.reject(error)
|
(error) => {
|
||||||
|
console.error('[API] Request interceptor error:', error);
|
||||||
|
return Promise.reject(error);
|
||||||
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
// Response interceptor: automatically refresh Token
|
// Response interceptor: automatically refresh Token
|
||||||
@@ -74,8 +83,22 @@ const processQueue = (error: unknown, token: string | null = null) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
apiClient.interceptors.response.use(
|
apiClient.interceptors.response.use(
|
||||||
(response) => response,
|
(response) => {
|
||||||
|
console.log('[API] Response:', {
|
||||||
|
status: response.status,
|
||||||
|
url: response.config.url,
|
||||||
|
data: response.data,
|
||||||
|
});
|
||||||
|
return response;
|
||||||
|
},
|
||||||
async (error: AxiosError) => {
|
async (error: AxiosError) => {
|
||||||
|
console.error('[API] Response error:', {
|
||||||
|
status: error.response?.status,
|
||||||
|
url: error.config?.url,
|
||||||
|
message: error.message,
|
||||||
|
data: error.response?.data,
|
||||||
|
});
|
||||||
|
|
||||||
const originalRequest = error.config as InternalAxiosRequestConfig & {
|
const originalRequest = error.config as InternalAxiosRequestConfig & {
|
||||||
_retry?: boolean;
|
_retry?: boolean;
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -26,7 +26,15 @@ export const epicsApi = {
|
|||||||
},
|
},
|
||||||
|
|
||||||
create: async (data: CreateEpicDto): Promise<Epic> => {
|
create: async (data: CreateEpicDto): Promise<Epic> => {
|
||||||
return api.post('/api/v1/epics', data);
|
console.log('[epicsApi.create] Sending request', { url: '/api/v1/epics', data });
|
||||||
|
try {
|
||||||
|
const result = await api.post('/api/v1/epics', data);
|
||||||
|
console.log('[epicsApi.create] Request successful', result);
|
||||||
|
return result;
|
||||||
|
} catch (error) {
|
||||||
|
console.error('[epicsApi.create] Request failed', error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
update: async (id: string, data: UpdateEpicDto): Promise<Epic> => {
|
update: async (id: string, data: UpdateEpicDto): Promise<Epic> => {
|
||||||
|
|||||||
Reference in New Issue
Block a user