{"id":998,"date":"2023-05-26T05:00:00","date_gmt":"2023-05-26T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=998"},"modified":"2023-05-19T21:00:22","modified_gmt":"2023-05-20T04:00:22","slug":"error-handling-in-rxjs","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/error-handling-in-rxjs\/","title":{"rendered":"Error Handling in RxJs"},"content":{"rendered":"\n<p>A few days ago, we saw that we could be notified of any error when subscribing using a <a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/rxjs-subscribe-callback-functions\/\" target=\"_blank\" rel=\"noopener\" title=\"\">specific callback function<\/a> or that we could receive the same information using the <code>tap<\/code> operator.<\/p>\n\n\n\n<p>There is another option available using a specialized operator called <code><a href=\"https:\/\/rxjs.dev\/api\/index\/function\/catchError\" target=\"_blank\" rel=\"noopener\" title=\"\">catchError<\/a><\/code> and illustrated below under its deprecated name <code>catch<\/code>:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"571\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/05\/image-31-1024x571.png\" alt=\"\" class=\"wp-image-1001\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/05\/image-31-1024x571.png 1024w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/05\/image-31-300x167.png 300w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/05\/image-31-768x428.png 768w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/05\/image-31-1536x856.png 1536w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/05\/image-31.png 1590w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>How does <code>catchError<\/code> help? As we can see in the marble diagram, it can return a different Observable when an error happens. This means that the subscriber would have no idea that something wrong happened as we are able to switch to a backup solution (perhaps some cached data or a different API endpoint).<\/p>\n\n\n\n<p>This is especially important when you know that if an Observable throws an error, it will <strong>never emit another value<\/strong> in the future. This makes <code>catchError<\/code> an excellent option to recover or at least attempt to recover from an error in the browser. We will cover other options (such as operators that retry an Observable) in the subsequent editions of the newsletter.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A few days ago, we saw that we could be notified of any error when subscribing using a specific callback function or that we could receive the same information using the tap operator. There is another option available using a specialized operator called catchError and illustrated below under its deprecated name catch: How does catchError [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,10],"tags":[],"class_list":["post-998","post","type-post","status-publish","format-standard","hentry","category-operators","category-rxjs"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/998","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=998"}],"version-history":[{"count":3,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/998\/revisions"}],"predecessor-version":[{"id":1003,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/998\/revisions\/1003"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=998"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=998"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=998"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}