Game kicking people back to start screen

frnsys commented 2 years ago

https://user-images.githubusercontent.com/1059947/159277754-704b8ffb-1f79-4f1b-84db-c463a15dd449.mov

From the video it looks like a page refresh was triggered; so this may be something like pull-to-refresh on iOS (so far the only reports of this have been on iOS)

If so, see: https://stackoverflow.com/questions/69261011/disable-pull-to-refresh-in-ios-15-safari

frnsys commented 2 years ago

We only have one reload trigger and it's if the player clicks the "Restart Game" button. So it's not that. I don't know that any other JS error could cause a reload all by itself

frnsys commented 2 years ago

This just occurred for me on an iPhone 7 (Safari). No idea what triggered it

frnsys commented 2 years ago

Best I can tell is it's some memory related thing. Hugely frustrating because it just happens without warning or any message indicating why. I should look into the game's memory footprint.

frnsys commented 2 years ago

Reading around a bit, this seems to also be a problem with desktop Safari as well and is a "feature" (?). A lot of people complaining about it as it happens on other major sites (e.g. video streaming sites) and doesn't seem to be any way to turn it off.

I did a quick look at the memory footprint of the game and it doesn't seem extreme at all...will keep digging though

frnsys commented 2 years ago

So by far the largest contributor to memory use is the 3d globe and its surface textures. Maybe we can just turn those off on mobile devices?

frnsys commented 2 years ago

Re-watching the first video there is a brief flash of the message "This webpage was reloaded because a problem occurred."

Just looking around this vague message can be from a number of causes. Not sure how to find out more info...there does not seem to be an easy way to identify the root cause other than trial and error.

From here: https://stackoverflow.com/questions/52595504/ios-safari-crashing-a-problem-repeatedly-occured seems like yes it could be memory-related (seems to be the most cited cause), even if the page is not particularly memory-intensive. Or related to CSS animations (of which we have a few).

The commit above reduced the memory footprint by something like 20-25% so hopefully that helps.

frnsys commented 2 years ago

Got another report about this which confirms that it's memory-related...so need to figure out how to reduce that further

frnsys commented 2 years ago

Reading around this seems to be a very common issue with Safari--where it will refresh pages while people are in the middle of using them (causing people to lose progress on a document etc). See for example this thread, this thread, . I will look to see if there are any more memory reductions we can do, maybe specifically for Safari, but I won't stress out too much about it if this keeps happening.

frnsys commented 2 years ago

Notes:

The JS memory usage is around 40-50MB, in comparison Netflix is like 75MB (Edit: with devtools closed it goes down to 25-35MB)
But the overall memory footprint according to the Chrome task manager is almost 300MB (in comparison Netflix is like 160MB). (Edit: Actually looks like dev tools may have contributed to that--with dev tools closed it's also about 160MB.)
The production version has a smaller footprint (about 108MB, JS memory 15-25MB)

Using let result = await performance.measureUserAgentSpecificMemory(); gives ~107MB total and:

{
    "breakdown": [
        {
            "attribution": [],
            "bytes": 20980931, // 20.98MB
            "types": [
                "Shared"
            ]
        },
        {
            "attribution": [],
            "bytes": 0,
            "types": []
        },
        {
            "attribution": [
                {
                    "scope": "DedicatedWorkerGlobalScope",
                    "url": "http://localhost:8080/dist/src_earth_temp_worker_js.js"
                }
            ],
            "bytes": 1322587, // 1.32MB
            "types": [
                "JavaScript"
            ]
        },
        {
            "attribution": [
                {
                    "scope": "Window",
                    "url": "http://localhost:8080/"
                }
            ],
            "bytes": 15485052, // 15.48MB
            "types": [
                "Canvas"
            ]
        },
        {
            "attribution": [
                {
                    "scope": "Window",
                    "url": "http://localhost:8080/"
                }
            ],
            "bytes": 45403617, // 45.4MB
            "types": [
                "JavaScript"
            ]
        },
        {
            "attribution": [],
            "bytes": 1967256, // 1.96MB
            "types": [
                "DOM"
            ]
        },
        {
            "attribution": [
                {
                    "scope": "DedicatedWorkerGlobalScope",
                    "url": "http://localhost:8080/dist/src_earth_surface_worker_js.js"
                }
            ],
            "bytes": 22093496, // 22.09MB
            "types": [
                "JavaScript"
            ]
        }
    ],
    "bytes": 107252939 // 107.25MB
}

This is measured after: starting a new game, visiting each planning tab, then opening the projects page, then opening the processes page, and then returning to the plan page.

On a mobile device (isMobile = true):

{
    "breakdown": [
        {
            "attribution": [
                {
                    "scope": "Window",
                    "url": "http://localhost:8080/"
                }
            ],
            "bytes": 43062525, // 43.06MB
            "types": [
                "JavaScript"
            ]
        },
        {
            "attribution": [],
            "bytes": 1966944, // 1.96MB
            "types": [
                "DOM"
            ]
        },
        {
            "attribution": [
                {
                    "scope": "DedicatedWorkerGlobalScope",
                    "url": "http://localhost:8080/dist/src_earth_surface_worker_js.js"
                }
            ],
            "bytes": 3616107, // 3.61MB
            "types": [
                "JavaScript"
            ]
        },
        {
            "attribution": [],
            "bytes": 21051737, // 21.05MB
            "types": [
                "Shared"
            ]
        },
        {
            "attribution": [],
            "bytes": 0,
            "types": []
        },
        {
            "attribution": [
                {
                    "scope": "DedicatedWorkerGlobalScope",
                    "url": "http://localhost:8080/dist/src_earth_temp_worker_js.js"
                }
            ],
            "bytes": 1322587, // 1.32MB
            "types": [
                "JavaScript"
            ]
        },
        {
            "attribution": [
                {
                    "scope": "Window",
                    "url": "http://localhost:8080/"
                }
            ],
            "bytes": 6004876, // 6.00MB
            "types": [
                "Canvas"
            ]
        }
    ],
    "bytes": 77024776 // 77.02MB
}

Reductions mainly from the canvas and src_earth_surface_worker_js.js

frnsys / half_earth

Game kicking people back to start screen #169