We Keep Coding

Global Error handling for REST calls in Angular Js [duplicate]

This question already has answers here:
AngularJS with global $http error handling
(5 answers)
Closed 5 years ago.
I am looking for generic way for handling all the http errors in angular js.
I do not want to handle errors on each controller to display the error message.
I know we can use generic exception handler and I have used interceptors in my application but currently it is only handling the "Unauthorized" failures and redirecting to login page.
but for other failures I do not want to redirect but just display the error message.
How can I use generic exception handler to display the error message from the server on the UI for each screen?

You can use interceptors to handle this:
app.service('APIInterceptor', ['$rootScope', '$window', '$q', function($window, $q) {
this.responseError = function(response) {
if (response.status === 401 || response.status === 403) {
$window.location.href = '/';
return ̶$̶q̶.̶r̶e̶j̶e̶c̶t̶(̶ response;
} else if (response.status === 500) {
$rootScope.$emit("appError", new Error('An error occurred'));
return;
}
return ̶$̶q̶.̶r̶e̶s̶o̶l̶v̶e̶ $q.reject(response);
};
}]);
app.config(['$routeProvider', '$httpProvider', function($routeProvider, $httpProvider) {
$httpProvider.interceptors.push('APIInterceptor');
// Some code here...
}]);
app.controller('MyController', ['$rootScope', '$scope', '$http', function($rootScope, $scope, $http) {
$scope.errorMessage = '';
$rootScope.$on('appError', function(e, error) {
// Event details
console.log(e);
// Error object from interceptor
console.log(error);
$scope.errorMessage = error.message;
});
}]);
Check AngularJS $http Service API Reference for more information.

How to limit the number of function calls in a controller angular Js?

I have a partial in which data is coming from multiple controllers, not the situation is those functions which are called in the controller,they are hitting the server for more than fifty times, and they keep hitting as long as they dont get the response from server. I dont know how to tackle this situation please guide me.
mainControllers.controller('AddProductController', ['$scope', '$http', '$routeParams', '$cookies', '$rootScope', 'Upload', '$timeout', '$uibModal', '$log', '$document', '$window', 'variantsService', 'toaster', '$route', '$rootScope', 'Lightbox', function ($scope, $http, $routeParams, $cookies, $rootScope, Upload, $timeout, $uibModal, $log, $document, $window, variantsService, toaster, $route, $rootScope, Lightbox) {
/*Currency dynamic*/
$scope.currency = function () {
$http.get('currencies',
{headers:
{'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': $rootScope.keyword_auth_token, 'Accept-Language': $cookies.get('type')}
})
.success(function (data) {
$scope.user_curr = data[0].code;
})
.error(function (data) {
console.log(data);
});
};
/*Currency dynamic ends here*/
$scope.currency();
}]);
Is there any way, any way, so that I can limit this thing?

It definitely is a bad idea to have multiple controllers for a single partial. You should consider using angular factories for maintaining data in such cases. But to provide you a short solution, you should remove the line $scope.currency(); from your controller (because it would make an api call as soon as your controller is initialized) and consider using ng-init built-in directive. So, basically in your partial where you are using ng-controller="AddProductController", you can add ng-init="currency()" (If you want to make an api call).

I always put the calls in a service, and then you can take full control. Something like this:
app.service("currencyService", function($q, $http) {
var _currencyPromise = null,
_currencies = null;
this.getCurrencies = function() {
var deferred = $q.defer();
// Check if the currencies are resolved before
// If so, immediately return these
if (_currencies) {
deferred.resolve(_currencies);
}
// Else check if the promise is already running
// If so, use that promise
else if (_currencyPromise) {
_currencyPromise.then(function(response) {
deferred.resolve(response.data);
});
}
// Else make the http call and assign to the promise
// So that the promise can be used instead of a new http call
else {
_currencyPromise = $http.get("..");
_currencyPromise.then(function(response) {
// Assign data to the currencies, so that it can be used
// by next calls immediately
_currencies = response.data;
deferred.resolve(_currencies);
}, function(error) {
// something went wrong
_currencyPromise = null;
deferred.reject();
});
}
return deferred.promise;
}
});
Then in your controllers you can always use this service, while the http call will only be made once:
app.controller("myCtrl", ["$scope", "currencyService", function($scope, currencyService) {
currencyService.getCurrencies().then(function(currencies) {
$scope.user_curr = currencies[0].code;
});
}]);
See this jsfiddle for reference. In the console you can see that the API is only called once.

I came up with a quite simple solution. For example I have a view like this
<div ng-controller="HomeController">
<div class="active tab-pane" ng-controller="AddProductController" ng-init="subcategories_id();currency();">
<p>{{user_curr}}</p>
</div><!--ends here->
<p>first controller {{abc}}</p>
</div>
I am using the nginitwhich works fine.

Angular "Response is undefined" when attempting to implement a global error handler for a resource

I'm new to angular and attempting to create a global error handler. Any time a resource is called with a 500 http status, I'd like to redirect to a generic error page.
Whenever I implement an injector, I get a "response is undefined" error. What am I doing wrong? I currently have the redirect commented out and still receive the error.
var appServices = angular.module('appServices', ['ngResource']);
appServices.factory('ApplicationService', ['$resource', function ($resource) {
return $resource('http://localhost:23357/api/application/:id', { id: '#id' }, {
update: {
method: 'PUT'
}
});
}]);
appServices.factory('globalErrorInterceptor', ['$location', '$q', '$injector', function ($location, $q, $injector) {
return {
'responseError': function (r) {
console.log('global error test');
/*
commented out for testing
if (r.status == 500) {
$location.path('/error');
}
else
return $q.reject(r);
*/
return $q.reject(r);
}
}
}]);
appServices.config(['$httpProvider', function ($httpProvider) {
$httpProvider.interceptors.push('globalErrorInterceptor')
}]);
Then in my controller I call the resource like so. Currently the web service is setup to always return back a 500.
$scope.applications = ApplicationService.query();

I needed to always return the $q.reject, so the working interceptor looks like:
appServices.factory('globalErrorInterceptor', ['$location', '$q', '$injector', function ($location, $q, $injector) {
return {
'responseError': function (r) {
console.log(r);
if (r.status == 500) {
$location.path('/error');
}
return $q.reject(r);
}
}
}]);

AngularJS: how to execute a method in another controller?

I've searched on Google but can't find information on how to do this properly. Seems like all the answers on Google are now outdated (using older versions of AngularJS).
I'm trying to setup two controllers on my AngularJS module. For example, the first controller is handling $http GET requests. And the second controller is displaying either a 'success' or 'error' message. I want to be able to call a method from the second controller with the success/error message that is to be displayed.
Or am I supposed to use a service/factory for this? I've read about services but can't figure out how to make something like this work.
var module = angular.module('app', []);
module.controller('ApiController', ['$scope', '$http', function ($scope, $http) {
$http.get('/api').
success(function(data){
// call AlertController('success')
}).
error(function(data){
// call AlertController('failed')
});
}]);
module.controller('AlertController', ['$scope', function ($scope) {
$scope.message = {
show_message: true,
type: 'info',
message: "Display message!"
};
}]);
Either doing it that way, or perhaps I would like to push the incoming alert onto a global object variable, and then remove it after it has been displayed.
Anyone know the proper way to set this up?

Ok let's try this - you should also check out Injecting $scope into an angular service function()
The Message service:
module.service('MessageService', function ($timeout) {
var messageQueue = [];
var DISPLAY_TIME = 5000; // each message will be displayed for 5 seconds
function startTimer() {
$timeout(function() {
// Remove the first message in the queue
messageQueue.shift();
// Start timer for next message (if there is one)
if (messageQueue.length > 0) startTimer();
}, DISPLAY_TIME);
}
function add(message) {
messageQueue.push(message);
// If this is the only message in the queue you need to start the timer
if (messageQueue.length==0) startTimer();
}
function get() {
if (messageQueue.length==0) return "";
else return messageQueue[0];
}
return { add: add, get: get };
});
You can still use this ApiService as well:
module.service('ApiService', ['$http', function ($http) {
return {
get: function(url) {
return $http.get(url);
}
};
}]);
Your Search controller:
module.controller('SearchController', ['$scope', 'ApiService', 'MessageService', function ($scope, api, messages) {
api.get('/yelp').
success(function(data){
messages.add('success');
}).
error(function(data){
messages.add('failed');
});
}]);
Your Alert controller:
module.controller('AlertController', ['$scope', 'MessageService', function ($scope, messages) {
$scope.getMessage = function() { messages.get(); }
}]);
So in your html you can have:
<div ng-controller="AlertController">
<div>{{ getMessage() }}</div>
</div>

here is how you make factory
module.factory('appService', ['$window', '$http', '$q', function(win, $http, $q) {
return{
backendcall: function(){
var deferred = $q.defer();
$http.get('/yelp').
success(function(data){
deferred.resolve(data);
}).
error(function(data){
deferred.resolve(status);
});
return deferred.promise;
}
}
}]);
and your controller will be like this
module.controller('AlertController', ['$scope', 'appService', function ($scope, appService) {
appService.backendcall().then(function(response){
$scope.message = {
show_message: true,
type: 'info',
message: "Display message!"
};
})
}]);

Interceptors for managing restricted pages in AngularJS

I just started a few days ago with AngularJS and I'm having issues with my interceptor that intercepts 401 statuses from server responses.
It broadcasts a message of the type "loginRequired" when a 401 is returned and a redirect is triggered on that event.
The issue is that if I try to access a restricted page while not being logged in, I can see the page flash for a moment before I'm redirected to the login page. I'm still fairly a beginner in asynchronous stuff, promises etc. Could somebody point out what I'm doing wrong?
Here's my interceptor. As you can see it's really simple but I slimmed it down to explain my point and I'm trying to understand things before developing it further.
The interceptor
var services = angular.module('services', []);
services.factory('myInterceptor', ['$q', '$rootScope',
function($q,$rootScope) {
var myInterceptor = {
'responseError': function(rejection) {
$rootScope.$broadcast('event:loginRequired');
return $q.reject(rejection);
}
};
return myInterceptor;
}
]);
The injection of my interceptor
myApp.config(['$httpProvider', function($httpProvider) {
$httpProvider.interceptors.push('myInterceptor');
}]);
The route for the restricted page
.when('/restrictedPage', {
templateUrl: 'partials/restrictedPage.html',
controller: 'RestrictedPageController'
}).
The restricted page controller
controllers.controller('RestrictedPageController', function($scope) {
//Some times the alert pops up, sometimes not.
alert("Damn it I shouldn't be there");
});
The $rootScope event watcher
$rootScope.$on('event:loginRequired', function() {
//Only redirect if we aren't on free access page
if ($location.path() == "/freeAccess")
return;
//else go to the login page
$location.path('/home').replace();
});
My issue is clearly with the way I handle the interceptor and $q. I found another way of creating the interceptor on github but it's not the way the official documentation uses, so I think it might be the old way and it's not as clean as putting it in a factory in my opinion. He just puts this code after defining the routes in the config function of his module. But this code works and I don't get the page flash.
Another way I found on Github
var interceptor = ['$rootScope', '$q', '$log',
function(scope, $q, $log) {
function success(response) {
return response;
}
function error(response) {
var status = response.status;
if (status == 401) {
var deferred = $q.defer();
var req = {
config: response.config,
deferred: deferred
};
scope.$broadcast('event:loginRequired');
return deferred.promise;
}
// otherwise
return $q.reject(response);
}
return function(promise) {
return promise.then(success, error);
};
}
];
$httpProvider.responseInterceptors.push(interceptor);
But my goal is not just to "make it work" and I hate the mantra "If it's not broken don't fix it". I want to understand what's the issue with my code. Thanks!

Instead of broadcasting 'event:loginRequired' from your interceptor, try performing the location path change within your interceptor. The broadcast would be increasing the delay between receiving the 401 and changing the location and may be the cause of the screen 'flash'.
services.factory('myInterceptor', ['$q', '$rootScope', '$location',
function($q, $rootScope, $location) {
var myInterceptor = {
'responseError': function(rejection) {
if (response.status === 401 && $location.path() !== '/freeAccess') {
//else go to the login page
$location.path('/home').replace();
}
// otherwise
return $q.reject(response);
}
};
return myInterceptor;
}
]);
You could also perform a HTTP request when your app module first runs to determine right away if the user is authorised:
myApp.config(['$httpProvider', function($httpProvider) {
$httpProvider.interceptors.push('myInterceptor');
}])
.run(function($http) {
//if this returns 401, your interceptor will be triggered
$http.get('some-endpoint-to-determine-auth');
});