javascript - Why is my React production app not working on mobile browsers? - Stack Overflow

admin管理员组

文章数量:1292234

I have currently deployed my web app, it works great on Desktop. The issue is strictly mobile. I'm able to load the website on mobile browsers for a second before a GET call (axios) that happens on the home page, then the mobile browser hangs on a white page.

My backend is built with Django. I also use Django to help collect the static files from npm run build.

Here is my 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"
    ]
  }
}

Also, here is the GET request which I think might be the culprit here?

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} />
    );
}

Any ideas why my production app works on desktop but not mobile? Another thing that es to mind is library patibly. Looking forward to your responses.

EDIT: I have my domain set up on a digital ocean VM in the cloud. I'm only able to correctly load the production website on my laptop. When I use another device, I'm not able to get the domain working. The reason is my API paths are returning the wrong responses, which causes my React app to crash (again this is not a problem on my current local device)

Here are my 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
]

All of my API responses on other devices are returning the index.html. Hence why my website crashes on other devices. They should be returning JSON data. My API paths are currently configured to the correct live domain name, yet still the problem occurs. It's not a CORS issue, it's purely a pathing issue that is going on between my local device vs other devices.

I have currently deployed my web app, it works great on Desktop. The issue is strictly mobile. I'm able to load the website on mobile browsers for a second before a GET call (axios) that happens on the home page, then the mobile browser hangs on a white page.

My backend is built with Django. I also use Django to help collect the static files from npm run build.

Here is my 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"
    ]
  }
}

Also, here is the GET request which I think might be the culprit here?

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} />
    );
}

Any ideas why my production app works on desktop but not mobile? Another thing that es to mind is library patibly. Looking forward to your responses.

EDIT: I have my domain set up on a digital ocean VM in the cloud. I'm only able to correctly load the production website on my laptop. When I use another device, I'm not able to get the domain working. The reason is my API paths are returning the wrong responses, which causes my React app to crash (again this is not a problem on my current local device)

Here are my 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
]

All of my API responses on other devices are returning the index.html. Hence why my website crashes on other devices. They should be returning JSON data. My API paths are currently configured to the correct live domain name, yet still the problem occurs. It's not a CORS issue, it's purely a pathing issue that is going on between my local device vs other devices.

• javascript
• reactjs
• mobile
• axios

Share Follow edited May 6, 2021 at 20:27 yung peso asked May 4, 2021 at 20:17 yung pesoyung peso 1,79688 gold badges4040 silver badges8787 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 0

There is likely an uncaught error that is occurring that is causing React to go to a blank screen. This could be because your mobile client is having difficulty reaching the API and the call is failing.

Have you tried loading the page on another desktop other than the one you are building on?

My suggestion would be to start menting out blocks of code starting with the useEffect to see if you can narrow down where the problem is occurring and work yourself towards the issue.

Since it's hard to get a console.log output from a mobile browser, you could also try outputting your messages to the screen, or use an Error Boundary to help display the error.

My understanding is that your website works on desktop only (local and on prod) but it doesn't work on mobile (local AND prod).

If your app doesn't work on mobile locally, I would debug it locally on a phone first.

There are plenty of articles out there. For iOS. Debugging locally will allow you to view the exact errors in the console.

Alternatively, but it would be my second option, is to make sure you have sentry added to your react project so we can see the callstack and what went wrong.

If the 2 options above still don't give you much insight, I would see if this error occurs on development/staging environment. I would then reduce your app to it's basic structure by displaying basic pages first to see if you can use trial and error to scope down on your problem.

If you're sure it's a pathing issue, see if you can hard code it to confirm this etc.

I installed this app to my android phone, inspected error on console and fixed. Maybe it helps u too.

F12 - Inspect Element | Console | Network | Media
F12 will provide you with options to inject custom JavaScript on webpages. You can interact in programming way with the webpages using the provided console. https://play.google./store/apps/details?id=.asfmapps.f12&hl=tr&gl=US

For example:

My error is about REDUX_DEVTOOLS_EXTENSION.

store.ts - (before)

store = createStore(rootReducer, window?.__REDUX_DEVTOOLS_EXTENSION__())

store.ts - (after)

store = createStore(rootReducer, window?.__REDUX_DEVTOOLS_EXTENSION__?.())

After trying all the solutions to this problem without luck, my problems was my web host's .htaccess file.

I created a new one, and just added the line below, then uploaded to my site root directory:

DirectoryIndex index.html

If render nothing, or any element, you can try to fix temporarly on Safari mobile, like so, opening: Configuration > Safari > Advanced > Experimental Features > than activate all.

本文标签： javascriptWhy is my React production app not working on mobile browsersStack Overflow