1

I am aware of siiar questions, such as Angularjs 1.7.9 - Possibly unhandled rejection and those mentioned in it as duplicates.

However, my code does not use promises (that I am aware of; certainly no $promise or $http).

I am just knocking up a simple ui-router demo for a friend. It is just two views, each with a button that toggles to the other view. It works just fine with AngulrJs 1.5, and breaks with the above error in 1.7.

A simple as it is, it's a bit too much code to post. In case, rather than finding the error in my code, I woudl like a canonical answer to help others who read this question in future : how to go about denugging this error message?

Error: transition failed (caused by "Possibly unhandled rejection: {}") 

at r [as $get] (http://localhost/common/js/third_party/ui-router_zero_pint_2_point_11/angular-ui-router.min.js:7:11365)  
at Object.invoke (http://localhost/common/js/third_party/angular-1_point_7_point_9/angular.min.js:45:62)  
at http://localhost/common/js/third_party/angular-1_point_7_point_9/angular.min.js:46:365  
at d (http://localhost/common/js/third_party/angular-1_point_7_point_9/angular.min.js:43:495)  
at e (http://localhost/common/js/third_party/angular-1_point_7_point_9/angular.min.js:44:235)  
at Object.invoke (http://localhost/common/js/third_party/angular-1_point_7_point_9/angular.min.js:44:320)  
at http://localhost/common/js/third_party/angular-1_point_7_point_9/angular.min.js:47:18  
at r (http://localhost/common/js/third_party/angular-1_point_7_point_9/angular.min.js:8:76)  
at fb (http://localhost/common/js/third_party/angular-1_point_7_point_9/angular.min.js:46:499)  
at c (http://localhost/common/js/third_party/angular-1_point_7_point_9/angular.min.js:22:57)
georgeawg
  • 48,608
  • 13
  • 72
  • 95
Mawg says reinstate Monica
  • 38,334
  • 103
  • 306
  • 551
  • Thanks. Great tip about not using minified AngaulrJs. I have no idea what "resolvers" are, but will Google. Thanks again (upvote) – Mawg says reinstate Monica Feb 22 '20 at 14:20
  • I will ty @wu-lee 's answer to [this question](https://stackoverflow.com/questions/41281515/possibly-unhandled-rejection-in-angular-1-6) – Mawg says reinstate Monica Feb 26 '20 at 06:51
  • I will try that this evening. Thanks. Btw, you are extremely active & well upvoted on AnguaraJs questions. If that doesn't fix it, I will post a new question with a Plunk & my exact code, and hopefully get an answer to ***my*** problem. But,what about this question? Is there a generic way to debug this? – Mawg says reinstate Monica Feb 26 '20 at 07:39
  • 1
    Does the code work if you disable the "unhandled rejection" error in the `$qProvider`? – georgeawg Feb 26 '20 at 08:00
  • 1
    It does work, just gives those annoying error messages, which I do not wish to blanket suppress for obvious reasons. – Mawg says reinstate Monica Feb 26 '20 at 08:08
  • 1
    You will get a more informative stack trace if you use `angular.js` instead of `angular.min.js` and `angular-ui-router.js` instead of `angular-ui-router.min.js`. Angular-UI-Router uses promises in its transition module. It looks like you upgraded your version of AngularJS without upgrading the version of Angular-UI-Router. Upgrade your router from V0.2.11 to V0.4.3. It looks like your problem is caused by sloppy Angular-UI-Router code. If they didn't fix the issue by V0.4.3, you can either patch the library or live with the messages. – georgeawg Feb 26 '20 at 16:29
  • The latest version of UI-router (1.0.25) solved the problem. Feel free to post an answer. And, thanks – Mawg says reinstate Monica Feb 26 '20 at 18:14

2 Answers2

1

One way to debug ui-router is the following:

From the console inject the $state service typing the following:

var test = angular.element(document.body).injector().get('$state');

Then simulate and perform the transition that causes the problem:

test.go('root.details') // use the state url here

After that, details of the transition will be printed in console. Into $$state object, you may find more details about the failed transition and reasons of failure: enter image description here

Bill P
  • 3,622
  • 10
  • 20
  • 32
  • It gives me "`Uncaught Error: Could not resolve 'root.details' from state 'search_result'" :-( – Mawg says reinstate Monica Feb 25 '20 at 18:50
  • 1
    Ok, it seems that you have declared a state with the name `search_result` and then you try to go to the state `root.details`. This is an invalid transition and fails. Change the state `search_result` to something starting with `root.` for example: `root.results` and try again.. – Bill P Feb 25 '20 at 19:00
  • I don't even have a state named `details` ! Also, I don't inject `$rootscope`, as I consider that to be bad practice. So, how can I be trying to change to `root.details` ? – Mawg says reinstate Monica Feb 25 '20 at 19:20
  • Changing "`.state('search_result',`" to "`.state('root.search_result',`" in my config.js did not help :-( – Mawg says reinstate Monica Feb 25 '20 at 19:34
  • 1
    I didn't explained well my mistake. If the error occurs while changing state from one view to another(for example if your states are `state1` and `state2`), then go to the first view `state1`, and then from the console execute the above script `test.go('state2')` – Bill P Feb 25 '20 at 19:35
  • The problem is that I am getting the error before I try to switch state - and my config.js says `$urlRouterProvider.otherwise("/search");` But, the only change is from AngularJs 1.5 to .7 - it is perfectly fine with 1.5 – Mawg says reinstate Monica Feb 25 '20 at 19:49
  • 2
    The error message says: `Error: transition failed..`, so I assumed that error occurs during a transition. Maybe a transition is happening underneath – Bill P Feb 25 '20 at 20:10
  • As soon as the system allows, I will award you a bonus for your help. Thank you – Mawg says reinstate Monica Feb 27 '20 at 06:07
1

The latest version of UI-router (1.0.25) solved the problem. Feel free to post an answer.

You will get a more informative stack trace if you use angular.js instead of angular.min.js and angular-ui-router.js instead of angular-ui-router.min.js. Angular-UI-Router uses promises in its transition module. It looks like you upgraded your version of AngularJS without upgrading the version of Angular-UI-Router. Upgrade your router from V0.2.11 to V0.4.3. It looks like your problem is caused by sloppy Angular-UI-Router code. If they didn't fix the issue by V0.4.3, you can either patch the library or live with the messages.

Debugging "possibly unhandled rejection"

The stack trace will show the file and the line number from which the error originates. Examine the code and fix the problem. If the error orginates in a third- party library, try upgrading to the latest version or contacting the third-party library vendor.

As a last resort, disable the "possibly unhandled rejection" messages:

app.config(functon ($qProvider) {
    $qProvider.errorOnUnhandledRejections(false);
});

This is not recommended as it allows other problems to silently fail.

If one doesn't care about a specific promise failing, add a .catch handler:

$http(config).then(function(response) {
    //...
}).catch(function(response) {
   //I don't care about errors
   if (debug) console.log(response);
   //Re-throw error response
   throw response;
})

Upgrading AngularJS

When upgrading AngularJS, it is best to upgrade all of the AngularJS modules at the same time. That is when migrating from angular.js@1.4 to angular.js@1.5, at the same time upgrade to angular-animate@1.5, angular-resource@1.5, angular-route.js@1.5, etc. I have seen unpleasant problems when trying to mix and match versions of AngularJS modules.

When migrating, I recommend upgrading one minor version at a time. For example, upgrade from V1.4 to V1.5 first, fix what breaks, then upgrade to V1.6.

The current version is 1.7.9 pollution-eradication (2019-11-19). I recommend using the latest version as the AngularJS team has committed to fixing security bugs only in both V1.2.x and the latest version. For more information, see

Upgrading Angular-UI-Router

UI-Router for AngularJS has two major versions

Version 0.4.3 UI-Router-Legacy

Version 1.0.25 UI-Router for AngularJS

I recommend upgrading to the latest version of UI-Router-Legacy before migrating to the latest version of UI-Router for AngularJS. There have been major breaking changes between the two and it is best to deal with it incrementally.

For more informaton, see

georgeawg
  • 48,608
  • 13
  • 72
  • 95