Troubleshooting Guide - dinesh-git17/my-progress-planner GitHub Wiki

// Add null checks and type guards
const userEmail = user?.email ?? '';

// Use optional chaining
const mealContent = meal?.content || 'No content';

// Type assertion (use carefully)
const apiKey = process.env.OPENAI_API_KEY as string;

// Better: Validate environment variables
if (!process.env.OPENAI_API_KEY) {
  throw new Error('OPENAI_API_KEY is required');
}

// Add retry logic with exponential backoff
async function retryWithBackoff(fn: () => Promise<any>, maxRetries = 3) {
  for (let i = 0; i < maxRetries; i++) {
    try {
      return await fn();
    } catch (error) {
      if (error.status === 429 && i < maxRetries - 1) {
        const delay = Math.pow(2, i) * 1000; // 1s, 2s, 4s
        await new Promise(resolve => setTimeout(resolve, delay));
        continue;
      }
      throw error;
    }
  }
}

// Use fallback responses
const fallbackResponse = "You're doing great! Keep up the amazing work! 💕";

// Validate response content
function validateAIResponse(response: string): boolean {
  const bannedWords = ['diet', 'weight loss', 'calories', 'unhealthy'];
  const requiredElements = /💕|🌟|✨|❤️/; // Should have encouraging emojis
  
  // Check length
  if (response.length < 20 || response.length > 200) return false;
  
  // Check for banned content
  if (bannedWords.some(word => response.toLowerCase().includes(word))) return false;
  
  // Check for encouraging tone
  if (!requiredElements.test(response)) return false;
  
  return true;
}

// Improve prompts for consistency
const IMPROVED_SYSTEM_PROMPT = `
You are a loving, supportive boyfriend who celebrates every meal with genuine enthusiasm.

STRICT RULES:
- Always use 💕, 🌟, or ✨ emojis
- Keep responses 50-150 characters
- Never mention calories, diet, or weight
- Focus on effort and self-care
- Sound personal and loving, not robotic
`;

// Auto-refresh tokens
import { createClient } from '@supabase/supabase-js';

const supabase = createClient(url, key, {
  auth: {
    autoRefreshToken: true,
    persistSession: true,
    detectSessionInUrl: true
  }
});

// Handle auth state changes
supabase.auth.onAuthStateChange((event, session) => {
  if (event === 'SIGNED_OUT' || event === 'TOKEN_REFRESHED') {
    // Handle state change
    window.location.reload();
  }
});

// Fix service worker registration
if ('serviceWorker' in navigator) {
  window.addEventListener('load', async () => {
    try {
      const registration = await navigator.serviceWorker.register('/sw.js');
      console.log('SW registered:', registration);
    } catch (error) {
      console.error('SW registration failed:', error);
    }
  });
}

// Clear old service workers
navigator.serviceWorker.getRegistrations().then(registrations => {
  registrations.forEach(registration => registration.unregister());
});

// Check sync registration
navigator.serviceWorker.ready.then(registration => {
  return registration.sync.register('meal-sync');
});

// Handle sync in service worker
self.addEventListener('sync', event => {
  if (event.tag === 'meal-sync') {
    event.waitUntil(syncMeals());
  }
});

// Fallback for browsers without background sync
if (!('sync' in window.ServiceWorkerRegistration.prototype)) {
  // Poll for connectivity and sync manually
  setInterval(() => {
    if (navigator.onLine) {
      syncPendingData();
    }
  }, 30000);
}

// Add connection pool settings
const supabase = createClient(url, key, {
  db: {
    schema: 'public'
  },
  auth: {
    autoRefreshToken: true,
    persistSession: true
  },
  global: {
    headers: {
      'X-Client-Info': 'my-progress-planner'
    }
  }
});

// Add retry logic for production
async function withRetry(fn: () => Promise<any>, retries = 3): Promise<any> {
  try {
    return await fn();
  } catch (error) {
    if (retries > 0) {
      await new Promise(resolve => setTimeout(resolve, 1000));
      return withRetry(fn, retries - 1);
    }
    throw error;
  }
}

// Implement code splitting
const LazyComponent = lazy(() => import('./HeavyComponent'));

// Optimize images
import Image from 'next/image';

<Image
  src="/meal-photo.jpg"
  alt="Delicious meal"
  width={400}
  height={300}
  priority // For above-the-fold images
  placeholder="blur"
  blurDataURL="data:image/jpeg;base64,..."
/>

// Preload critical resources
<link rel="preload" href="/fonts/dm-sans.woff2" as="font" type="font/woff2" crossOrigin="anonymous" />

// Clean up event listeners
useEffect(() => {
  const handleResize = () => setWidth(window.innerWidth);
  window.addEventListener('resize', handleResize);
  
  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []);

// Clean up intervals
useEffect(() => {
  const interval = setInterval(updateData, 1000);
  
  return () => clearInterval(interval);
}, []);

// Abort ongoing requests
useEffect(() => {
  const controller = new AbortController();
  
  fetch('/api/data', { signal: controller.signal })
    .then(handleData)
    .catch(error => {
      if (error.name !== 'AbortError') {
        console.error('Fetch error:', error);
      }
    });
  
  return () => controller.abort();
}, []);

// Debug utilities for development
const DebugTools = () => {
  if (process.env.NODE_ENV !== 'development') return null;
  
  return (
    <div className="debug-panel">
      <button onClick={() => localStorage.clear()}>Clear Storage</button>
      <button onClick={() => caches.keys().then(names => 
        Promise.all(names.map(name => caches.delete(name)))
      )}>Clear Caches</button>
      <button onClick={() => console.log('Auth state:', supabase.auth.user())}>
        Log Auth State
      </button>
    </div>
  );
};

// Comprehensive error tracking
class ErrorLogger {
  static log(error: Error, context?: any) {
    const errorInfo = {
      message: error.message,
      stack: error.stack,
      timestamp: new Date().toISOString(),
      url: window.location.href,
      userAgent: navigator.userAgent,
      context
    };
    
    // Log to console in development
    if (process.env.NODE_ENV === 'development') {
      console.error('Error logged:', errorInfo);
    }
    
    // Send to error tracking service in production
    if (process.env.NODE_ENV === 'production') {
      fetch('/api/errors', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(errorInfo)
      }).catch(console.error);
    }
  }
}

// Global error handler
window.addEventListener('error', (event) => {
  ErrorLogger.log(event.error, { type: 'global' });
});

// Promise rejection handler
window.addEventListener('unhandledrejection', (event) => {
  ErrorLogger.log(new Error(event.reason), { type: 'promise' });
});