router: bubble rejected activation promises

It would be nice if there was a way to give the router a handler for activation promise rejections. This would reduce boilerplate error handling code in activate methods.

Code like this:

public activate(...): Q.Promise<any> {
    var deferred = Q.defer();

    doSomething()
        .then(() => deferred.resolve())  // yay
        .fail(reason => {
            deferred.reject(reason);     // cancel activation.
            return Q.reject(reason);     // "rethrow"
        })
        .done();  // terminate the promise.  ensure error bubbles up to the unhandled exception handler  (Q.onerror).

        return deferred.promise;
}

Could be simplified to something like this:

<hook error handler to router>

public activate(...): Q.Promise<any> {
    return doSomething();
}

About this issue

Original URL
State: closed
Created 9 years ago
Comments: 21 (19 by maintainers)

Most upvoted comments

I think @jdanyow had a good point with an idea to add global handler for activation promise rejections.

In my understanding, router navigation error event does not cover all use cases, especially case when we want to navigate to error page on activate route rejection (i.e. not found, unexpected error pages). Navigation to another route in the function that subscribe to router navigation error event is not a good idea I believe - it is not working well with router pipeline when router is in navigating state. From my experience much better solutions is to catch errors in activate method and return rejected promise with RedirectToRoute object to work seamlessly with router activation pipeline. Sample code as below:

  activate(params) {
    return this.sampleService.findData(Number(params.id))
      .then(data => ... )
      .catch(reason => {
        if (reason.status && reason.status === 404) {
          return Promise.reject(new RedirectToRoute('not-found'));
        } 

        return Promise.reject(new RedirectToRoute('unexpected-error'));
      });
  }

Of course, we can put this catch logic in another code component i.e. error handler module and exported function handleRejection:

export default function handleRejection(reason) {
  if (reason.status && reason.status === 404) {
    return Promise.reject(new RedirectToRoute('not-found'));
  } 

   return Promise.reject(new RedirectToRoute('unexpected-error'));
}

But still you have to import this function and provide catch using this function in every screen VM activate method to have your app work properly. I was following this approach, but an improvement would be helpful such as global activation rejection handler within router activation pipeline. So something similar to code below for AppRouter configuration - onActivateRejection :

  configureRouter(routerConfig, router) {

    routerConfig.map(items);
    routerConfig.fallbackRoute(config.page.default);

    routerConfig.onActivateRejection(reason => handleRejection(reason));

    this.router = router;
  }

What do you think about this?

matik12 on Jun 2, 2017