{"id":1774,"date":"2022-08-30T15:19:20","date_gmt":"2022-08-30T15:19:20","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2013\/12\/02\/angular-default-handler-for-unhandled-http-errors-collection-of-common-programming-errors\/"},"modified":"2022-08-30T15:19:20","modified_gmt":"2022-08-30T15:19:20","slug":"angular-default-handler-for-unhandled-http-errors-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2022\/08\/30\/angular-default-handler-for-unhandled-http-errors-collection-of-common-programming-errors\/","title":{"rendered":"Angular: Default handler for unhandled http errors-Collection of common programming errors"},"content":{"rendered":"

In my angularjs app, I defined a default handler for http errors this way:<\/p>\n

myapp.config([ '$httpProvider', function($httpProvider) {\n    $httpProvider.responseInterceptors.push('errorInterceptor')\n}])\n<\/code><\/pre>\n
where errorInterceptor<\/code> is a service that displays some details about the error in an alert field on the top of the current page.<\/p>\n
Now, when I want to handle a specific error in a different way (say the query is triggered in a modal, and I want to display the alert only in this modal, and not at page level):<\/p>\n
$http.get('\/my\/request').then(success, specificErrorHandling)\n<\/code><\/pre>\n
Angular does the specificErrorHandling<\/code> but still triggers my errorInterceptor<\/code>, so my error gets reported twice. Is there a way to avoid that?<\/p>\n
More generically, is there an Angular way to handle only errors that aren’t already taken care of along the promise<\/code> chain, the same way the top-level error handler of a server app doesn’t have to handle catched exceptions?<\/p>\n
Edit:<\/strong> As requested by Beetroot-Beetroot in comments, here is the code for my interceptor:<\/p>\n
@app.factory 'errorInterceptor', [ '$q', 'alertsHandler',\n  ($q, alertsHandler) ->\n    success = (response) ->\n      response\n\n    failure = (response) ->\n        alertsHandler.raise(response)\n\n    (promise) ->\n      promise.then success, failure\n]\n<\/code><\/pre>\n
    \n
  1. \n
    Assuming that you know which errors needs to be suppressed and which one need to be propagate. Also since the Response interceptor is a function that returns promise itself<\/p>\n
    You can catch the response for failure case and instead of propagating it up the stack you can return something such as empty response.<\/p>\n
    If you look at the sample example in angular documentation for interceptor<\/p>\n
    $provide.factory('myHttpInterceptor', function($q, dependency1, dependency2) {\n    return function(promise) {\n        return promise.then(function(response) {\n            \/\/ do something on success\n        }, function(response) {\n            \/\/ do something on error\n            if (canRecover(response)) {\n                return responseOrNewPromise; \/\/ This can suppress the error.\n            }\n            return $q.reject(response); \/\/ This propogates it.\n        });\n    }\n});\n<\/code><\/pre>\n<\/li>\n<\/ol>\n
    Originally posted 2013-12-02 01:21:13. <\/small><\/p>","protected":false},"excerpt":{"rendered":"
    In my angularjs app, I defined a default handler for http errors this way: myapp.config([ ‘$httpProvider’, function($httpProvider) { $httpProvider.responseInterceptors.push(‘errorInterceptor’) }]) where errorInterceptor is a service that displays some details about the error in an alert field on the top of the current page. Now, when I want to handle a specific error in a different […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1774","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1774","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=1774"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1774\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=1774"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=1774"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=1774"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}