fix: add lazy modal error wrapper

Author: rinej

src/GlobalModals.tsx

@@ -1,28 +1,40 @@
 import React, {startTransition, Suspense, useEffect, useState} from 'react';
+import {ErrorBoundary as ReactErrorBoundary} from 'react-error-boundary';
 import DelegateNoAccessModalProvider from './components/DelegateNoAccessModalProvider';
 import EmojiPicker from './components/EmojiPicker/EmojiPicker';
 import GrowlNotification from './components/GrowlNotification';
 import * as EmojiPickerAction from './libs/actions/EmojiPickerAction';
 import {growlRef} from './libs/Growl';
+import Log from './libs/Log';
 import * as ReportActionContextMenu from './pages/inbox/report/ContextMenu/ReportActionContextMenu';
 
-// React.lazy with a no-op fallback if the chunk fails to load (e.g. stale cache, network blip).
-// These modals are non-critical and surface only on rare conditions, so a chunk-load failure must
-// not throw to the nearest error boundary and crash the app.
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function lazyWithNullFallback<T extends React.ComponentType<any>>(factory: () => Promise<{default: T}>): React.LazyExoticComponent<T> {
-    return React.lazy(() => factory().catch(() => ({default: (() => null) as unknown as T})));
-}
-
-const LazyPopoverReportActionContextMenu = lazyWithNullFallback(() => import('./pages/inbox/report/ContextMenu/PopoverReportActionContextMenu'));
-const LazyUpdateAppModal = lazyWithNullFallback(() => import('./components/UpdateAppModal'));
-const LazyScreenShareRequestModal = lazyWithNullFallback(() => import('./components/ScreenShareRequestModal'));
-const LazyProactiveAppReviewModalManager = lazyWithNullFallback(() => import('./components/ProactiveAppReviewModalManager'));
+const LazyPopoverReportActionContextMenu = React.lazy(() => import('./pages/inbox/report/ContextMenu/PopoverReportActionContextMenu'));
+const LazyUpdateAppModal = React.lazy(() => import('./components/UpdateAppModal'));
+const LazyScreenShareRequestModal = React.lazy(() => import('./components/ScreenShareRequestModal'));
+const LazyProactiveAppReviewModalManager = React.lazy(() => import('./components/ProactiveAppReviewModalManager'));
 
 // Maximum time (ms) the context menu mount can stay deferred before requestIdleCallback forces it to run,
 // guaranteeing mount even if the main thread never becomes idle.
 const IDLE_CALLBACK_TIMEOUT_MS = 2000;
 
+const logModalChunkFailure = (error: Error, info: {componentStack?: string | null}) =>
+    Log.alert(`[GlobalModals] lazy chunk failure - ${error.message}`, {componentStack: info.componentStack ?? undefined}, false);
+
+/**
+ * Wraps a lazy modal in its own ErrorBoundary + Suspense pair so a chunk-load failure
+ * (or unrelated load latency) in one modal cannot tear down sibling modals or the rest of GlobalModals.
+ */
+function LazyModalSlot({children}: {children: React.ReactNode}) {
+    return (
+        <ReactErrorBoundary
+            fallback={null}
+            onError={logModalChunkFailure}
+        >
+            <Suspense fallback={null}>{children}</Suspense>
+        </ReactErrorBoundary>
+    );
+}
+
 /**
  * Renders global modals and overlays that are mounted once at the top level.
  */
@@ -57,31 +69,29 @@ function GlobalModals() {
             <GrowlNotification ref={growlRef} />
             <DelegateNoAccessModalProvider>
                 {shouldRenderContextMenu && (
-                    <Suspense fallback={null}>
+                    <LazyModalSlot>
                         {/* eslint-disable-next-line react-hooks/refs -- module-level createRef, safe to pass as ref prop */}
                         <LazyPopoverReportActionContextMenu ref={ReportActionContextMenu.contextMenuRef} />
-                    </Suspense>
+                    </LazyModalSlot>
                 )}
             </DelegateNoAccessModalProvider>
             {/* eslint-disable-next-line react-hooks/refs -- module-level createRef, safe to pass as ref prop */}
             <EmojiPicker ref={EmojiPickerAction.emojiPickerRef} />
             {shouldRenderDeferredModals && (
                 <>
-                    {/* Each modal lives in its own Suspense boundary so an unrelated chunk's load latency
-                        or failure cannot delay or suppress the others (e.g. an incoming screen-share request).
-                        Order matters: BaseModal hardcodes zIndex: 1 on every modal, so DOM source order
+                    {/* Order matters: BaseModal hardcodes zIndex: 1 on every modal, so DOM source order
                         determines stacking when modals coincide. UpdateAppModal is last so the forced-update
                         prompt sits on top if it ever overlaps with the others. */}
-                    <Suspense fallback={null}>
+                    <LazyModalSlot>
                         {/* Proactive app review modal shown when user has completed a trigger action */}
                         <LazyProactiveAppReviewModalManager />
-                    </Suspense>
-                    <Suspense fallback={null}>
+                    </LazyModalSlot>
+                    <LazyModalSlot>
                         <LazyScreenShareRequestModal />
-                    </Suspense>
-                    <Suspense fallback={null}>
+                    </LazyModalSlot>
+                    <LazyModalSlot>
                         <LazyUpdateAppModal />
-                    </Suspense>
+                    </LazyModalSlot>
                 </>
             )}
         </>