ALwrity/docs/LINKEDIN_WRITER_DEBUGGING_GUIDE.md

LinkedIn Writer Debugging Guide - Loading State and Draft Display Issues

🐛 Issue Description

The LinkedIn post is being generated successfully in the backend, but:

1. Progress loader is not getting hidden after post generation completes
2. Final generated post draft is not visible to the end user
3. Loading state persists even after content generation

🔍 Debugging Added

I've added comprehensive debugging to track the entire flow from content generation to display:

1. LinkedIn Post Generation Action (RegisterLinkedInActions.tsx)

Added debugging for:

• Content being sent to draft update
• Content length verification
• Loading state end confirmation

// Debug: Log the content being sent
console.log('[LinkedIn Writer] Sending draft update:', fullContent?.substring(0, 100) + '...');
console.log('[LinkedIn Writer] Full content length:', fullContent?.length);

// End loading state
console.log('[LinkedIn Writer] Ending loading state...');
window.dispatchEvent(new CustomEvent('linkedinwriter:loadingEnd'));

2. LinkedIn Writer Hook (useLinkedInWriter.ts)

Added debugging for:

• Draft update event handling
• Loading state clearing
• Progress completion

const handleUpdateDraft = (event: CustomEvent) => {
  console.log('[LinkedIn Writer] Draft updated:', event.detail?.substring(0, 100) + '...');
  console.log('[LinkedIn Writer] Draft length:', event.detail?.length);
  console.log('[LinkedIn Writer] Setting draft and clearing loading state...');
  // ... state updates
  console.log('[LinkedIn Writer] Draft update complete');
};

const handleLoadingEnd = (event: CustomEvent) => {
  console.log('[LinkedIn Writer] Loading ended - clearing all loading states');
  // ... state clearing
  console.log('[LinkedIn Writer] Loading state cleared');
};

const handleProgressComplete = () => {
  console.log('[LinkedIn Writer] Progress completed - hiding progress tracker');
  // ... progress hiding
  console.log('[LinkedIn Writer] Hiding progress steps after delay');
};

3. Content Editor Component (ContentEditor.tsx)

Added debugging for:

• Draft content display
• Loading state visibility
• Content formatting

{draft ? (
  <div>
    {/* Debug info */}
    <div style={{ fontSize: '12px', color: '#999', marginBottom: '10px' }}>
      Debug: Draft length: {draft.length}, isGenerating: {isGenerating.toString()}
    </div>
    <div dangerouslySetInnerHTML={{ __html: formatDraftContent(draft, citations, researchSources) }} />
  </div>
) : (
  // ... placeholder content
)}

4. Content Formatter (contentFormatters.ts)

Added debugging for:

• Content formatting process
• Input validation
• Output verification

export function formatDraftContent(content: string, citations?: any[], researchSources?: any[]): string {
  console.log('🔍 [formatDraftContent] Called with:', {
    contentLength: content?.length || 0,
    contentPreview: content?.substring(0, 100) + '...',
    citationsCount: citations?.length || 0,
    researchSourcesCount: researchSources?.length || 0
  });
  
  // ... formatting logic
  
  console.log('🔍 [formatDraftContent] Returning formatted content:', {
    formattedLength: formatted.length,
    formattedPreview: formatted.substring(0, 200) + '...'
  });
  
  return formatted;
}

🧪 Testing Instructions

1. Generate a LinkedIn Post

1. Go to LinkedIn Writer
2. Open browser console (F12)
3. Generate a LinkedIn post
4. Watch the console logs

2. Expected Console Output

During Generation:

[LinkedIn Writer] Loading started: { action: 'generateLinkedInPost', message: '...' }
[LinkedIn Writer] Progress completed - hiding progress tracker
[LinkedIn Writer] Sending draft update: [content preview]...
[LinkedIn Writer] Full content length: [number]
[LinkedIn Writer] Draft updated: [content preview]...
[LinkedIn Writer] Draft length: [number]
[LinkedIn Writer] Setting draft and clearing loading state...
[LinkedIn Writer] Draft update complete
[LinkedIn Writer] Progress completed - hiding progress tracker
[LinkedIn Writer] Ending loading state...
[LinkedIn Writer] Loading ended - clearing all loading states
[LinkedIn Writer] Loading state cleared
[LinkedIn Writer] Hiding progress steps after delay

During Content Display:

🔍 [formatDraftContent] Called with: { contentLength: [number], contentPreview: '...', citationsCount: [number], researchSourcesCount: [number] }
🔍 [formatDraftContent] Returning formatted content: { formattedLength: [number], formattedPreview: '...' }

3. Visual Debugging

In the Content Editor, you should see:

Debug: Draft length: [number], isGenerating: false
[Generated content displayed here]

🔍 What to Look For

1. Missing Console Logs

If any of the expected console logs are missing, it indicates where the flow is breaking:

• Missing "Sending draft update": Issue in LinkedIn post generation action
• Missing "Draft updated": Issue with event handling in hook
• Missing "Loading ended": Issue with loading state clearing
• Missing "formatDraftContent Called": Issue with content display

2. Content Issues

• Draft length: 0: Content not being generated or passed correctly
• isGenerating: true: Loading state not being cleared
• Empty formatted content: Issue with content formatting

3. Event Flow Issues

• Events not being dispatched: Check if API response is successful
• Events not being received: Check event listener registration
• State not updating: Check React state management

🚨 Common Issues and Solutions

Issue 1: Content Not Displaying

Symptoms: Draft length shows 0, no content visible Possible Causes:

• API response doesn't contain content
• Content not being passed to draft update event
• Content being cleared by another process

Issue 2: Loading State Not Clearing

Symptoms: isGenerating remains true, progress loader visible Possible Causes:

• Loading end event not being dispatched
• Loading end event not being received
• State update not triggering re-render

Issue 3: Progress Tracker Not Hiding

Symptoms: Progress steps remain visible Possible Causes:

• Progress complete event not being dispatched
• Progress complete event not being received
• Progress state not being cleared

📋 Debugging Checklist

• Check browser console for all expected logs
• Verify content length is > 0
• Verify isGenerating becomes false
• Verify progress tracker disappears
• Verify content is visible in editor
• Check for any JavaScript errors
• Verify API response contains content
• Check event listener registration

🎯 Next Steps

1. Run the test with debugging enabled
2. Check console logs for the expected flow
3. Identify where the flow breaks based on missing logs
4. Fix the specific issue found in the debugging
5. Remove debugging code once issue is resolved

The debugging will help pinpoint exactly where the issue occurs in the content generation and display flow.