showing white blank screen when app is idle for some time

[dharmiksoni]

app is created with create-react-app. so problem is the app shows white blank screen when idle for some time with no console errors, and it doesn't happen frequently or every time, but has faced this issue when not expected. i had open duplicate tabs with same route and for same time, but saw that the tab which i was working got blank screen after getting idle and other tab on which i was not working was not effected.

[eddiemonge]

Does refreshing the page make it work again?

[dharmiksoni]

Yes, on refresh it does work.

[leoaretakis]

Happens to me as well

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[stale[bot]]

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.

[szmarci]

I am also experiencing this phenomenon. After some (very random) time the app disappears into thin air without any error in the console. Very strange...

[Dinesh722]

I am also experiencing this phenomenon. After some (very random) time the app disappears into thin air without any error in the console. Very strange...

Hi. Have you found the solution. I am facing the same issue

[Dinesh722]

Happens to me as well

Have you found the solution. I am facing the same issue

[kamaldeepj]

app is created with create-react-app. so problem is the app shows white blank screen when idle for some time with no console errors, and it doesn't happen frequently or every time, but has faced this issue when not expected. i had open duplicate tabs with same route and for same time, but saw that the tab which i was working got blank screen after getting idle and other tab on which i was not working was not effected.

Have you found any solution for this?

[kamaldeepj]

I am also experiencing this phenomenon. After some (very random) time the app disappears into thin air without any error in the console. Very strange...

Have you found any solution for this?

[kamaldeepj]

Happens to me as well

Have you found any solution for this?

[dharmiksoni]

@Kamaldeep-j No solution found. But i can tell you that this is not happening in production environment / build. This error with local/dev environment. kindly share details if issue found in production env/build.

[NomanGul]

We are also facing this issue. +1

[tauqeerabbas87]

We are facing exactly the same issue. Can anyone suggest some work around?

[atull]

We are facing similar issue. Device: iPad Browser: Chrome 87

ReactJs Web application is showing blank white page when application left idle for few seconds (within a minute). This is happening only in Production.

Has anyone found the solution on this issue?

[eddiemonge]

This is happening only in Production.

Using the built/minified files? Are there any console logs for it?

[Azaliya1995]

same issue

[pullatjunaid]

Same issue here too.

[Kiranprajapati2719]

Same issue. Any updates?

[henryhs97]

Same issue here.

[sangroya]

same issue

[stanyq4]

We are experiencing a similar issue without a clear reproducible pattern.

Have anyone dug deeper to understand the root cause? Memory leak/High CPU?

Thank you.

[henryhs97]

We are experiencing a similar issue without a clear reproducible pattern.

Have anyone dug deeper to understand the root cause? Memory leak/High CPU?

Thank you.

Only thing I was able to spot during debugging is that the react DOM does not seem to be mounted. If you check the Elements tab in your browser you'll notice that react did not load at all. The root div is empty. Why it does not load... no clue.

[chihangc]

Same issue here. The same error message showed in the console after ide for 3 hours.

[stevewarsa]

Same issue here. (production build) If I leave a react app open in mobile chrome browser tab overnight, when I activate that tab in the morning, I get a blank white page. However if I refresh the page, the app loads and works properly. This behavior is not seen on other apps I developed in Angular

[kazinayem2011]

Facing the same issue. Any way to solve this?

[aizaz-react]

@Kamaldeep-j No solution found. But I can tell you that this is not happening in the production environment/build. This error with the local/dev environment. kindly share details if an issue is found in the production env/build.

this error occurs in production also.

[tclaff]

I see the same error as well - also in production.

[aizaz-react]

My issue was a slow internet connection caused by stripe. I solved this issue with error boundaries. so whenever a strip error occurs it shows the error boundary's fallback where I place the refresh button.

[saiho-ip]

I've experienced the same issue. You may try to put setInterval function setInterval(() => { console.log("hello")}, 1000) The purpose of doing that is to keep the react application awake. It may not be a proper way to fix this issue, but it works for me. I hope this will help

[kazinayem2011]

I've experienced the same issue. You may try to put setInterval function setInterval(() => { console.log("hello")}, 1000) The purpose of doing that is to keep the react application awake. It may not be a proper way to fix this issue, but it works for me. I hope this will help

Doesn't it consume memory?

[omAthalye]

Facing the same issue, only happening on chrome for me. Works perfectly on firefox.

[TheJazzDev]

Facing the same issue, only happening on chrome for me. Works perfectly on firefox.

I'm facing the same issue for the past 2 weeks too.... Only happen in production/build.... Not in development... Please has anyone find a solution?

[bhushan-patil-official]

I am also facing the same issue. Clearly this issue is still not closed. Can someone re-open this issue?

[msufyan634]

I am also facing the same issue when i run the reactjs project build locally.

[jackamondo]

I am also seeing this issue with a react based Zendesk app, it loads fine but when I navigate away from that chrome tab and come back to it for almost any amount of time (I can be off tab for as little as ~2s and come back to it) it will be blank for some time and then load in, the amount of time it is blank is often between 10 to 45s but can be longer. I am using Vite.

[adriencarbonaro]

I am also seeing this issue with an Electron + Vite + React app. Please re-open the issue.

[aidanbrewis]

I am experiencing the same issue in production, it's happening every time on mobile when the mobile browser is exited and then reopened multiple hours later.

[chuliomartinez]

Maybe this will help someone.

When deploying webpack app the js bundle name changes (in order to bust caching and forcing the browser to load the file).
When a user goes back to an inactive tab of our app, the browser tries to "revive" it.

However the index.html is not reloaded, only re-executed.

The browser thus tries to load a js script which is no longer there (because the bundle js has a new file name).
The server responds with a 404 HTML file - causing the JS syntax error you see in the console.

What can you do?
Add this event handler directly in a script block in your index.html

 var unhandledErrorDefaultHandler = function (event) {
        console.log("UNHANDLED ERROR:" + event.message);
        if (event.message === "Uncaught SyntaxError: Unexpected token '<'") {
          var lastreload = localStorage.getItem("error_reload");
          if(lastreload && (+lastreload + 10000) > new Date().valueOf() ) {
            console.log("Error loop detected");
          } else {
            localStorage.setItem("error_reload", new Date().valueOf());
            alert("Application was updated, and will be reloaded.");
            window.location.reload();
          }
        }
        return false;
     };
     window.addEventListener("error", unhandledErrorDefaultHandler);

[htutwaiphyoe]

Vite + React Project. it is happening for me

[ericlyoung]

Maybe this will help someone.

When deploying webpack app the js bundle name changes (in order to bust caching and forcing the browser to load the file). When a user goes back to an inactive tab of our app, the browser tries to "revive" it.

However the index.html is not reloaded, only re-executed.

The browser thus tries to load a js script which is no longer there (because the bundle js has a new file name). The server responds with a 404 HTML file - causing the JS syntax error you see in the console.

What can you do? Add this event handler directly in a script block in your index.html

 var unhandledErrorDefaultHandler = function (event) {
        console.log("UNHANDLED ERROR:" + event.message);
        if (event.message === "Uncaught SyntaxError: Unexpected token '<'") {
          var lastreload = localStorage.getItem("error_reload");
          if(lastreload && (+lastreload + 10000) > new Date().valueOf() ) {
            console.log("Error loop detected");
          } else {
            localStorage.setItem("error_reload", new Date().valueOf());
            alert("Application was updated, and will be reloaded.");
            window.location.reload();
          }
        }
        return false;
     };
     window.addEventListener("error", unhandledErrorDefaultHandler);

THIS is the solution everyone is looking for