AngularJS error handling when resolving stuff inside the router?

Question

I've been doing lots of research on how to deal with errors best. Let's assume I have this AngularjS code:

$routeProvider

    .when('/videomail/:key', {
        templateUrl : 'view.html',
        controller  : 'ViewCtrl',
        title       : 'View',
        hideHeader  : true,
        hideFooter  : true,
        resolve: {
            videomail: function($rootScope, $route, Videomail) {
                return Videomail.get({key: $route.current.params.key}).$promise.then(function(videomail) {
                    return videomail
                }, function(err) {
                    // How can I present the error here?
                    // Should I return it like 'return err' and let the controller deal with it?
                    // Or can I forward this to another controller?
                    // PS: It can be a 404 or a 401 error 
                })
            }
        }
    })

Check out my questions in the code comments. What can I try next?

you want to do it in general for all aplication error handling or only for this route ? — Narek Mamikonyan
– Narek Mamikonyan, Commented Aug 21, 2014 at 8:36

Hugo Wood · Accepted Answer · 2014-08-21 10:00:07Z

Since you don't want the route to change, and you don't want to handle the error in the controller, you can do this:

Resolve the promise with something that is unambiguously an error. You have to resolve the promise because if you don't, the route will not be loaded at all, and you can't change that in $routeChangeError.

videomail: function($rootScope, $route, Videomail) {
    return Videomail.get({key: $route.current.params.key}).$promise.then(function(videomail) {
        return videomail
    }, function(err) {
        return { resolveError: err }
    })
}

Somewhere in the app (maybe in run), intercept $routeChangeSuccess and check if an error occured.

$rootScope.$on('$routeChangeSuccess', 
    function (event, current, previous) {
        if (current.locals.videomail && current.locals.videomail.resolveError) {
            current.locals.$template = $templateCache.get('error.html')
            $rootScope.error = current.locals.videomail.resolveError
        }
    }
)

Now you just have to write a template named error.html that will display something depending on the error object present in the scope.

DEMO

It works but I think it is kind of a hack. I don't believe Angular was meant to be used that way.

Hugo Wood · Accepted Answer · 2014-08-21 08:33:23Z

3

You can use the $location service to redirect to another route.

return Videomail.get({key: $route.current.params.key}).$promise.then(function(videomail) {
    return videomail
}, function(err) {
    $location.path('/error')
})

answered Aug 21, 2014 at 8:33

Hugo Wood

2,29017 silver badges19 bronze badges

7 Comments

Michael Heuberger Over a year ago

Thanks, good idea. But how can I pass on the err object to the new error page? Or should I be using the $routeChangeError event instead?

Hugo Wood Over a year ago

You pass the error members in the URL with $location.search. $routeChangeError is another possibility if you want to handle errors application-wide.

Michael Heuberger Over a year ago

I just played and $location.path() is not what I want. Because it's a redirect, the URL changes. But I want the URL to stay.

Michael Heuberger Over a year ago

So I assume $routeChangeError is the solution for me but I haven't figured out how I can set a template inside the $routeChangeError event handler?

Hugo Wood Over a year ago

As far as I know, you cannot do that. If a promise is rejected, the controller and the view for the route are not loaded at all. The only thing you can do is redirect.

|

Collectives™ on Stack Overflow

AngularJS error handling when resolving stuff inside the router?

2 Answers 2

Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related