Ionic-framework: NavController.loadPage does not handle promise rejection

[fmaceachen]

Note: for support questions, please use one of these channels:

https://forum.ionicframework.com/
http://ionicworldwide.herokuapp.com/

Short description of the problem:

When you have an error in a second level page it does not propagate to the top level and it is not showed in the console

What behavior are you expecting?

Show errors in the console for all pages

Steps to reproduce:

1. Create a start project ionic start test --v2 --ts
2. Create a Page4
3. Add an error in Page4. Like undefined error.
   4.Do this.nav.push(Page4); in Page1
4. Error will not be showed

This on Page1

goToPage4() {
    this.nav.push(Page4).then(
      response => {
        console.log('Response ' + response);
      },
      error => {
        console.log('Error: ' + error);
      }
    ).catch(exception => {
      console.log('Exception ' + exception);
    });;
  }

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)
https://forum.ionicframework.com/t/ionic-2-error-not-showing-in-nav-push-somepage/49418/7

Which Ionic Version? 1.x or 2.x
2..0.0-beta.4

Plunker that shows an example of your issue

http://plnkr.co/edit/OBQjWnCgVkf7Z7mXezBs

Here it works but if you do it on a real project it does not.

Run ionic info from terminal/cmd prompt: (paste output below)
Cordova CLI: 6.1.1
Gulp version: CLI version 3.9.0
Gulp local: Local version 3.9.1
Ionic CLI Version: 2.0.0-beta.17
Ionic App Lib Version: 2.0.0-beta.8
ios-deploy version: 1.7.0
ios-sim version: 4.1.1
OS: Mac OS X El Capitan
Node Version: v5.10.1
Xcode version: Xcode 7.3 Build version 7D175

[layton-glympse]

+1, this is extremely annoying. I spent hours today trying to figure out why calls to this.nav.push() were dropping off a cliff. Turns out I had a syntax error in a template on the target page, and there was no error thrown indicating that.

[iignatov]

@layton-glympse @lricoy Are you by chance also using Mac OS X? I guess that it's something platform-specific because all reports are coming from Mac OS X. I opened a new issue (#6433) to track all of them.

[lricoy]

@iignatov yes

[rapropos]

When this issue was opened, I was able to reproduce the OP's problem under Chromium on Debian (which led me to suspect loadPage), so I don't think it was OS specific. I use past tense because potentially things changed in Ionic beta 6.

If you look at the area around line 1412 in this commit diff, you should see a call to compileInHost that has been replaced by a call to DynamicComponentLoader's loadNextToLocation. They both return Promises, and it still looks to me like this loadPage function does not properly propagate errors to its caller, but perhaps this has become moot.

When I was troubleshooting the problem in this Ionic forum thread, template parse errors indirectly triggered by calls to NavController would not be delivered back to app code, and this loadPage call to compileInHost looked to be the culprit. It gets a Promise back, and only calls then on it. No error handler, no returning the promise back to its caller. I think that's where the errors get swallowed.

While the main purpose of this commit may indeed have been completely different, the call that I traced was removed by it and replaced by different code, and the symptoms appear to have also changed.

[rapropos]

