How to display response message from a HttpResponseErrInterceptor to a specific controller

Issue

I have a post request on my createController.js, but my onError promise is not working.

ManageCaseOutlineServices.getInsert({
 table: 'manageCaseOutline'}, self.caseOutlineHeader).then(function (response) {
    self.isLoading = false;
    self.successMessage = "Record Successfully Saved";
    self.openAlertModal('success');
    }, function (error) {
    self.isLoading = false;  
    console.log(error.data); //this line code is not displaying.
});

As I debugged my code I saw that I have a HttpResponseErrInterceptor configured in my maincontroller.js, so I think that’s why onError is not working.

module.factory('HttpResponseErrInterceptor',
    function($q, $location, $timeout, $rootScope, apiConfig, ErrorLogger) {
        return {
            responseError : function(response) {
            var defer = $q.defer();
            switch (response.status) {
                case 403:
                ErrorLogger.logError(response);
                break;
                case 404:
                ErrorLogger.logError(response);
                break;
                case 422:
                console.log(response.data);                 
                break;
                case 504:
                ErrorLogger.logError(response);
                break;
                case 502:
                ErrorLogger.logError(response);
                break;
                case 500:
                ErrorLogger.logError(response);
                break;
            }
            $rootScope.isLoading = false;

            return defer.promise;
                            }
                        };
                    });

    module.config([ '$httpProvider', function($httpProvider) {
        $httpProvider.interceptors.push('BearerAuthInterceptor');
        $httpProvider.interceptors.push('HttpResponseErrInterceptor');
    } ]);

I added an error code 422 in the switch statement above which is my error code from my response. And I tried to add console log and it is logged when I get an error 422 on my other controller.

Now my question is how can I access that error response to a specific controller so that I will be able to display it in my HTML view?

Solution

The error intercepter needs to re-throw the error:

module.factory('HttpResponseErrInterceptor',
    function($q, $location, $timeout, $rootScope, apiConfig, ErrorLogger) {
        return {
            responseError : function(response) {
                ̶v̶a̶r̶ ̶d̶e̶f̶e̶r̶ ̶=̶ ̶$̶q̶.̶d̶e̶f̶e̶r̶(̶)̶;̶
                switch (response.status) {
                    case 403:
                    ErrorLogger.logError(response);
                    break;
                    case 404:
                    ErrorLogger.logError(response);
                    break;
                    case 422:
                    console.log(response.data);                 
                    break;
                    case 504:
                    ErrorLogger.logError(response);
                    break;
                    case 502:
                    ErrorLogger.logError(response);
                    break;
                    case 500:
                    ErrorLogger.logError(response);
                    break;
                }
                $rootScope.isLoading = false;

                ̶r̶e̶t̶u̶r̶n̶ ̶d̶e̶f̶e̶r̶.̶p̶r̶o̶m̶i̶s̶e̶;̶
                return $q.reject(response);
            }
        };
    }
)

Answered By – georgeawg

Answer Checked By – Dawn Plyler (AngularFixing Volunteer)