Vite fails to load modules in Chrome with net:ERR_FAILED error #17499

Open CyberAP opened 4 months ago

Describe the bug

If you try to load lots of modules at once using Vite the page could fail to load with net:ERR_FAILED code occasionally. This happens probably because JS module requests oversaturate Chrome networking and it fails to fulfil some of the requests. This bug doesn't affect Firefox.

At GitLab we had to engineer our own mitigation for this bug, but it's not fully fixed.

I don't know if the bug is caused only by Chrome, Vite or both. Vite shows no errors in the stdout when this happens.

https://github.com/vitejs/vite/assets/1462706/1d9fe744-b77c-4d5d-a335-c34be3e3cac8

Reproduction

https://gitlab.com/gitlab-org/gitlab-development-kit/-/blob/main/doc/index.md#one-line-installation

Steps to reproduce

This bug is only reproduced when Vite is in dev mode, so the reproduction environment is not that easy to set up. Using GitPod or similar services to setup the environment won't work because you need to have minimal latency with Vite dev server. Stackblitz didn't work for me at the moment because I wasn't able to handle a repo of Gitlab's size.

To fully reproduce it by yourself you'd need:

Install GitLab Development Kit (GDK)
Launch GDK
Go to https://gdk.test:3443/flightjs/Flight/-/merge_requests/4/diffs or any other merge request in GDK
Refresh the page until you see the bug

System Info

System:
    OS: macOS 14.5
    CPU: (10) arm64 Apple M1 Pro
    Memory: 45.34 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.12.2 - ~/.asdf/installs/nodejs/20.12.2/bin/node
    Yarn: 1.22.19 - ~/.asdf/shims/yarn
    npm: 10.5.0 - ~/.asdf/plugins/nodejs/shims/npm
  npmPackages:
    @vitejs/plugin-vue2: ^2.3.1 => 2.3.1 
    vite: ^5.3.1 => 5.3.1 

Browser:
  Arc: Version 1.47.0 (50866)-RC
  Chromium Engine Version 126.0.6478.36

Used Package Manager

yarn

Logs

No response

Validations

[X] Follow our Code of Conduct
[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
[X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
[X] The provided reproduction is a minimal reproducible example of the bug.

I meet the same ERROR! :(

Hope some way to fix the error

For me, Can only use disable-cache now

We're also hitting this issue in Chromium-based browsers when loading a page in dev mode that initially requests over 2,000 modules and other static resources. Turning off HTTP caching does work around the problem. I wonder if Chrome is exhausting the number of available file descriptors or some other system resource? If so, probably not much that can be done on the Vite side of things other than documenting the workaround and maybe pressing the Chromium team to investigate.

We had the same issue with chrome, it works fine in firefox and safari. There is a chrome bug open for this as well https://issues.chromium.org/issues/355006326 We resolved it by updating our Nginx server config to use the following below and it worked. The default in nginx is 1000 so if you go over that it seems like Chrome can't recover from it.

 keepalive_requests 10000;

 server {
    server_name exmaple.com;
    http2 on;
    listen 443 ssl ;
    ssl_session_timeout 5m;
    keepalive_requests 10000;
}

vitejs / vite