移动壳补齐加载失败兜底

新增同源主页面加载失败归一模型与测试

Expo WebView 接入 onError/onHttpError 原生重试层

更新原生壳门禁与宿主壳方案文档

apps/mobile-shell/src/shell/ShellApp.tsx

@@ -6,7 +6,10 @@ import {
   BackHandler,
   Linking,
   Platform,
+  Pressable,
   StyleSheet,
+  Text,
+  View,
 } from 'react-native';
 import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
 import type { WebViewMessageEvent } from 'react-native-webview';
@@ -19,6 +22,10 @@ import {
 } from '../host-bridge/bridge';
 import { buildMobileShellUrlFromDeepLink } from './deepLink';
 import { lifecyclePayloadFromAppState } from './lifecycle';
+import {
+  type MobileShellLoadFailure,
+  normalizeMobileShellLoadFailure,
+} from './loadFailure';
 import {
   resolveMobileShellExternalUrl,
   shouldAcceptMobileShellHostBridgeMessage,
@@ -45,6 +52,22 @@ function buildHostBridgeMessageScript(message: unknown) {
   )}, origin: window.location.origin, source: window })); true;`;
 }
 
+type MobileWebViewLoadErrorEvent = {
+  nativeEvent: {
+    url: string;
+    code?: number;
+    description?: string;
+  };
+};
+
+type MobileWebViewHttpErrorEvent = {
+  nativeEvent: {
+    url: string;
+    statusCode?: number;
+    description?: string;
+  };
+};
+
 export default function ShellApp() {
   const webViewRef = useRef<WebView>(null);
   const [canGoBack, setCanGoBack] = useState(false);
@@ -62,6 +85,8 @@ export default function ShellApp() {
   const [webUrl, setWebUrl] = useState(() =>
     buildMobileShellUrl(baseWebUrl, urlOptions),
   );
+  const [loadFailure, setLoadFailure] =
+    useState<MobileShellLoadFailure | null>(null);
   const allowedWebOrigin = useMemo(() => new URL(webUrl).origin, [webUrl]);
   const reloadCurrentWebView = useCallback(() => {
     webViewRef.current?.reload();
@@ -94,6 +119,7 @@ export default function ShellApp() {
       allowedOrigin: allowedWebOrigin,
       urlOptions,
       openWebViewUrl(url) {
+        setLoadFailure(null);
         setWebUrl(url);
       },
       reloadWebView: reloadCurrentWebView,
@@ -111,6 +137,7 @@ export default function ShellApp() {
         baseWebUrl,
         urlOptions,
       );
+      setLoadFailure(null);
       setWebUrl(nextUrl);
     };
 
@@ -203,11 +230,44 @@ export default function ShellApp() {
       return;
     }
 
+    setLoadFailure(null);
     injectLifecycleEvent(AppState.currentState);
     void getMobileNetworkStatus()
       .then(injectNetworkStatusEvent)
       .catch(() => undefined);
   };
+  const handleWebViewLoadError = (event: MobileWebViewLoadErrorEvent) => {
+    setLoadFailure(
+      normalizeMobileShellLoadFailure(
+        {
+          type: 'native',
+          url: event.nativeEvent.url,
+          code: event.nativeEvent.code,
+          description: event.nativeEvent.description,
+        },
+        allowedWebOrigin,
+        webUrl,
+      ),
+    );
+  };
+  const handleWebViewHttpError = (event: MobileWebViewHttpErrorEvent) => {
+    setLoadFailure(
+      normalizeMobileShellLoadFailure(
+        {
+          type: 'http',
+          url: event.nativeEvent.url,
+          statusCode: event.nativeEvent.statusCode,
+          description: event.nativeEvent.description,
+        },
+        allowedWebOrigin,
+        webUrl,
+      ),
+    );
+  };
+  const handleRetryLoadFailure = () => {
+    setLoadFailure(null);
+    reloadCurrentWebView();
+  };
   const handleBlockedFileDownload = () => undefined;
 
   return (
@@ -237,6 +297,8 @@ export default function ShellApp() {
           onContentProcessDidTerminate={reloadCurrentWebView}
           onRenderProcessGone={reloadCurrentWebView}
           onLoad={handleWebViewLoad}
+          onError={handleWebViewLoadError}
+          onHttpError={handleWebViewHttpError}
           onShouldStartLoadWithRequest={handleShouldStartLoad}
           onNavigationStateChange={(event) => {
             setCanGoBack(event.canGoBack);
@@ -253,6 +315,21 @@ export default function ShellApp() {
           }}
           setSupportMultipleWindows={false}
         />
+        {loadFailure ? (
+          <View style={styles.loadFailurePanel} pointerEvents="auto">
+            <Text style={styles.loadFailureTitle}>{loadFailure.title}</Text>
+            <Text style={styles.loadFailureDetail}>{loadFailure.detail}</Text>
+            <Pressable
+              accessibilityRole="button"
+              onPress={handleRetryLoadFailure}
+              style={styles.loadFailureButton}
+            >
+              <Text style={styles.loadFailureButtonText}>
+                {loadFailure.retryLabel}
+              </Text>
+            </Pressable>
+          </View>
+        ) : null}
       </SafeAreaView>
     </SafeAreaProvider>
   );
@@ -263,4 +340,47 @@ const styles = StyleSheet.create({
     flex: 1,
     backgroundColor: '#fffdf9',
   },
+  loadFailurePanel: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 28,
+    backgroundColor: '#fffdf9',
+  },
+  loadFailureTitle: {
+    color: '#211a16',
+    fontSize: 18,
+    fontWeight: '700',
+    lineHeight: 24,
+    textAlign: 'center',
+  },
+  loadFailureDetail: {
+    maxWidth: 320,
+    marginTop: 10,
+    color: '#6a5c52',
+    fontSize: 14,
+    lineHeight: 20,
+    textAlign: 'center',
+  },
+  loadFailureButton: {
+    minWidth: 112,
+    minHeight: 42,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginTop: 20,
+    borderRadius: 8,
+    backgroundColor: '#211a16',
+    paddingHorizontal: 22,
+  },
+  loadFailureButtonText: {
+    color: '#fffdf9',
+    fontSize: 15,
+    fontWeight: '700',
+    lineHeight: 20,
+    textAlign: 'center',
+  },
 });