Promise error handling

Summary: in this tutorial, you will learn how to deal with error handling in promises.

Suppose that you have a function called getUserById() that returns a Promise:

function getUserById(id) {
    return new Promise((resolve, reject) => {
        resolve({
            id: id,
            username: 'admin'
        });
    });
}
Code language: JavaScript (javascript)

Normal error

First, change the getUserById() function to throw an error outside the promise:

function getUserById(id) {
    if (typeof id !== 'number' || id <= 0) {
        throw new Error('Invalid id argument');
    }

    return new Promise((resolve, reject) => {
        resolve({
            id: id,
            username: 'admin'
        });
    });
}
Code language: JavaScript (javascript)

Second, handle the promise by using both then() and catch() methods:

getUserById('a')
    .then(user => console.log(user.username))
    .catch(err => console.log(err));
Code language: JavaScript (javascript)

The code throws an error:

Uncaught Error: Invalid id argument
Code language: JavaScript (javascript)

When you raise an exception outside the promise, you must catch it with try/catch:

try {
    getUserById('a')
        .then(user => console.log(user.username))
        .catch(err => console.log(`Caught by .catch ${error}`));
} catch (error) {
    console.log(`Caught by try/catch ${error}`);
}
Code language: JavaScript (javascript)

Output:

Caught by try/catch Error: Invalid id argument
Code language: JavaScript (javascript)

Errors inside the Promises

We change the getUserById() function to throw an error inside the promise:

let authorized = false;

function getUserById(id) {
    return new Promise((resolve, reject) => {
        if (!authorized) {
            throw new Error('Unauthorized access to the user data');
        }

        resolve({
            id: id,
            username: 'admin'
        });
    });
}
Code language: JavaScript (javascript)

And consume the promise:

try {
    getUserById(10)
        .then(user => console.log(user.username))
        .catch(err => console.log(`Caught by .catch ${error}`));
} catch (error) {
    console.log(`Caught by try/catch ${error}`);
}
Code language: JavaScript (javascript)

Output:

Caught by .catch Error: Unauthorized access to the user data
Code language: JavaScript (javascript)

If you throw an error inside the promise, the catch() method will catch it, not the try/catch.

If you chain promises, the catch() method will catch errors that occurred in any promise. For example:

promise1
    .then(promise2)
    .then(promise3)
    .then(promise4)
    .catch(err => console.log(err));
Code language: JavaScript (javascript)

In this example, if any error in the promise1, promise2, or promise4, the catch() method will handle it.

Calling reject() function

Throwing an error has the same effect as calling the reject() as illustrated in the following example:

let authorized = false;

function getUserById(id) {
    return new Promise((resolve, reject) => {
        if (!authorized) {
            reject('Unauthorized access to the user data');
        }

        resolve({
            id: id,
            username: 'admin'
        });
    });
}

try {
    getUserById(10)
        .then(user => console.log(user.username))
        .catch(err => console.log(`Caught by .catch ${err}`));
} catch (error) {
    console.log(`Caught by try/catch ${error}`);
}
Code language: JavaScript (javascript)

In this example, instead of throwing an error inside the promise, we called the reject() explicitly. The catch() method also handles the error in this case.

Missing the catch() method

The following example does not provide the catch() method to handle the error inside the promise. It will cause a runtime error and terminate the program:

function getUserById(id) {
    return new Promise((resolve, reject) => {
        if (!authorized) {
            reject('Unauthorized access to the user data');
        }
        resolve({
            id: id,
            username: 'admin'
        });
    });
}

try {
    getUserById(10)
        .then(user => console.log(user.username));
    // the following code will not execute
    console.log('next');

} catch (error) {
    console.log(`Caught by try/catch ${error}`);
}



  


                       
  



Code language: JavaScript (javascript)

Output:

Uncaught (in promise) Unauthorized access to the user data

If the promise is resolved, you can omit the catch() method. In the future, a potential error may cause the program to stop unexpectedly.

Summary

• Inside the promise, the catch() method will catch the error caused by the throw statement and reject().
• If an error occurs and you don’t have the catch() method, the JavaScript engine issues a runtime error and stops the program.

Error handling in JavaScript can be easy while being tricky at certain places, especially Promises. JS allows error handling with the help of try, catch, and throw.

