为什么我的 React 生产应用程序无法在移动浏览器上运行？

Question

我目前已经部署了我的网络应用程序，它在桌面上运行得很好。这个问题完全是移动的。我能够在主页上发生 GET 调用 (axios) 之前在移动浏览器上加载网站一秒钟，然后移动浏览器挂在白色页面上。

我的后端是用 Django 构建的。我还使用 Django 来帮助从npm run build.

这是我的 package.json：

{
  "name": "buckets",
  "homepage": ".",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.11.2",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/lab": "^4.0.0-alpha.57",
    "@reduxjs/toolkit": "^1.5.0",
    "@testing-library/jest-dom": "^5.11.6",
    "@testing-library/react": "^11.2.2",
    "@testing-library/user-event": "^12.6.0",
    "axios": "^0.21.1",
    "chartist": "^0.10.1",
    "react": "^17.0.1",
    "react-chartist": "^0.14.4",
    "react-dom": "^17.0.1",
    "react-hook-form": "^6.14.2",
    "react-redux": "^7.2.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^4.0.3",
    "react-scroll": "^1.8.2",
    "react-window": "^1.8.6",
    "redux": "^4.0.5",
    "redux-persist": "^6.0.0",
    "redux-thunk": "^2.3.0",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "PORT=4000 react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

另外，这是 GET 请求，我认为这可能是罪魁祸首？

export const getAllDemoBuckets = async (dispatch, cancelToken) =>
{
  try
  {
    const response = await axiosInstance.get('/demo/all', { cancelToken });
    dispatch({ type: 'FETCH_SUCCESS', payload: response.data });
  } catch (err)
  {
    if ('isCancel' in err && err.isCancel())
    {
      return;
    }

    dispatch({ type: 'FETCH_ERROR' });
  }
}


const initialStateAllBuckets = {
    loading: true,
    error: '',
    data: []
}

const reducer = (state, action) =>
{
    switch (action.type)
    {
        case 'FETCH_SUCCESS':
            return {
                loading: false,
                data: action.payload,
                error: ''
            }
        case 'FETCH_ERROR':
            return {
                loading: false,
                data: {},
                error: "Something went wrong!"
            }
        default:
            return state
    }
}


export default function  HomeBucketsExample(props) {
    const {mobileView} = props
    const [allDemoBuckets, dispatchAllBuckets] = useReducer(reducer, initialStateAllBuckets)
    const ListLoading = LoadingComponent(HomeBucketLists);
    

    useEffect(() => {
        const source = axios.CancelToken.source()
        getAllDemoBuckets(dispatchAllBuckets, source.token);
        
        return () => {
          source.cancel();
        };
      }, []);
    
    return (
        <ListLoading mobileView={ mobileView} isLoading={allDemoBuckets.loading} buckets={allDemoBuckets.data} />
    );
}

知道为什么我的生产应用程序可以在桌面上运行但不能在移动设备上运行吗？我想到的另一件事是库兼容。期待您的回复。

编辑：我在云中的数字海洋虚拟机上设置了我的域。我只能在我的笔记本电脑上正确加载生产网站。当我使用其他设备时，我无法使该域正常工作。原因是我的 API 路径返回错误的响应，这导致我的 React 应用程序崩溃（同样，这在我当前的本地设备上不是问题）

这是我的 django urls.py

def render_react(request):
    return render(request, "index.html") #<---- index.html from React

    
urlpatterns = [
   path('auth/', include('drf_social_oauth2.urls', namespace='drf')),
   path('admin/', admin.site.urls),
   path('api/', include('bucket_api.urls', namespace='bucket_api')),
   path('api/user/', include('users.urls', namespace='users')),
   path('api-auth/', include('rest_framework.urls', namespace='rest_framework'))
]

urlpatterns += [
   re_path('',render_react)  #<---- Serving React index.html
]

我在其他设备上的所有 API 响应都返回index.html. 这就是为什么我的网站在其他设备上崩溃的原因。他们应该返回 JSON 数据。我的 API 路径当前已配置为正确的实时域名，但仍然出现问题。这不是 CORS 问题，这纯粹是我的本地设备与其他设备之间发生的路径问题。

Answer 1

可能发生了未捕获的错误，导致 React 进入空白屏幕。这可能是因为您的移动客户端难以访问 API 并且调用失败。

您是否尝试过在您正在构建的桌面之外的另一桌面上加载页面？

我的建议是从开始注释掉代码块，看看useEffect是否可以缩小问题发生的范围并努力解决问题。

由于很难从移动浏览器获取 console.log 输出，您还可以尝试将消息输出到屏幕，或使用错误边界来帮助显示错误。