← Back to Demo Hub
Test #6API & Data Fetching

API Response Structure Change

Backend changed the response format without frontend being updated.

📋 Demo Instructions

  1. Click the "Trigger Error" button below
  2. Open browser console (F12) to see the error
  3. Wait 5-10 seconds for the error to be captured
  4. Go to Dashboard → Performance Monitoring
  5. Click "Fix with Carla" on the error
  6. Review the generated PR
🌍 Real-World Scenario
Backend team updated the API to v2 format, but frontend still expects v1 structure. Common during API migrations or when backend updates aren't communicated.
✅ Expected Fix
Add optional chaining for all nested property access. Consider adding fallback values and response validation.
Fix Confidence:HIGH

💻 Buggy Code

// Buggy Code (expecting old API structure)
const response = await fetch('/api/user');
const data = await response.json();
console.log(data.data.user.profile.name);
// TypeError: Cannot read properties of undefined (reading 'user')

// Backend changed response from:
// { data: { user: { profile: { name: 'John' } } } }
// To:
// { result: { userInfo: { displayName: 'John' } } }

🔴 Error Log

Waiting for error to be triggered...