Game freezes on startup on published empty project

[Piggspigg]

I’ve had a bug in my project for a while. If I download my game as a ZIP and publish it on Firebase Hosting, then navigate to it in Chrome it would sometimes freeze on startup. I get a 200 OK response, but there are no files retrieved showing in the DevTools in Chrome, and the page loads indefinitely without showing anything.

For quite a long time I thought it was just my (fairly large) project acting up, so I tried reproducing the problem in a blank project. And strangely enough, the freeze still happens. It doesn’t happen every time, but it’s possible to reproduce at almost 100% repro rate with the correct repro steps.

Steps to reproduce:

1. Create empty PlayCanvas project
2. Download a .zip file of the project (either through the editor button or the rest api, I tried both)
3. Unzip and deploy to Vercel/Firebase Hosting
4. (only needed once) Navigate to the URL once in Chrome (so that the page will be “suggested” in the address bar dropdown in Chrome)
5. Navigate to the URL using the “suggested” dropdown that appears when typing a URL in the address bar in Chrome

This has a near 100% repro rate of the freeze.

For some reason I figured the freeze was due to the hosting at Firebase Hosting, so I migrated the project to Vercel. The problem persisted. Just to be sure I tried hosting the project at a third server, which just had a simple FTP upload and public_html folder. The problem still persisted. However, I do not get the problem if I use the “Publish to PlayCanvas” option in the editor. That deploys the build to AmazonS3 I believe, but the sourcecode is not identical to that of a downloaded zip build.

I use the latest engine (2.8.2), but just to be sure I tried using an older version of the engine, 1.77-something. The problem still persisted.

As I have been debugging I’ve realized it’s in the initialization of the engine that something goes wrong. I even narrowed it down to the creation of the render device. If I create the render device, the freeze happens, if I skip creating the render device (and return a dummy device) the freeze never happens.

I haven’t been able to reproduce this problem in any other browser than Chrome. So this made me think that Chrome might have a bug or my version is outdated. So I updated Chrome to latest version. The problem persists.

I also figured that the problem might be related to my personal setup, so I tried on another PC. The problem persists.

I figured it might be Windows/PC related, so I tried on an Android phone. The problem persists.

I figured it might be driver issues, so I updated my NVIDIA drivers to latest. The problem persists.

