{"id":125,"date":"2015-08-18T23:32:51","date_gmt":"2015-08-18T21:32:51","guid":{"rendered":"http:\/\/www.hacksrus.net\/blog\/?p=125"},"modified":"2015-08-19T08:57:18","modified_gmt":"2015-08-19T06:57:18","slug":"a-solution-to-swallowed-exceptions-in-es6s-promises","status":"publish","type":"post","link":"https:\/\/www.hacksrus.net\/blog\/2015\/08\/a-solution-to-swallowed-exceptions-in-es6s-promises\/","title":{"rendered":"A Solution To Swallowed Exceptions In ES6’s Promises"},"content":{"rendered":"

You have probably heard about ES6’s built-in Promises<\/a> and how they can provide a way out of JavaScript’s callback hell<\/a>.<\/p>\n

While the intend and purpose for Promises is clear very quickly, getting used to them is not as straightforward and the devil lies in the detail.<\/p>\n

One thing that bit us quite late during a recent refactoring and has caused a lot of frustration was the fact that Promises “swallow” exceptions by default<\/strong>.<\/p>\n

This does include exceptions such as ReferenceError\u00a0<\/em>so that the following code runs perfectly fine, without ever letting you know that something went wrong:<\/p>\n

var myPromise = Promise.resolve();\r\n\r\nmyPromise\r\n  .then(function() {\r\n    console.log(\"Step 1\");\r\n  })\r\n  .then(function() {\r\n    console.log(\"Step 2\", thisNameDoesNotExist);\r\n  });\r\n<\/pre>\n
What happens here is that the implementation of Promise wraps our function (the onFulfillment<\/em> handler as it is called in the language specification) in a try-catch block. Instead of throwing the error<\/strong> and causing our interpreter to crash (but print a convenient error message at least), it catches it and marks the promise p<\/em> as rejected<\/strong>.<\/p>\n
Those of you who have worked with Promises before will say that you need an onRejection<\/em> handler function of course, and you are perfectly right:<\/p>\n
var myPromise = Promise.resolve();\r\n\r\nmyPromise\r\n  .then(function() {\r\n    console.log(\"Step 1\");\r\n  })\r\n  .then(function() {\r\n    console.log(\"Step 2\", thisNameDoesNotExist);\r\n  }, function(e) {\r\n    console.log(\"Promise rejected, error:\", e);\r\n  });\r\n<\/pre>\n
However, this still doesn’t work. What is wrong here? In order to catch errors in the last<\/strong> actual onFulfillment<\/em> handler in our chain, we need to add another step<\/strong> where nothing but the error catching happens. We could use another .then()<\/em> with an empty function as its first argument, but a more elegant way is to use .catch()<\/em> which takes only the onRejection<\/em> handler for its arguments:<\/p>\n
var myPromise = Promise.resolve();\r\n\r\nmyPromise\r\n  .then(function() {\r\n    console.log(\"Step 1\");\r\n  })\r\n  .then(function() {\r\n    console.log(\"Step 2\", thisNameDoesNotExist);\r\n  })\r\n  .catch(function(e) {\r\n    console.log(\"Promise rejected, error:\", e);\r\n  });\r\n<\/pre>\n
Much better, that will do. In theory. In reality though, it is very easy to forget to specify the .catch() handler at the end, have it in the wrong place etc.
\nBelieve me, that will happen, no matter how careful you are. And if it’s not you who forgets it, it will be some guy on your team.<\/p>\n
For that reason, Bluebird<\/a>, one of the most popular Promise\u00a0libraries, has a “default” onRejection handler<\/strong> which will print all errors from rejected Promises\u00a0to stderr<\/strong>. This is a huge improvement and while it can still result in unexpected behaviour because it doesn’t interrupt execution, it at least gives a hint where things are dodgy.<\/p>\n
While that is all well and good, we didn’t feel like using a library, now that we finally got native support for Promises from io.js. And as it turns out, you don’t have to. Because just as there is\u00a0process.on(‘unhandledException’, ..)<\/em>, since its 1.4.1 release, io.js also has\u00a0the unhandledRejection<\/a><\/em><\/strong> event, which is very similar to Bluebird’s default handler, except that you have to specify it yourself<\/strong>:<\/p>\n
var myPromise = Promise.resolve();\r\n\r\nprocess.on('unhandledRejection', function(error, promise) {\r\n  console.error(\"UNHANDLED REJECTION\", error.stack);\r\n});\r\n\r\nmyPromise\r\n  .then(function() {\r\n    console.log(\"Step 1\");\r\n  })\r\n  .then(function() {\r\n    console.log(\"Step 2\", thisNameDoesNotExist);\r\n  });\r\n<\/pre>\n
Do this once in your project and you will never have Promises swallow your exceptions again. Happy debugging!<\/p>\n","protected":false},"excerpt":{"rendered":"
You have probably heard about ES6’s built-in Promises and how they can provide a way out of JavaScript’s callback hell. While the intend and purpose for Promises is clear very quickly, getting used to them is not as straightforward and the devil lies in the detail. One thing that bit us quite late during a […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-125","post","type-post","status-publish","format-standard","hentry","category-programming"],"_links":{"self":[{"href":"https:\/\/www.hacksrus.net\/blog\/wp-json\/wp\/v2\/posts\/125","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hacksrus.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hacksrus.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hacksrus.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hacksrus.net\/blog\/wp-json\/wp\/v2\/comments?post=125"}],"version-history":[{"count":10,"href":"https:\/\/www.hacksrus.net\/blog\/wp-json\/wp\/v2\/posts\/125\/revisions"}],"predecessor-version":[{"id":135,"href":"https:\/\/www.hacksrus.net\/blog\/wp-json\/wp\/v2\/posts\/125\/revisions\/135"}],"wp:attachment":[{"href":"https:\/\/www.hacksrus.net\/blog\/wp-json\/wp\/v2\/media?parent=125"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hacksrus.net\/blog\/wp-json\/wp\/v2\/categories?post=125"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hacksrus.net\/blog\/wp-json\/wp\/v2\/tags?post=125"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}