debug: forward all browser logs and add MutationObserver to catch section-a hide

Previous CI debug run showed PRE_SWIPE section-a visible and POST_SWIPE hidden,
but no [SwipeBack*] browser-console logs were forwarded. Forward every browser
console event via page.on('console') and install a MutationObserver on #section-a
to dump the exact stack that mutates class/style/aria-hidden during the gesture.

Author: ShaneK

packages/react-router/src/ReactRouter/StackManager.tsx

@@ -1117,6 +1117,19 @@ export class StackManager extends React.PureComponent<StackManagerProps> {
     let leavingViewItem = viewItems.leavingViewItem;
     let shouldUnmountLeavingViewItem = this.shouldUnmountLeavingView(routeInfo, enteringViewItem, leavingViewItem);
 
+    if (this.id === 'modal-aria-hidden-root' || this.id === 'section-a' || this.id === 'section-b') {
+      // eslint-disable-next-line no-console
+      console.log('[HPT:entry]', JSON.stringify({
+        outletId: this.id,
+        pathname: routeInfo.pathname,
+        routeAction: routeInfo.routeAction,
+        routeDirection: routeInfo.routeDirection,
+        enteringViewPath: enteringViewItem?.reactElement?.props?.path,
+        leavingViewPath: leavingViewItem?.reactElement?.props?.path,
+        shouldUnmountLeavingViewItem,
+      }));
+    }
+
     // Get parent path for nested outlets
     const parentPath = this.getParentPath();
 
@@ -1507,6 +1520,25 @@ export class StackManager extends React.PureComponent<StackManagerProps> {
   ) {
     const myGeneration = ++this.transitionGeneration;
 
+    if (this.id === 'modal-aria-hidden-root' || this.id === 'section-a' || this.id === 'section-b') {
+      // eslint-disable-next-line no-console
+      console.log('[TP:entry]', JSON.stringify({
+        outletId: this.id,
+        direction,
+        progressAnimation,
+        skipAnimation,
+        enteringId: enteringViewItem?.id,
+        enteringPath: enteringViewItem?.reactElement?.props?.path,
+        enteringPageElementId: enteringViewItem?.ionPageElement?.id,
+        leavingId: leavingViewItem?.id,
+        leavingPath: leavingViewItem?.reactElement?.props?.path,
+        leavingPageElementId: leavingViewItem?.ionPageElement?.id,
+        routeAction: routeInfo.routeAction,
+        routeDirection: routeInfo.routeDirection,
+        routePathname: routeInfo.pathname,
+      }));
+    }
+
     const runCommit = async (enteringEl: HTMLElement, leavingEl?: HTMLElement) => {
       const skipTransition = this.skipTransition;
 

packages/react-router/test/base/tests/e2e/playwright/ionpage-swipe-back.spec.ts

@@ -24,11 +24,12 @@ const IOS_MODE = 'ionic:mode=ios';
 test.describe('ionPage outlet swipe-to-go-back', () => {
   test('section-a content should be visible during swipe-back from section-b', async ({ page }) => {
     page.on('console', (msg) => {
-      const text = msg.text();
-      if (text.startsWith('[SwipeBack') || text.startsWith('[HideIonPageElement]')) {
-        // eslint-disable-next-line no-console
-        console.log('PAGE:', text);
-      }
+      // eslint-disable-next-line no-console
+      console.log('BROWSER[' + msg.type() + ']:', msg.text());
+    });
+    page.on('pageerror', (err) => {
+      // eslint-disable-next-line no-console
+      console.log('PAGEERROR:', err.message);
     });
 
     // Navigate to modal-aria-hidden test page (has sibling ionPage outlets)
@@ -41,6 +42,36 @@ test.describe('ionPage outlet swipe-to-go-back', () => {
     await page.locator('#navigateToB').click();
     await ionPageVisible(page, 'modal-page-b');
 
+    // Install a MutationObserver on section-a to catch anyone adding ion-page-hidden
+    await page.evaluate(() => {
+      const target = document.querySelector('#section-a');
+      if (!target) {
+        // eslint-disable-next-line no-console
+        console.log('[MO-install] #section-a not found!');
+        return;
+      }
+      const obs = new MutationObserver((mutations) => {
+        for (const m of mutations) {
+          if (m.type === 'attributes' && (m.attributeName === 'class' || m.attributeName === 'style' || m.attributeName === 'aria-hidden')) {
+            const el = m.target as HTMLElement;
+            // eslint-disable-next-line no-console
+            console.log('[MO-change]', JSON.stringify({
+              attr: m.attributeName,
+              oldValue: m.oldValue,
+              newClass: el.className,
+              newStyle: el.getAttribute('style'),
+              newAriaHidden: el.getAttribute('aria-hidden'),
+              stack: new Error().stack?.split('\n').slice(1, 8).map((s) => s.trim()),
+            }));
+          }
+        }
+      });
+      obs.observe(target, { attributes: true, attributeOldValue: true });
+      (window as any).__sectionAObserver = obs;
+      // eslint-disable-next-line no-console
+      console.log('[MO-install] observer attached to #section-a');
+    });
+
     // Pre-swipe: dump section-a state
     const preSwipe = await page.locator('#section-a').evaluate((el: HTMLElement) => ({
       inlineDisplay: el.style.display,
@@ -76,6 +107,10 @@ test.describe('ionPage outlet swipe-to-go-back', () => {
     // eslint-disable-next-line no-console
     console.log('POST_SWIPE section-a:', JSON.stringify(postSwipe));
 
+    // Also dump current URL to see if navigation fired
+    // eslint-disable-next-line no-console
+    console.log('POST_SWIPE url:', page.url());
+
     // Mid-swipe: section-a should be visible (not display:none) with its child content
     const sectionA = page.locator('#section-a');
     const computedDisplay = await sectionA.evaluate((el: HTMLElement) => getComputedStyle(el).display);