Possibly unhandled rejection: cancel error when closing modal

[eassa]

after upgrading to angularjs 1.6.3 every time i close modal using : "$uibModalInstance.dismiss('cancel');" i get console error :

Possibly unhandled rejection: cancel

the same when i close the modal clicking outside of it , it tells me

Possibly unhandled rejection: backdrop click

[branimir93]

+1

[mdarveau]

The problem is that, as the doc says: result (Type: promise) - Is resolved when a modal is closed and rejected when a modal is dismissed. I think dialog dismiss should not be handled with promise rejection as this is not an error.

[xts-velkumars]

I'm also facing the similar issue like eassa, is there any solution for this?

[jasonvoirin]

+1

[mdarveau]

The way I handle it is:

$uibModal.open({
 ...
}).result.catch(function(res) {
  if (!(res === 'cancel' || res === 'escape key press')) {
    throw res;
  }
});

This basically swallow the cancelled or escape key rejection.

[jasonvoirin]

Here was my solution.... uibModalInstance.result.catch(function () { uibModalInstance.close(); })

[roger2hk]

Make sure you have the second function argument (cancel one) to avoid the warning message.

modalInstance.result.then(function() {
  // Success	
}, function() {
  // Cancel
});

[greatsayan]

For me I solved it using: this.$uibModalInstance.close(false); instead of this.$uibModalInstance.dismiss("cancel");

[raxityo]

@greatsayan I believe you'd still get unhandled rejection upon clicking outside the modal to dismiss.

[greatsayan]

@raxityo No because I disabled this feature! the user cannot close the modal by clicking outside of it

[JavyMB]

@greatsayan thanks!

[AnalyzePlatypus]

Getting bitten by this on AngularJS 1.6.4 with UI-Bootstrap 2.5.0 I use @jasonvoirin's solution.

[AlexKichkailo]

as a quick fix the following worked for me:

angular
    .module('app')
    .config(['$provide', function ($provide) {
        $provide.decorator("$exceptionHandler", ['$delegate', '$injector', function ($delegate, $injector) {
            return function (exception, cause) {
                var exceptionsToIgnore = ['Possibly unhandled rejection: backdrop click', 'Possibly unhandled rejection: cancel', 'Possibly unhandled rejection: escape key press']
                if (exceptionsToIgnore.indexOf(exception) >= 0) {
                    return;
                }
                $delegate(exception, cause);                    
            };
        }]);
    }]);

[JewelsJLF]

This works well:

$uibModal.open({
    ...
}).result.catch(function (resp) {
    if (['cancel', 'backdrop click', 'escape key press'].indexOf(resp) === -1) throw resp;
});

[ArtemBahmat]

The answers above work only for single rejection. But what is if there are several hundreds ones in the project? The simple answer is to set errorOnUnhandledRejections to false in config (by default it's true), such as: qProvider.errorOnUnhandledRejections(false); URL: https://docs.angularjs.org/api/ng/provider/$qProvider

[AlexKichkailo]

@ArtemBahmat, I would not recommend setting errorOnUnhandledRejections to false. You will end up setting it to true again because of swallowed errors in promises. Unless you're sure that all rejections in your application are properly handled.

A better way is to implement a global $exceptionHandler where you can decide whether you want to log exception and raise an error or skip the rejection.

[adityaadhikari15]

@JewelsJLF Thanks . It works Well 👍

[omostan]

With AngularJs v1.6.6, I just use:

$uibModalInstance.close();

This worked for me.

[ZackKnopp]

For a background on what causes these errors, why you want to avoid setting errorOnUnhandledRejections to false and how to properly handle them see this link: http://www.codelord.net/2017/08/20/angular-1-dot-6-s-possibly-unhandled-rejection-errors/

[auginator]

I will just add what worked for me many times when using version 2.01: The error can be avoided by using this syntax for handling the promise rejection by $uibModalInstance.dismiss():

     // Use this style to avoid the warning :) 
      var modalInstance = $uibModal.open(…);
      modalInstance.result.then(function(result){
        // use promise.resolve(result) from .close()
      }, function(result){
        // handle promise.reject(), or leave method empty to do nothing, whatever!
      });

The more verbose syntax will throw the warning – however the .then & .catch methods will still work:

     // This style will result in warning :/
      var modalInstance = $uibModal.open(…);
      modalInstance.result.then(function(result){
        // use promise.resolve(result) from .close()
      });
      modalInstance.result.catch(function(result){
        // This will still work, but you will get an error
        // handle promise.reject(), or leave method empty to do nothing, whatever!
      });