Since I narrowed the freeze down to a specific line related to creating the graphics device (more specifically this line in __ start __.js:159 createGraphicsDevice() pc.createGraphicsDevice(canvas, gfxOptions).then((device) => { I figured it was related to the graphics device I’m using. So I tried changing the project to use WebGPU (instead of WebGL 2.0). That did in fact remove the freeze. However I don’t want to force my project to be run on WebGPU.

TL;DR - The things I’ve tried:

• Large project & empty project - Problem persists
• Download zip through editor & through REST api - Problem persists
• Download zip and publish & “Publish to PlayCanvas” - Problem only appears on zip published builds
• Different hosting (Firebase/Vercel/rawdogging) - Problem persists
• Old (v1) engine & new (v2) engine - Problem persists
• Chrome & Edge/Firefox - Problem only appears in Chrome
• Windows/PC & Android - Problem persists
• Old graphics driver & updated graphics drivers - Problem persists
• Different PCs & different phones - Problem persists
• WebGL 2.0 & WebGPU - Problem only appears in WebGL

For anyone who is interested in reproducing the problem, here is my Vercel deployed empty project:
https://executive-golf-dev.vercel.app/

For anyone who is interested in taking my empty project and downloading a zip to deploy to your favourite hosting site (you can of course just create your own empty project to be sure it’s really empty):
https://playcanvas.com/project/1361558/overview/debugging-project

Bonus - for anyone who actually read this far, you can play an early version of my actual project here:
https://executive.golf

I’m currently at a loss. Any input on how to solve the issue is highly appreciated.

[mvaligursky]

I tried to reproduce this with https://executive-golf-dev.vercel.app/ using your repro steps (type ‘ex’ and select the url from drop down menu)

On Mac book pro and Chrome 137.0.7151.120 I cannot reproduce this.

[Piggspigg]

I’m on Chrome version 138.0.7204.97, and have 100% repro.
On my Android phone I have to open a tab, paste the URL, enter page a few times, but it eventually happens 100%. On Chrome v137.0.7151.115.

And this has happened on my main project for a few months (have only recently tried with an empty project), on several computers and phones.

[Piggspigg]

Also, if it doesn’t happen on the first try, you might have to open another empty tab, then type the URL again, etc. Sometimes even a few times.

I have not, however, tried on Mac before. Only PC and Android.

[mvaligursky]

By the way, ChatGPT’s suggestions:

Check and Fix All MIME Types

Ensure your .wasm, .js, and other files are served with correct types:

plaintext

CopyEdit

.wasm → application/wasm  
.js → application/javascript  
.json → application/json  

On Firebase Hosting and Vercel, explicitly declare these in firebase.json or vercel.json if needed.

Set crossorigin Attribute Explicitly

For canvas and any dynamically loaded assets, make sure the attribute crossorigin="anonymous" is set to avoid silent fetch errors in Chrome.

[yaustar]

I can’t reproduce either. https://executive-golf-dev.vercel.app/ works fine for me

Chrome 137.0.7151.120

[Piggspigg]

Thanks, that’s not a bad suggestion. However, the problem persists. I set up a secondary site:
https://executive-golf-staging.vercel.app/

I added the suggested explicit MIME types, and added access control headers as such:

vercel_json = {
    "headers": [
      {
        "source": "/(.*)\\.wasm",
        "headers": [
          {
            "key": "Content-Type",
            "value": "application/wasm"
          },
          {
            "key": "Access-Control-Allow-Origin",
            "value": "*"
          }
        ]
      },
      {
        "source": "/(.*)\\.js",
        "headers": [
          {
            "key": "Content-Type",
            "value": "application/javascript"
          },
          {
            "key": "Access-Control-Allow-Origin",
            "value": "*"
          }
        ]
      },
      {
        "source": "/(.*)\\.json",
        "headers": [
          {
            "key": "Content-Type",
            "value": "application/json"
          },
          {
            "key": "Access-Control-Allow-Origin",
            "value": "*"
          }
        ]
      },
    ]
  }

I don’t think I can in an easy way set the crossorigin=“anonymous” for all loaded files, but I am hosting on my files on the same server, so CORS (hopefully) shouldn’t be the issue.

@yaustar
Dang, are you on PC? I just tried on another PC, and the problem was there as well. Both me and my development partner (who is in a completely different country) both get it on both our phones and PC. It’s super strange if we’re the only ones.

[Piggspigg]

Also, this is complete insanity. But we just tried it again. And it only happens (or at least happens significantly more frequently) if we use the arrow keys and enter key to “navigate” down the “suggestion” drop-down in the address bar. I know it doesn’t make any sense, but we both get it 100% if we do.

Revised steps to reproduce:

1. Make sure https://executive-golf-dev.vercel.app/ has been visited once (so that the URL appears in Chrome suggested addresses dropdown that appears when typing in the address bar)
2. Open a new tab in Chrome
3. Paste the text “https://executive-golf-dev.vercel.app/” into the address bar in Chrome
4. Navigate to the URL in the “suggestion” drop down using the arrow keys and press enter (typically down arrow, up arrow, enter)
5. (optional) If the freeze doesn’t happen - Repeat from Step 2.

[LeXXik]

Works fine for me. Win11, Chrome.

[mvaligursky]

Cannot repro when using arrows either.
Do you maybe have some Chrome plugins? Try incognito mode as well.

[Piggspigg]

You could be right that it might be related to some Chrome plugin. Something both me and my colleague use… I don’t use much except AdBlock though. I should cross check our settings.

Incognito still freezes. Sorry about the worst quality video ever, but this is me trying it in a clean incognito window.

@LeXXik So maybe it’s just us… but the probability of both me and my partner have it but nobody else. Thanks for testing!

[Piggspigg]

I disabled all my chrome extensions now. It still freezes. I’m going to see if I can somehow create a completely new profile in Chrome.

Yep, I could create a completely fresh new profile in Chrome. And it doesn’t freeze!

So, something is up with my… Profile…in Chrome??? And same problem with my partners profile.

EDIT:
For me, using a Guest profile in Chrome removes the freeze completely (so far)
For my colleague, using a Guest profile still freezes

[LeXXik]

Open network tab in dev tools and hit refresh. See, if there are some resources it fails to reach. Maybe your DNS fails to resolve some address? Otherwise, looks like a local browser issue.

Also, try disabling cache:

[Piggspigg]

@LeXXik those are really good tips, and I’ve checked, double-checked and tripple-checked them before. I’ve also added no caching to the site headers etc.

But I’ll try again.

One of the problems is that nothing actually shows up in DevTools when the freeze happens. Not even index.html finishes loading, so everything is completely empty. The console is empty as well.

As I wrote on one of my previous posts, I tried uncommented the initialization of the render device in the engine, and then it stopped freezing. It just makes me strongly believe that DNS/caching isn’t the issue.I believe. For one reason or another the render device probably fails (maybe even during parsing of the code) which makes the index.html GET never finish. But I’m far from an expert in web and JavaScript so I can’t say for sure.

[LeXXik]

Well, hard to say. Probably worth checking the server logs as well.

[LeXXik]

Actually, I met the same issue today, but with PlayCanvas examples here:

https://playcanvas.vercel.app/#/misc/hello-world

It was forever loading. After closing browser it opened fine.

I think it is something with vercel service.

[Piggspigg]

You’re right. I actually get the freeze on that example as well. Dang.

Thing is, I tried hosting on both Vercel, Firebase Hosting and Loopia. And they all have the same issue.

However the common denominator (which is different from Amazon S3 that the quick publishes in the editor use) is that Vercel, Firebase Hosting and Loopia all use Brotli (br) compression, while Amazon uses Gzip. That’s the only difference I’ve seen. And I actually do not get the freeze at all when the project is quick published to Amazon.

Sadly it’s not as easy to force Gzip on Vercel. I haven’t figured out how to do it. You can add headers as such

[
  {
    "source": "/(.*)",
    "headers": [
      {
        "key": "Content-Encoding",
        "value": "gzip"
      }
    ]
  }
]

but that doesn’t override the encoding. It just adds the option (?), or hints at which encoding is used. I don’t know, but adding Gzip like this just made the site not load at all because of incorrect compression.

Maybe I should set up an Amazon server too and check there as well. Completely ruling out Vercel being the problem.

[yaustar]

Maybe try something like this that modifies the request headers to disable brotli encoding?

Disable Brotli Compression - Chrome Web Store

[Piggspigg]

Just for fun I set up an AmazonS3 site with Cloudfront too. Seems like you have a lot more control there. I noticed when accessing the S3 buckets directly the assets were compressed with Gzip and as far as I could tell I didn’t get the freeze. However, the Cloudfront distribution seems to use Brotli as well, and I do get the freeze there. So Vercel is not the problem, but Brotli could be.

https://d1sbj964jgxwv7.cloudfront.net/

I’m going to try the Brotli compression disabling now, as suggested by yaustar, and see if that changes anything.

EDIT:
By the way, I made my S3 bucket access public for the website now, so that it’s possible to try without accessing directly without Cloudfront. It should remove the Content-Encoding, use http/1.1 protocol, etc.

http://executive-golf-dev.s3-website.eu-north-1.amazonaws.com/

[mvaligursky]

Interesting. It’s at a point you could create a chromium issue and let them have a look.
Perhaps download Chrome Canary to see if this is fixed in the future version aleady.