Debug Diaries

Real debugging sessions from production. Symptoms, root causes, and actual solutions that worked.

No fluff, no theory — just the messy reality of fixing things that break in production.

⚛️

React Bundling Corruption: The Terser Trap

❌ Cannot read properties of undefined (reading 'ReactCurrentDispatcher')

🔍 Symptoms

▸React errors in production console
▸App working locally but broken on Netlify
▸ReactCurrentBatchConfig undefined errors

🎯 Root Cause

Overly aggressive Terser minification with 3 compression passes was corrupting React's internal structure. Combined with disabled code splitting, React and ReactDOM were being minified together into one bundle.

✅ Solution

Reduced Terser to single pass, removed pure_getters and side_effects flags, enabled proper code splitting with separate vendor chunks for React, ReactDOM, and other libraries.

✅ Clean 200 OK status, no console errors, proper chunk separation (React: 50KB, ReactDOM: 265KB)

ViteReactBundlingProduction Bug

🔐

Google OAuth: The PKCE Puzzle

❌ OAuth flow working locally but failing in production with 400 errors

🔍 Symptoms

▸Login button triggers Google popup
▸User approves consent screen
▸Redirect fails with 400 Bad Request
▸No error logs in Supabase dashboard

🎯 Root Cause

PKCE (Proof Key for Code Exchange) not enabled in Supabase client configuration. OAuth callback URL mismatch between Google Console (used Supabase URL) and actual redirect (app URL).

✅ Solution

Enabled PKCE in supabase client initialization, added proper redirect URLs in both Google Console and Supabase dashboard, implemented proper environment variable validation with runtime checker.

✅ Seamless OAuth flow, secure PKCE implementation, proper credential management

OAuthSupabaseSecurityAuthentication

🖼️

Avatar Upload: The Silent Failure

❌ Upload spinner never stops, no error messages shown to user

🔍 Symptoms

▸File selector works fine
▸Upload progress indicator appears
▸Spinner runs indefinitely
▸No error in UI, but console shows 'Bucket not found'

🎯 Root Cause

Storage bucket 'avatars' never created in Supabase. Migration file existed but SQL was never executed in production database.

✅ Solution

Ran avatar bucket migration manually in Supabase SQL editor. Added file size limit (5MB) and MIME type restrictions. Implemented proper RLS policies for authenticated users.

✅ Uploads complete in <2s, proper error handling, user feedback on success/failure

SupabaseStorageUXError Handling

📱

Mobile Touch Conflicts: Pointer vs Touch

❌ Hamburger menu and background switcher not responding on mobile devices

🔍 Symptoms

▸Desktop navigation works perfectly
▸Mobile taps on UI buttons do nothing
▸Background canvas responds but UI doesn't
▸Touch events seem to be intercepted

🎯 Root Cause

Canvas background animation had global pointer/touch listeners that were capturing ALL touch events before they reached UI elements. Event listeners weren't scoped to canvas element.

✅ Solution

Scoped pointer/touch listeners to canvas bounds only. Added touch-action: none to canvas CSS. Implemented proper event.target checking to ensure canvas-only interaction.

✅ Mobile UI fully responsive, background still interactive, no event conflicts

MobileTouch EventsCanvasUX

Debug Diaries

React Bundling Corruption: The Terser Trap

🔍 Symptoms

🎯 Root Cause

✅ Solution

Google OAuth: The PKCE Puzzle

🔍 Symptoms

🎯 Root Cause

✅ Solution

Avatar Upload: The Silent Failure

🔍 Symptoms

🎯 Root Cause

✅ Solution

Mobile Touch Conflicts: Pointer vs Touch

🔍 Symptoms

🎯 Root Cause

✅ Solution

More debugging stories coming soon