bug: quickly replacing back to previous view causes both views to get unmounted

[stripathix]

Bug Report

Ionic version:

"@ionic/vue": "5.6.1",
"@ionic/vue-router": "5.6.1",
"vue": "3.0.5",
"vue-router": "4.0.3",

Current behavior: Application on a resume just shows a blank screen sometimes. Nothing is visible but if you slide the menu drawer is open. Very hard to reproduce but it does exist. It is exactly what we were getting when before this issue was resolved. Looks like Ionic is not clearing the hidden class of vue during the transition.

I can confirm this is the same issue given below. After updating ionic version this issue was resolved but it is back again. Maybe less in frequency but still exist. https://github.com/ionic-team/ionic-framework/issues/22654

We use IonicApp Flow for application update and some of the users complains that when new version is received then the application goes blank when they resume application. The menu is still working if you drag and if you change route by selecting a menu item then again it starts working.

Looks like it can be related to application resume because we do transition depending on some logic when app resume but could also be related to when Ionic App flow pushes new update then application transition leaves application in hidden state.

Any suggestions on this?

Expected behavior: It should not hide application content

Steps to reproduce:

It is an intermittent issue very hard to reproduce.

[liamdebeasi]

Thanks for the issue. I understand this is happens intermittently, but can you try and provide a GitHub repo that shows this issue happening? Without a repo it is unlikely we will be able to resolve this issue.

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[stripathix]

Hi @liamdebeasi, here is the error stack trace that I was able to capture with SENTRY when this issue happened if that helps.

TypeError: undefined is not an object (evaluating 'e.classList')
  at ? (./node_modules/@ionic/vue/dist/index.esm.js:1004:25)
  at asyncFunctionResume([native code])
  at n(./node_modules/@sentry/browser/esm/helpers.js:72:23)

Note: This is with following

"@ionic/vue": "5.6.1",
"@ionic/vue-router": "5.6.1",
"vue": "3.0.5",
"vue-router": "4.0.3",

[liamdebeasi]

Hi there,

Are you able to provide steps to reproduce the issue? Unfortunately a Sentry log is not enough for me to fully understand the issue. Additionally, there were some routing related issues fixed in Ionic Vue 5.6.4 so I also recommend updating your app to that version.

[stripathix]

Hi @liamdebeasi , Finally, I am able to simulate bugs by automating the route changes :-) .

Git repository for reproducible bug https://github.com/stripathix/ionic-blank-route-issue

Link to video of error happening. In video, you can see this bug is intermittent. Where it worked fine second time when i refreshed. But the third time it again fails. https://www.youtube.com/watch?v=ILWnyhC297Y

I think it is something related to a race condition where if you change routing very fast then ionic-router outlet is left blank without any route.

See in below screen shot where ionic-router-outlet is not having any ion-page.

It can be easily recovered from if you navigate to different route with error of .classlist first time when you click on menu navigation.

It is difficult to handle also because it fails so silent there is not even any log in console which somehow we can catch and send programmatically navigate user to some other view. This issue is really problematic when its Iphone because then user just see blank screen. Menu drawer is hidden and user will not even know if he has to drag to reveal menu drawer.

To simulate bug what i am doing is in main.js file after application is mounted i have a settimeout nested to call route changes quickly one after another.

const fallbackRoute = 'app.dashboard';
const defaultHomeViewState = 'app.about'
const navigateToRoute = () => {
  const lastState = router.currentRoute.value.name;
  router.replace({
    name: lastState === fallbackRoute ? defaultHomeViewState : fallbackRoute,
  });
};

function initiateBugSimulation() {
  console.log('#######initiateBugSimulation######');
  setTimeout(() => {
    navigateToRoute();
    setTimeout(() => {
      navigateToRoute();
    }, 10);
  }, 10);
}

router.isReady().then(() => {
  app.mount('#app');
  setTimeout(() => {
    initiateBugSimulation();
  }, 3000);

});

[liamdebeasi]

Thanks! I can reproduce this. The problem is likely that your script does not wait for the async transition to finish: https://github.com/ionic-team/ionic-framework/blob/master/packages/vue/src/components/IonRouterOutlet.ts#L256

Replacing from page A --> page B works, but then replacing from page B --> page A quickly would cause both pages to get unmounted. I need to see if this impacts Ionic React/Angular as well. I am not sure I would consider this a bug in our code, though I think we can make some improvements in our routing integration to avoid situations like this.