如何在CodePush更新中处理错误，避免干扰应用功能？

要实现无网络等异常场景下捕获CodePush错误、不影响应用原有功能的需求，你需要调整错误捕获范围，并完善状态重置逻辑，以下是修改后的实现：

修改后的代码 #

import React, { useEffect, useState } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import codePush from 'react-native-code-push';
import { LoaderBox, ProgressBox } from '@components';
import { Navigator } from '@navigator';

export default function App() {
  const [syncMessage, setSyncMessage] = useState(true);
  const [syncProgress, setSyncProgress] = useState(false);
  const [progress, setProgress] = useState(0);

  const codePushStatusDidChange = (status: any) => {
    switch (status) {
      case codePush.SyncStatus.CHECKING_FOR_UPDATE:
        setSyncMessage(true);
        break;
      case codePush.SyncStatus.DOWNLOADING_PACKAGE:
        console.log('Downloading package.');
        setSyncMessage(false);
        setSyncProgress(true);
        break;
      case codePush.SyncStatus.INSTALLING_UPDATE:
        console.log('Installing update.');
        setSyncProgress(true);
        setSyncMessage(false);
        break;
      case codePush.SyncStatus.UP_TO_DATE:
        console.log('Up-to-date.');
        setSyncMessage(false);
        break;
      case codePush.SyncStatus.UPDATE_INSTALLED:
        console.log('Update installed.');
        setSyncProgress(false);
        break;
      case codePush.SyncStatus.ERROR:
        console.log('CodePush sync error occurred');
        // 错误发生时重置状态，显示应用核心界面
        setSyncMessage(false);
        setSyncProgress(false);
        break;
    }
  };

  const codePushDownloadDidProgress = (progression: {
    receivedBytes: any;
    totalBytes: any;
  }) => {
    let progressReceived = Math.round(
      (progression.receivedBytes / progression.totalBytes) * 100,
    );
    setProgress(progressReceived);
  };

  useEffect(() => {
    const syncCodePush = async () => {
      try {
        await codePush.sync(
          { installMode: codePush.InstallMode.IMMEDIATE },
          codePushStatusDidChange,
          codePushDownloadDidProgress,
        );
      } catch (err) {
        console.error('CodePush sync failed:', err);
        // 捕获到异常时直接切换到应用界面
        setSyncMessage(false);
        setSyncProgress(false);
      }
    };

    syncCodePush();
  }, []);

  return (
    <NavigationContainer>
      {syncMessage && <LoaderBox />}
      {!syncMessage && !syncProgress && <Navigator />}
      {syncProgress && <ProgressBox prog={progress} />}
    </NavigationContainer>
  );
}

关键改动说明 #

• 扩大错误捕获范围：将codePush.sync包装在async/await函数中，并添加try-catch，捕获同步过程中（如无网络、服务器错误）抛出的异常
• 新增错误状态处理：在codePushStatusDidChange中添加codePush.SyncStatus.ERROR分支，响应CodePush内部抛出的同步错误
• 错误时重置状态：无论是捕获到异常还是收到错误状态，都立即重置syncMessage和syncProgress，确保应用核心界面Navigator能正常显示
• 异步处理同步：将codePush.sync改为异步调用，确保能正确捕获Promise形式的错误

内容的提问来源于stack exchange，提问作者greta calamari