Accessing browser-only APIs like localStorage on the server side.
📋 Demo Instructions
Click the "Trigger Error" button below
Open browser console (F12) to see the error
Wait 5-10 seconds for the error to be captured
Go to Dashboard → Performance Monitoring
Click "Fix with Carla" on the error
Review the generated PR
🌍 Real-World Scenario
Component uses localStorage to persist user preferences or auth tokens, but Next.js tries to render it on the server during SSR where localStorage doesn't exist.
✅ Expected Fix
Add typeof window !== 'undefined' check before accessing browser APIs, or use useEffect to access them only on the client side.
Fix Confidence:HIGH
💻 Buggy Code
// Buggy Code
const userData = localStorage.getItem('userData');
setUser(JSON.parse(userData));
// ReferenceError: localStorage is not defined (during SSR)