Handle Errors in Promise.all and log failed Promises in Javascript

Handle Errors in Promise.all and log failed Promises in Javascript

Heya everyone, I have personally wasted lot of time finding the failed Promise in Promise.all on my office work, which caused a severe issue as the execution stops when a Promise inside Promise.all fails.

Prerequisites: I am going to assume you at least know what Promise & Promise.all is and have written JavaScript before. If you don't know either of these, you can learn it over here

Let's get our hands dirty..!

Initial Code (Without Failure handling):

By default, Promise.all is rejected if any of the Promises are rejected. that's why in the below snippet, we are getting error log instead of results.

let promise1 = new Promise((resolve, reject) => {
  setTimeout(() => resolve({success:"promise1 resolved"}), 1000);
});
let promise2 = new Promise((resolve, reject) => {
  reject(new Error("error message"));
});
let promise3 = new Promise((resolve, reject) => {
  setTimeout(() => resolve({success:"promise3 resolved"}), 1000);
});

Promise.all([promise1, promise2, promise3]).then(
  (results) => {
    console.log(results);
  },
  (error) => console.error(error)
);
O/P: Error: "error message"

Updated Code (Handled Failures):

In the below code snippet, I have defined a promise handler function to handle the failure and return a modified payload with which we could be able to filter and process success records and log the failure records.

let promise1 = new Promise((resolve, reject) => {
  setTimeout(() => resolve({ success: "promise1 resolved" }), 1000);
});
let promise2 = new Promise((resolve, reject) => {
  reject(new Error("error message"));
});
let promise3 = new Promise((resolve, reject) => {
  setTimeout(() => resolve({ success: "promise3 resolved" }), 1000);
});

const promiseHandler = (promise, index) => {
  return promise.then(
    (data) => ({ data, status: "resolved" }),
    (error) => ({ error, status: "rejected", index })
  );
};

Promise.all([promise1, promise2, promise3].map(promiseHandler)).then(
  (results) => {
    // let resolved = results.filter((result) => result.status === "resolved");
    let rejected = results.filter((result) => result.status === "rejected");
    console.log(rejected);
  },
  (error) => console.error(error)
);
O/P: {error:
          Error: error message
          status: "rejected"
          index: 1
       }

Now we can easily identify the failed promise by Index.

Hope this is helpful. Let me know your thoughts on the comments :)