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

Unhandled Promise Rejection

Making a fetch request without any error handling - a very common oversight.

📋 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
Network request fails due to connectivity issues, server downtime, or CORS errors. Without error handling, users see a broken page with no feedback.
✅ Expected Fix
Add .catch() handler to promise chains or wrap async/await calls in try-catch blocks. Display user-friendly error messages.
Fix Confidence:MEDIUM

💻 Buggy Code

// Buggy Code
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data));
// Unhandled Promise Rejection when network fails

🔴 Error Log

Waiting for error to be triggered...