@autobusal/providers 1.6.6 → 1.6.7

package/CHANGELOG.md

@@ -4,6 +4,26 @@ All notable changes to `@autobusal/providers` are documented here. This project
 adheres to [Keep a Changelog](https://keepachangelog.com/en/1.1.0/) and
 [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.6.7] - 2026-07-31
+
+### Added
+
+- **`Providers.tsx`: self-healing reload if the DOM ever corrupts near the
+  root.** 1.6.6 closed the deterministic trigger for the
+  `GoogleReCaptchaProvider` remount corruption (see 1.6.6 below), but its
+  script/badge injection is still fundamentally async - a script tag's
+  `onload` racing React's synchronous mount/cleanup - so a rare remount
+  can still leave the DOM in a state that throws an uncaught
+  `removeChild`/`insertBefore` error on the next reconciliation anywhere
+  near the root. That class of error isn't render-phase, so no
+  `ErrorBoundary` catches it, and it silently aborts whatever navigation
+  was in flight: the URL updates but the page never re-renders, with no
+  visible error and no way to navigate out. A reload of the current URL
+  always recovers cleanly (the router's `history.pushState` already
+  applied), so `Providers` now listens for exactly this error signature
+  and self-heals with one reload, guarded by a 10s `sessionStorage`
+  cooldown so a genuinely persistent error can't loop.
+
 ## [1.6.6] - 2026-07-31
 
 ### Fixed

package/Providers.tsx

@@ -1,4 +1,4 @@
-import { Suspense } from 'react';
+import { Suspense, useEffect } from 'react';
 import Recaptcha from './Recaptcha/Recaptcha';
 import Queries from './Queries/Queries';
 import Styles from './Styles/Styles';
@@ -11,56 +11,103 @@ interface Props {
   children: JSX.Element
 }
 
-const Providers = ({ type, loading, children }: Props): JSX.Element => (
-  // Styles and Setup both call useGetSettings() (a useSuspenseQuery) and sit
-  // ABOVE the inner <Suspense> below, so on a cold settings cache their
-  // suspension had no boundary to catch it and React threw error #426
-  // ("a component suspended while responding to synchronous input"). This
-  // outer boundary catches those two suspensions (showing `loading` during
-  // the initial settings fetch). The QueryClient in <Queries> is created at
-  // module scope, so remounting this subtree while suspended keeps the same
-  // client and cache - no refetch loop.
-  // Edited: Ferjolt Ozuni - Date: 2026-07-25
-  // Recaptcha moved INSIDE Queries: it now reads the label's runtime captcha
-  // settings via useGetSettings(), which needs the QueryClientProvider (and
-  // suspends into the outer boundary on a cold cache, like Styles/Setup).
-  // Edited: Ferjolt Ozuni - Date: 2026-07-31
-  // Bug: Setup also calls useGetMenu() (a SEPARATE useSuspenseQuery, its own
-  // cache key/promise) in its own render body, still inside this same outer
-  // boundary. On a cold menu cache, that suspends AFTER Recaptcha/Styles/
-  // Notifications above it have already committed - and a Suspense boundary
-  // re-suspending after its content is already committed hides/discards that
-  // whole committed subtree and mounts it again once ready. Recaptcha's
-  // GoogleReCaptchaProvider isn't remount-safe: its script/badge injection is
-  // async and outside React's DOM bookkeeping, so remounting it left a
-  // duplicate, half-torn-down <div class="grecaptcha-badge"> behind. That
-  // corrupted DOM state then threw an uncaught "Cannot read properties of
-  // null (reading 'removeChild')" the next time React reconciled anywhere
-  // near the root - which is every route change, since Recaptcha wraps the
-  // whole router - silently aborting the commit. The URL would update (the
-  // router's history.pushState already ran) but the page itself would never
-  // re-render, freezing navigation app-wide with no console-visible error
-  // (uncaught DOM exceptions like this don't hit the render-phase-only
-  // ErrorBoundary). Giving Setup its own inner boundary means its menu
-  // suspension can only hide/retry ITSELF, not the already-committed
-  // Recaptcha/Styles/Notifications above it.
-  <Suspense fallback={ loading }>
-    <Queries>
-      <Recaptcha>
-        <Styles>
-          <Notifications>
-            <Suspense fallback={ loading }>
-              <Setup type={ type }>
-                <Suspense fallback={ loading }>
-                  { children }
-                </Suspense>
-              </Setup>
-            </Suspense>
-          </Notifications>
-        </Styles>
-      </Recaptcha>
-    </Queries>
-  </Suspense>
-);
+// Edited: Ferjolt Ozuni - Date: 2026-07-31
+// Defensive backstop for the removeChild corruption described below: even
+// with Setup's suspension isolated, GoogleReCaptchaProvider's script/badge
+// injection is inherently async (a script tag's onload race against React's
+// synchronous mount/cleanup), so a rare remount can still leave the DOM in a
+// state that throws on the next reconciliation - and that throw is NOT
+// render-phase, so no ErrorBoundary catches it. Left alone, this strands the
+// user on whatever was on screen with a URL that no longer matches it and no
+// working navigation (the exact "stuck, can't log out" symptom). A hard
+// reload of the current URL always recovers cleanly (proven: the router's
+// history.pushState already applied), so self-heal with one, guarded against
+// looping if the error turns out to be persistent rather than transient.
+const useRecoverFromDomCorruption = (): void => {
+  useEffect(() => {
+    const RECOVERY_KEY = 'autobusalDomRecoveryAt';
+
+    const onError = (event: ErrorEvent): void => {
+      const message = event.message || '';
+
+      if (!message.includes('removeChild') && !message.includes('insertBefore')) {
+        return;
+      }
+
+      const last = Number(sessionStorage.getItem(RECOVERY_KEY) || 0);
+
+      if (Date.now() - last < 10000) {
+        return;
+      }
+
+      sessionStorage.setItem(RECOVERY_KEY, String(Date.now()));
+      window.location.reload();
+    };
+
+    window.addEventListener('error', onError);
+
+    return () => window.removeEventListener('error', onError);
+  }, []);
+};
+
+const Providers = ({ type, loading, children }: Props): JSX.Element => {
+  useRecoverFromDomCorruption();
+
+  return (
+    // Styles and Setup both call useGetSettings() (a useSuspenseQuery) and
+    // sit ABOVE the inner <Suspense> below, so on a cold settings cache their
+    // suspension had no boundary to catch it and React threw error #426
+    // ("a component suspended while responding to synchronous input"). This
+    // outer boundary catches those two suspensions (showing `loading` during
+    // the initial settings fetch). The QueryClient in <Queries> is created
+    // at module scope, so remounting this subtree while suspended keeps the
+    // same client and cache - no refetch loop.
+    // Edited: Ferjolt Ozuni - Date: 2026-07-25
+    // Recaptcha moved INSIDE Queries: it now reads the label's runtime
+    // captcha settings via useGetSettings(), which needs the
+    // QueryClientProvider (and suspends into the outer boundary on a cold
+    // cache, like Styles/Setup).
+    // Edited: Ferjolt Ozuni - Date: 2026-07-31
+    // Bug: Setup also calls useGetMenu() (a SEPARATE useSuspenseQuery, its
+    // own cache key/promise) in its own render body, still inside this same
+    // outer boundary. On a cold menu cache, that suspends AFTER Recaptcha/
+    // Styles/Notifications above it have already committed - and a Suspense
+    // boundary re-suspending after its content is already committed hides/
+    // discards that whole committed subtree and mounts it again once ready.
+    // Recaptcha's GoogleReCaptchaProvider isn't remount-safe: its script/
+    // badge injection is async and outside React's DOM bookkeeping, so
+    // remounting it left a duplicate, half-torn-down
+    // <div class="grecaptcha-badge"> behind. That corrupted DOM state then
+    // threw an uncaught "Cannot read properties of null (reading
+    // 'removeChild')" the next time React reconciled anywhere near the root
+    // - which is every route change, since Recaptcha wraps the whole router
+    // - silently aborting the commit. The URL would update (the router's
+    // history.pushState already ran) but the page itself would never
+    // re-render, freezing navigation app-wide with no console-visible error
+    // (uncaught DOM exceptions like this don't hit the render-phase-only
+    // ErrorBoundary). Giving Setup its own inner boundary means its menu
+    // suspension can only hide/retry ITSELF, not the already-committed
+    // Recaptcha/Styles/Notifications above it - this closed off the
+    // deterministic trigger, and useRecoverFromDomCorruption() above is the
+    // backstop for whatever async-timing sliver still gets through.
+    <Suspense fallback={ loading }>
+      <Queries>
+        <Recaptcha>
+          <Styles>
+            <Notifications>
+              <Suspense fallback={ loading }>
+                <Setup type={ type }>
+                  <Suspense fallback={ loading }>
+                    { children }
+                  </Suspense>
+                </Setup>
+              </Suspense>
+            </Notifications>
+          </Styles>
+        </Recaptcha>
+      </Queries>
+    </Suspense>
+  );
+};
 
 export default Providers;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autobusal/providers",
-  "version": "1.6.6",
+  "version": "1.6.7",
   "author": "Ferjolt Ozuni",
   "type": "module",
   "main": "index.ts"