An update: using the original testbed (a deliberate error in a page's constructor that is being loaded via NavController.push) with Ionic beta 6, the error is in fact properly propagated back to callers and displays in the error console as expected.

[jgw96]

@rapropos Ahh you were right ahead of me, i was fixing to report that i could not repro this issue with beta.6. Funny enough though, even with beta.4 i cant seem to repro this issue, i get an undefined error (which is expected) when trying to push the page. Im on the latest chrome canary.

[jgw96]

@rapropos Would you mind trying again with the original plunker and seeing if you can repro the issue?

[rapropos]

@jgw96 apologies but I cannot downgrade my testbed project, apparently because the Ionic starter templates are a moving target. I get zillions of es6-shim errors and some other problems with SCSS when manually downgrading ionic-angular and angular2 in package.json. Does not look easily fixable.

[jgw96]

@rapropos Actually, you can use this plunker: http://plnkr.co/edit/OBQjWnCgVkf7Z7mXezBs to test with

[rapropos]

@jgw96 sorry, but as OP noted, the event timing model used by plunker blows the problem away. I don't think anybody would ever have been able to reproduce it there.

[jgw96]

Sorry, i meant you could pull that down and test it on a device haha (: Should have been more clear. I am gonna go ahead and close this issue, as i cant seem to repro it beta.6. If anyone has this issue with beta.6 feel free to comment and i will reopen. Thanks for using Ionic everyone!

[iignatov]

It seems to be resolved - the OP confirmed that it's fixed in beta.6:

I see it fixed with the new version beta 6 and angular beta 15

[wli]

@jgw96 I'm seeing silent fails of nav.push in beta6 still when there are template syntax errors (https://github.com/driftyco/ionic/issues/6433, https://github.com/driftyco/ionic/issues/6259, and https://github.com/driftyco/ionic/issues/6253)

[jgw96]

@wli Alright, doing a quick test now.

[wli]

I'm also hanging out on slack in #ionic-v2 if you need to chat

[jgw96]

@wli Hey, sure you can message me on slack, im @justin . So i just did a little test with one of my apps with nightly (wasnt the latest nightly, but one that was released right after beta.6). I intentionally put an error in the template, tried to push it, and it seemed that the error bubbled up fine in the promise. Would you mind trying with nightly? Im fixing to do another test with Beta.6.

[jgw96]

@wli So i just did another test with beta.6. Same setup as my message above and the error bubbled up nicely. Could you put up a simple test app on Github that uses beta.6 and seems to have this issue?

[jgw96]

@iignatov Are you still having this issue with beta.6 or is it working fine for you?

[iignatov]

@jgw96 I can't reproduce this on Windows and all reports are coming from Mac users, so I guess that it might be platform-specific, i.e. Mac OS X or Safari/WebKit.

On the other hand after reading some comments it seems that the behavior that I'm observing on Windows _(with Chrome)_ is more likely a feature of v8/Blink, but I'm still not absolutely sure about this because I got the same behavior with Firefox too.

I think that @rapropos is maybe on to something, I'll take a closer look at the code again tomorrow.

[iignatov]

Are you still having this issue with beta.6 or is it working fine for you?

@jgw96 I'm actually not able to reproduce the issue on Windows at all - both locally and in plunker the errors are shown in the console as expected _(in issue #6433 I just collected the feedback from the forum)_.

[jgw96]

@iignatov I am testing on OSX El Capitan with Chrome canary and it works fine for me in my test app, our ionic-conference-app and in plunker.

[jgw96]

Update: Works fine for me in Firefox on osx too

[jgw96]

@wli Are you testing with chrome?

[wli]

Yep, testing with Chrome. I've been trying to repro in a clean env but can't get it to trigger. May have to leave this for another day.

[jgw96]

@wli Hmm really weird. If your able to repro it please tell me, id love to know! Im gonna leave this issue closed for now.

[wli]

Sounds good, I'll reopen if I can ever figure out the repro conditions. It's definitely triggering under some set of circumstances for beta6 (I've been on beta6 ever since it was released, and triggered it earlier today in our app - unfortunately I attempted some workarounds instead of snapshotting the state).

I suspect it's related to calling the onPageWillEnter and onPageDidEnter hooks, but like I said, I haven't been able to reproduce in a clean environment.

[wli]

For future reference / in case it helps with this debugging, this is what I had to do to upgrade from beta4 to beta6 successfully on Apr 20:

The template it was used is pretty simple, just some uses of {{ _question.text }} and other properties.

[lricoy]

I can confirm that promise rejection is working for me now with beta.6 on mac El Captain/ Chrome Canary as well.
I will try to test later what @wli and @layton-glympse reported about template errors failing silently but it might be another issue all together.

[iignatov]

I created two plunker demos for testing the problem and a possible fix _(however I'm not absolutely sure if the problem would be reproducible in Plunker)_:

• Original beta.6 code
• Patched beta.6 code

Could anyone experiencing such issues run the demos in Safari and share the results here?

Note that at least in Chrome/Firefox the plunker has to be stopped and re-run after a click on each button.

[lricoy]

@iignatov Both plunkrs work as expected (logging errors) for me on Safari but as you said, I can't confirm that this solves the issue of running outside of plunkr. I will try to reproduce it locally tonight.

Quick note: I also had to stop and re-run on safari after clicking on the buttons because after the first error, the following ones would not be work but neither did the back button and other stuff. Not sure if this has any impact on what you were expecting.