Page Component ends up outside of ion-router-outlet

Ionic Framework
1

Hi, I Have an issue, I just do not know how to get around.

I am using a third party component inside one of my Ionic pages. Now this component may have a bug, as when I leave the ionic page via the back button, I do get an unhandled exception, but only when running on either an ipad or ipad emulator (but not even when running ionic serve in Safari)

image
image1006×623 158 KB

If I go down the call stack, I can see this is being called from some view cleanup code…

image
image883×358 74.1 KB

When the above exception occurs, it is caught in the window.onerror I have setup.

So, the 3rd party component appears to have some sort of bug, and I cannot reproduce it so far in a blank Ionic 6 app using Capacitor (I am trying to make it use Cordova like my app, but having problems getting Cordova into an Ionic 6 new app)

Anyway, none of the above is the problem here, however, what this then causes is the real issue.

Before this exception occurs, my components all appear inside the ion-router-outlet, and navigating to pages all works.

image

However, after this exception, the next time I navigate to a page, it appear Underneath the router…

image

So my home page does not go away, and I just see bits of the other page underneath.

My question is, although all of this is caused outside of Ionic, what could possibly cause the pages to now appear outside of the router, and could there be some possible way to recover from this outside error, so it does not render the whole application now unusable?

I have contacted the third party component support, but I am wondering if there is anyway I can recover form this error if they (or me) cannot reproduce in a simple app

Ionic info is

Ionic:

   Ionic CLI                     : 6.20.1 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 6.1.10
   @angular-devkit/build-angular : 13.3.8
   @angular-devkit/schematics    : 13.3.8
   @angular/cli                  : 13.3.8
   @ionic/angular-toolkit        : 6.1.0

Cordova:

   Cordova CLI       : 11.0.0
   Cordova Platforms : android 10.1.1, ios 6.2.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 15 other plugins)

Utility:

   cordova-res : not installed globally
   native-run  : not installed globally

System:

   Android SDK Tools : 26.1.1 (/Users/development/Library/Android/sdk)
   ios-deploy        : 1.11.4
   ios-sim           : 8.0.2
   NodeJS            : v16.15.0 (/usr/local/bin/node)
   npm               : 8.5.5
   OS                : macOS Monterey
   Xcode             : Xcode 13.3.1 Build version 13E500a

[UPDATE1]

I added capacitor and ran using this instead of Cordova, and still the same issue, so not related to the native wrapper

[UPDATE2]

I prevented the 3rd part exception, and this ionic problem no longer occurred. Not sure if it is possible to prevent this router issue IF such an exception does ever occur…or perhaps it is just in an unfortunate place and just leads to other such errors

2

I am having the same problem. Please post your solution if possible.

3

My solution was to stop the exception in my third party component.