React项目本地运行正常但build后部署卡在加载状态问题排查

问题描述 #

我有一个简易React项目，可从Mongo表查询信息并在页面展示，设置了加载状态以显示spinner和提示文本。本地执行yarn start运行正常，但执行yarn build并部署输出文件后，页面卡在加载界面，且控制台仅输出部分console.log内容，未执行全部代码。请问构建流程哪里出现了问题？

项目代码 #

import React, { useEffect } from "react";
import { ZOHO } from "./vendor/ZSDK";
import {
  BrowserRouter as Router,
  Routes,
  Route,
  Link,
  NavLink,
  Redirect,
  withRouter,
} from "react-router-dom";
import JiraTable from "./components/JiraTable";
import CircularProgress from "@mui/material/CircularProgress";
import Typography from "@mui/material/Typography";
import Paper from "@mui/material/Paper";

function App() {
  console.log("INITIALIZING");

  const [zohoContactId, setContactId] = React.useState("");
  const [usrEmail, setUsrEmail] = React.useState("");

  const [isLoaded, setIsLoaded] = React.useState(false);
  const [error, setError] = React.useState(null);

  useEffect(() => {
    async function init() {
      console.log("BEFORE PAGELOAD");
      try {
        await ZOHO.embeddedApp.on("PageLoad", function (data) {
          console.log("PageLoad", data);
          console.log(data);

          //Custom Business logic goes here
          let entity = data.Entity;
          let recordID = data.EntityId;

          // Set data we want from CRM into props
          ZOHO.CRM.API.getRecord({ Entity: entity, RecordID: recordID })
            .then((data) => {
              console.log(data);

              setContactId(data.data[0].id);
              setUsrEmail(data.data[0].Owner.email);

              console.log(usrEmail);
              setIsLoaded(true);
            })
            .catch((e) => console.log(e));
        });

        console.log("AFTER PAGELOAD");
        return await ZOHO.embeddedApp.init();
      } catch (e) {
        console.log(e);
      }
    }
    init();
  }, []);

  const ContentLoader = () => {
    // handle rendering conditionally based on AJAX response
    if (error) {
      // API Data Error State: render the error state
      return <div>Error</div>;
    } else if (!isLoaded) {
      // API Data Not Loaded: render the loading progress spinner
      return (
        <div align="center">
          <CircularProgress />
          <Typography variant="h2"> Loading data....</Typography>
        </div>
      );
    } else {
      // API Data Loaded Succesfully:
      // render the completed interface with data loaded, triggered by the state update of isLoaded and !error (no error)
      return <JiraTable custId={zohoContactId} usrEmail={usrEmail} />;
    }
  };

  return (
    <Router>
      <div className="App">
        <Paper>{ContentLoader()}</Paper>
      </div>
    </Router>
  );
}

export default App;

相关截图 #

Yarn Build Output #

本地正常运行截图 #

问题排查与修复方案 #

1. ZOHO SDK事件监听的异步处理错误 #

ZOHO.embeddedApp.on("PageLoad")是事件注册方法，并非Promise，不能用await修饰。这会导致代码执行顺序混乱，可能ZOHO.embeddedApp.init()在监听注册完成前就执行，PageLoad事件无法被正确触发，进而isLoaded永远不会被设为true，页面卡在加载状态。

修复代码：

async function init() {
  console.log("BEFORE PAGELOAD");
  try {
    // 去掉await，直接注册事件监听
    ZOHO.embeddedApp.on("PageLoad", function (data) {
      console.log("PageLoad", data);
      let entity = data.Entity;
      let recordID = data.EntityId;

      ZOHO.CRM.API.getRecord({ Entity: entity, RecordID: recordID })
        .then((data) => {
          console.log(data);
          setContactId(data.data[0].id);
          setUsrEmail(data.data[0].Owner.email);
          setIsLoaded(true);
        })
        .catch((e) => {
          console.log(e);
          setError(e); // 错误时更新error状态，避免页面一直加载
        });
    });

    console.log("AFTER PAGELOAD");
    await ZOHO.embeddedApp.init();
  } catch (e) {
    console.log(e);
    setError(e); // 捕获init阶段的错误
  }
}

2. 未处理API错误状态 #

原代码中ZOHO.CRM.API.getRecord的catch仅打印错误，未更新error状态，导致即使API请求失败，页面也会一直停留在加载界面，无法反馈错误信息。修复时需在catch中调用setError(e)，让页面显示错误状态。

3. 生产环境资源路径与权限问题 #

• 检查./vendor/ZSDK是否在构建后被正确打包：React生产构建会压缩静态资源，若SDK文件路径错误或未被正确引入，会导致ZOHO对象未定义，代码执行中断。可尝试将SDK改为CDN引入，或确认public目录下的资源路径配置。
• 部署环境权限验证：本地开发环境可能在ZOHO的信任列表中，但部署后的域名可能未被ZOHO授权，导致API请求被拦截（CORS错误或权限拒绝）。需在ZOHO后台添加部署域名到允许列表。

4. React状态更新的异步性问题 #

原代码中console.log(usrEmail)在setUsrEmail后立即执行，此时usrEmail状态尚未更新，属于React状态异步更新的正常现象，但不影响功能。若需打印更新后的状态，可添加useEffect监听：

useEffect(() => {
  console.log(usrEmail);
}, [usrEmail]);

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