How to handle 'Possibly unhandled rejection: backdrop click' in a general way

Question

I have an angular service for handling modals:

angular.module('myApp').service('ModalService', function($uibModal) {
  function open(options) {
    return $uibModal.open(options);
  }
});

Now I upgraded to angular 1.6 and got this error:

Possibly unhandled rejection: backdrop click

whenever I open a modal and click somewhere else (the backdrop) and the modal closes (as intended). So I want to handle this unhandled exception in my ModalService as I do not want to handle this case everytime I use the ModalService. It is always ok to close the modal via backdrop click, this is no exception.

I tried:

angular.module('myApp').service('ModalService', function($uibModal) {
  function open(options) {
    var modalInstance = $uibModal.open(options);
    modalInstance.result.catch(function error(error) {
      if(error === "backdrop click") {
        // do nothing
      } else {
        throw error;
      }
    })
    return modalInstance;
  }
});

But this leads to the problem that I cannot handle other errors than backdrop click as they are always thrown:

ModalService.open({...}).result.catch(function(error) {
  // this will catch the error too, but the throw in the ModalService
  // will occure in parallel and will not be catched by this function
});

And if I try it like this:

angular.module('myApp').service('ModalService', function($uibModal) {
  function open(options) {
    var modalInstance = $uibModal.open(options);
    modalInstance.result.then(function(whatever) {
      return whatever;
    }, function rejection(error) {
      return error;
    });
    return modalInstance;
  });
});

it resolves the 'unhandled rejection' error, but for every case not just for 'backdrop clicked'.

Has anybody a good solution for this case?

Answer 1

Unfortunately that's how they handle it in The official Plucker for Modal (ui.bootstrap.modal).

If you click on any button it logs something like this:

Modal dismissed at: Thu Feb 23 2017 21:54:26 GMT-0300 (Pacific SA Daylight Time)

What they do is:

modalInstance.result.then(function (selectedItem) {
  $ctrl.selected = selectedItem;
}, function () {
  $log.info('Modal dismissed at: ' + new Date());
});

If you remove the error callback, guess what you get:

Possibly unhandled rejection: backdrop click

And even on cancel

Possibly unhandled rejection: cancel

So far, you either do that or use this workaround to silence unhandled rejections

app.config(['$qProvider', function ($qProvider) {
            $qProvider.errorOnUnhandledRejections(false);
        }]);