Unhandled promise rejection in $http

1. Understanding the Error

An unhandled promise rejection occurs when a JavaScript Promise (such as an $http request) fails but is not properly caught using .catch() or try...catch. This can lead to application crashes and undefined behavior.

Example of an Unhandled Promise Rejection

$http.get('https://api.example.com/data')
    .then(response => console.log(response.data))
    // Missing .catch() here will cause an unhandled rejection if the request fails

If the API request fails (e.g., due to a 404 Not Found, CORS issue, or network failure), the error is unhandled, leading to:

Unhandled Promise Rejection: TypeError: Failed to fetch

---

2. How to Fix Unhandled Promise Rejection in $http?

Fix 1: Add .catch() to Handle Errors

Always attach a .catch() method to handle errors properly.

$http.get('https://api.example.com/data')
    .then(response => console.log(response.data))
    .catch(error => console.error('Error:', error));

• If the request succeeds, .then() handles the response.
• If it fails, .catch() prevents an unhandled promise rejection.

---

Fix 2: Use try...catch with async/await

For better error handling, wrap the $http request inside an async function with try...catch.

async function fetchData() {
    try {
        const response = await $http.get('https://api.example.com/data');
        console.log(response.data);
    } catch (error) {
        console.error('API request failed:', error);
    }
}

fetchData();

• If the request fails, catch will properly handle the error.

---

Fix 3: Add a Global Error Handler

To catch all unhandled promise rejections, use:

window.addEventListener("unhandledrejection", function(event) {
    console.error("Unhandled Promise Rejection:", event.reason);
});

This prevents application crashes by logging unhandled promise errors.

---

Fix 4: Handle Different Error Scenarios

APIs can fail due to network issues, authentication errors, or server failures.
Handle these cases in .catch():

$http.get('https://api.example.com/data')
    .then(response => console.log(response.data))
    .catch(error => {
        if (error.status === 404) {
            console.error("Error 404: Not Found");
        } else if (error.status === 500) {
            console.error("Error 500: Server Issue");
        } else {
            console.error("Network error or CORS issue:", error);
        }
    });

---

Fix 5: Use $q.reject() in AngularJS

If using AngularJS, return $q.reject(error) in services to handle rejections properly.

app.service('ApiService', function($http, $q) {
    this.getData = function() {
        return $http.get('https://api.example.com/data')
            .then(response => response.data)
            .catch(error => {
                console.error("API request failed:", error);
                return $q.reject(error); // Ensures proper error handling
            });
    };
});

---

3. Debugging Unhandled Promise Rejections

Steps to Identify & Fix the Issue

1. Check Console Errors (F12 → Console Tab)
   • Look for Unhandled Promise Rejection messages.
   • Example: Unhandled Promise Rejection: TypeError: Cannot read properties of undefined
2. Check Network Requests (F12 → Network Tab)
   • See if API requests are failing (e.g., 404 Not Found, 500 Server Error).
3. Use console.log(error) Inside .catch()
   • Add console.log(error) inside .catch() to inspect error details.
4. Check API Server Logs
   • If errors persist, check backend logs for issues like authentication failures.

---

4. Summary & Best Practices

Issue	Solution
Promise rejection due to API failure	Use .catch() to handle errors
Missing error handling in async/await	Wrap in try...catch
Errors crashing the app	Add window.addEventListener("unhandledrejection", callback)
Different error responses (404, 500, etc.)	Handle errors based on error.status