Fix Supabase 406/400 errors and React Error #130 with comprehensive error handling

[Copilot]

This PR addresses critical stability issues in the BePro application that were causing frequent crashes and poor user experience.

Issues Fixed

1. Supabase 406 Not Acceptable Errors

The application was experiencing PostgREST 406 errors when querying the database, particularly on endpoints like:

syetgksogdvelpfbrfgx.supabase.co/rest/v1/codex?select=session%2Croadmap%2Cactive_status&username=eq.bepro

Root Cause: Missing proper content negotiation headers and inadequate error handling for PostgREST responses.

Solution: Enhanced the Supabase client with proper headers configuration and retry logic:

// Before: Basic client creation
export const supabase = createClient(supabaseUrl, supabaseKey)

// After: Enhanced client with proper configuration
export const supabase = createClient(supabaseUrl, supabaseKey, {
  global: {
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
      'Prefer': 'return=minimal'
    }
  },
  // ... additional configuration
});

2. Supabase 400 Bad Request Errors

Malformed queries were causing 400 errors, especially in message queries:

/rest/v1/messages?select=id%2Csender_username%2Ccontent%2Ctimestamp%2Cis_read&receiver_username=eq.bepro

Root Cause: Unencoded URL parameters and missing query validation.

Solution: Added URL parameter encoding and query sanitization:

// Before: Direct username usage in filters
filter: `receiver_username=eq.${username}`

// After: Properly encoded parameters
filter: `receiver_username=eq.${encodeUrlParam(username)}`

3. React Error #130 (Minified)

Components were attempting to render undefined or null objects directly in JSX, causing the infamous React minified error #130.

Root Cause: Failed API calls returning undefined data that components tried to render without null checks.

Solution: Added comprehensive null checks and fallback values:

// Before: Direct rendering without checks
const PostHeader = ({ post }) => (
  <div>
    <span>{post.username}</span>
    <span>{formatDate(post.created_at)}</span>
  </div>
);

// After: Safe rendering with null checks
const PostHeader = ({ post }) => {
  if (!post || typeof post !== 'object') {
    return <div>Content unavailable</div>;
  }
  
  return (
    <div>
      <span>{post.username || 'Unknown User'}</span>
      <span>{post.created_at ? formatDate(post.created_at) : 'Unknown time'}</span>
    </div>
  );
};

Key Improvements

Enhanced Error Handling Infrastructure

• safeSupabaseQuery Helper: Wraps all database operations with comprehensive error handling and retry logic
• Environment Variable Validation: Prevents runtime errors from missing configuration
• Graceful Degradation: Components continue to function even when data is unavailable

Real-time Subscription Resilience

• Added error handling for WebSocket connection failures
• Implemented automatic cleanup of failed subscriptions
• Enhanced connection retry mechanisms

Component Protection

• All user-facing components now have null safety checks
• Proper React Hooks ordering to prevent conditional execution errors
• Fallback UI states for failed data loads

Files Modified

• src/app/lib/supabase_client.js - Enhanced client configuration and error handling
• src/app/components/SideBar.jsx - Fixed message count queries
• src/app/message/page.js - Enhanced session and message handling
• src/app/codex/page.js - Fixed roadmap queries with proper fallbacks
• src/app/home/components/RecentNotifications.jsx - Added comprehensive error handling
• src/app/utils/postActions.js - Enhanced all post interaction functions
• src/app/home/explore/hooks/usePostData.js - Fixed data fetching with proper fallbacks
• Multiple UI components with React Error #130 protection

Testing

• ✅ Build passes (npm run build)
• ✅ Linting clean (only pre-existing warnings unrelated to our fixes)
• ✅ All Supabase queries now have proper error handling and fallbacks
• ✅ Components render safely even with malformed/missing data

This PR significantly improves the application's stability and user experience by eliminating the most common crash scenarios and providing graceful error recovery.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
bepro	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 7, 2025 10:47pm