search

feat-agency / vite-plugin-webfont-dl

⚡ Webfont Download Vite Plugin - Make your Vite site load faster
MIT License
302 stars 11 forks source link

"connect ETIMEDOUT <Google IP>" in development #12

Closed Radiergummi closed 2 years ago

Radiergummi commented 2 years ago

Since a few days, sometimes the development server will be unresponsive when starting. After a minute or so, the log shows entries like this:

8:37:08 AM [vite] Internal server error: connect ETIMEDOUT 2a00:1450:400e:801::200a:443
      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1187:16)
8:37:08 AM [vite] Internal server error: connect ETIMEDOUT 2a00:1450:400e:801::200a:443
      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1187:16) (x2)
9:40:51 AM [vite] Internal server error: connect ETIMEDOUT 2a00:1450:4001:830::200a:443
      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1187:16)

Doing a reverse IP lookup, I found the IP points to ams15s22-in-x0a.1e100.net, with 1e100.net hinting to a Google server, so I suspected the web fonts plugin.
When I disable it, the error still shows up in the log, but the application builds and runs just fine.

So, my suspicion is this is related to the preload link tags in the index.html. As I don't really know how Vite works -- does the webfont plugin add link preloading, or does Vite do that on its own? Why is the timeout for the request so high, and why is there a crucial dependency on those requests?
I also tried enabling verbose and debug logging, but couldn't get any stack trace deeper than the one shown above. Do you have any idea whether the error could be related to web fonts, or how to debug this more efficiently?

0xb4lint commented 2 years ago

Hi @Radiergummi! We have fixed this issue with v3.1.1.

Before this release, the plugin tried to download the CSS from Google Fonts during build time (index.html). With v3.1.1 the CSS download happens only when your browser requests the webfonts.css, if there's any network issue you will get an error output and the webfont.css's X-Error response header will be populated with the error message.

If you experience any network issue in the future with Google Fonts (like no internet connection or firewall blocked request) the application will run smoothly (obviously without fonts).