const main = () => {
  try {
    // Do something super crazy
    if (!bakePizza()) {
      throw new Error('Oh no!');
    }
  } catch (error) {
    // That escalated quickly
    handleOvenExplosion();
  }
}

This seems simple enough but gets a little tricky when Promises are involved.

Let’s look at a simple example of a Promise. The following Promise function fetches a list of user profiles from the database, where the result set is resolved by the promise function and the error is rejected.

const userProfileQuery = new Promise((resolve, reject) => {
  connection.query('SELECT * FROM Users', [], (err, result) => {
    if (err) reject({ type: 'SQL', err});
    connection.release();
    resolve(result);
});
userProfileQuery
  .then((data) => {
    const userList = data;
    // Do something crazy with the list
  })
  .catch((err) => {
    // Oh, snap!
    // Handle error
  });

In an ideal world, we’d want to have a single try-catch block to handle all errors that occur in that single file.

const { getUserProfiles } = require('./helpers');
module.exports = () => {
  try {
    let userProfileList;
    getUserProfiles
      .then((data) => {
        userProfileList = data;
      })
      .catch((error) => {
        // Handle Promise Error
        // All errors thrown in this promise land here
      });
  } catch (error) {
    // Handle errors in this module
  }
}

The above module is simple — It fetches a list of user profiles with the help of a Promise function.

But the problem with the above module is that when we throw a new Error inside the then block of the promise, it will always pass to the catch block of the promise. That is because throwing a new error inside a then block of a promise will always be passed to the catch block of the invoking promise function. This does not allow us to handle all errors in a module with a singular try-catch block.

But, alas! There is a way to handle this with the help of Async/Await. Let me explain this better with an example —

const { getUserProfiles } = require('./helpers');
module.exports = async () => {
  try {
    const userProfileList = await getUserProfiles;
  } catch (error) {
    // Handle errors in this module
    switch (type) {
      case ERROR_SQL:
        // Handle SQL errors
      default:
        // Handle common errors
    }
  }
}

This little addition of async/await in your code does two things —
Assign the value to the variable which was resolved by the promise function.

Throw error if the promise function rejects anything.
Note that the value assignment works only when a promise functions resolves some value and errors get thrown only when the promise function rejects something.

This way, async/await lets us keep our code clean, maintainable, and easy to read.

Thanks for reading. If you have thoughts on this, be sure to leave a comment.

Back to: JavaScript Tutorial For Beginners and Professionals

JavaScript Promise Error Handling with Examples

In this article, I am going to discuss JavaScript Promise Error Handling with Examples. Please read our previous article where we discussed JavaScript Promise.race() vs Promise.all() in detail. 

JavaScript Promise Error Handling

Promise chains are good at error handling. When a promise rejects, the control jumps to the closest rejection function. Errors thrown from promises are handled by the second parameter (reject) passed to then() or by the handler passed to catch()

.then(null, error => { /* handle error here */ });
// or
foo().catch(error => { /* handle error here */ });

Synchronously throwing an error from function that should return a promise

Imagine a function below like this:

<html>
<head>
    <title>JavaScript Promise error Handling example</title>
</head>
<body>
    <script>
        function foo(arg) {
            if (typeof arg != 'number' || arg <= 0) {
                throw new Error('Invalid arg argument')
            }
            return new Promise((resolve, reject) =>
                setTimeout(() =>
                    resolve(arg + ' ' + 'completed'), 1000)
            )
        }

        foo('fdfd')
            .then(result => console.log(result))
            .catch(err => console.log(err)) // <-- Error: Invalid argument will be caught here
    </script>
</body>
</html>

Output:

In the above example foo() function throw an error outside the promise, which gets handled by using both then() and catch() methods.

Raise an exception outside the promise

When we raise an exception outside the promise, we must catch it with try/catch.

<html>
<head>
    <title>JavaScript Promise error handling with try catch example</title>
</head>
<body>
    <script>
        function foo(arg) {
            if (typeof arg != 'number' || arg <= 0) {
                throw new Error('Invalid arg argument')
            }
            return new Promise((resolve, reject) =>
                setTimeout(() =>
                    resolve(arg + ' ' + 'completed'), 1000)
            )
        }

        try {
            foo('alphnumberic')
                .then(result => console.log(result))
                .catch(err => console.log(`Caught by .catch ${error}`));
        } catch (error) {
            console.log(`Caught by try/catch ${error}`);
        }
    </script>
</body>
</html>

Output:

Throw an error inside the Promises

Inside the promise, the catch() method will catch the error caused by the throw statement and reject(). We have modified the existing function so as to throw an error inside the promises and then consume the promise.

<html>
<head>
    <title>JavaScript throw an error inside the Promises example</title>
</head>
<body>
    <script>
        let isValid = false;
        function foo(arg) {
            return new Promise((resolve, reject) => {
                if (!isValid) {
                    throw new Error('Invalid argument is passed to function')
                }
                setTimeout(() =>
                    resolve(arg + ' ' + 'completed'), 1000)
            })
        }

        try {
            foo('alphnumberic')
                .then(result => console.log(result))
                .catch(error => console.log(`Caught by .catch ${error}`));
        } catch (error) {
            console.log(`Caught by try/catch ${error}`);
        }
    </script>
</body>
</html>

Output:

If we throw an error inside the promises the catch() method will catch the error, not by the try/catch.

Calling reject() method of Promise inside the promise

reject() method returns a promise that is rejected. It is highly used for debugging purposes and error catching. We have modified the existing function so as to throw an error by calling reject() method. As throwing an error has the same impact as calling the reject() method that has elaborated in the below example:

<html>
<head>
    <title>JavaScript throw an error by calling reject() method example</title>
</head>
<body>
    <script>
        let isValid = false;
        function foo(arg) {
            return new Promise((resolve, reject) => {
                if (!isValid) {
                    reject('Invalid argument is passed to function')
                }
                setTimeout(() =>
                    resolve(arg + ' ' + 'completed'), 1000)
            })
        }

        try {
            foo('alphnumberic')
                .then(result => console.log(result))
                .catch(error => console.log(`Caught by .catch ${error}`));
        } catch (error) {
            console.log(`Caught by try/catch ${error}`);
        }
    </script>
</body>
</html>

Output:

In the above example rather than throwing an error inside the promise, we have called the reject() method of promise explicitly. In this case catch() method also handles the error as it handles in throwing an error inside the promises.

Unhandled rejected by missing the catch() method

An error will be silently ignored if a promise doesn’t have a catch() block or reject() handler. If any error occurs and we don’t have the catch() method, the JavaScript engine issues a runtime error and stops the execution of the program.

<html>
<head>
    <title>JavaScript missing the catch()method example</title>
</head>
<body>
    <script>
        let isValid = false;
        function foo(arg) {
            return new Promise((resolve, reject) => {
                if (!isValid) {
                    reject('Invalid argument is passed to function')
                }
                setTimeout(() =>
                    resolve(arg + ' ' + 'completed'), 1000)
            })
        }

        try {
            foo('alphnumberic')
                .then(result => console.log(result))//this will not execute
                //.catch(error => console.log(`Caught by .catch ${error}`));
        } catch (error) {
            console.log(`Caught by try/catch ${error}`);
        }
    </script>
</body>
</html>

Output:

Chaining a Promise

If we have a promise chain then an error occurred in any promises, the catch() method will catch it.

<html>
<head>
    <title>JavaScript error handing chaining a promise example</title>
</head>
<body>
    <script>
        function foo(arg) {
            return new Promise((resolve, reject) => {
                if (typeof arg === 'undefined') {
                    throw new Error('Invalid argument is passed to function')
                }
                setTimeout(() =>
                    resolve(arg + ' ' + 'completed'), 1000)
            })
        }

        foo('dsds') //promise1
            .then(result => foo())  //promise2
            .then(result => foo('dsds')) //promise3
            .then(result => foo('dsds')) //promise4
            .catch(error => console.log(`Caught by .catch ${error}`));
    </script>
</body>
</html>

Output:

In the above example if any error occurred in Promise1, promise2, promise3, or promise4 then it will catch by catch() method.

In the next article, I am going to discuss JavaScript Async Await with Examples. Here, in this article, I try to explain the JavaScript Promise Error Handling with Examples. I hope this JavaScript Promise Error Handling with Examples article will help you with your need. I would like to have your feedback. Please post your feedback, question, or comments about this JavaScript Promise Error Handling.