search

phoenixframework / phoenix_live_reload

Provides live-reload functionality for Phoenix
MIT License
315 stars 90 forks source link

Browser freezing for two minutes on LiveReload #129

Closed tomtaylor closed 12 months ago

tomtaylor commented 1 year ago

Our team is experiencing an intermittent bug when LiveReload refreshes. The browser sometime hangs for two minutes exactly when the page refreshes after a template or CSS change. Observer shows a spike in CPU usage at the beginning of the refresh, and then the browser hangs in waiting. After 2 minutes, the page load completes.

Killing the server and starting again seems to fix this temporarily, until it happens again. It seems to exhibit in both Chrome and Firefox.

There's a thread on the Elixir Forum about this, with some others experiencing similar symptoms. https://elixirforum.com/t/backend-sent-response-in-log-but-browser-stuck-loading-for-precisely-2-minutes/46864

Is there a known issue that might be related to this? Can we help provide any more debug info? What would be useful?

sharpfun commented 1 year ago

@tomtaylor Had same issue! Try to set interval to 1 second in your dev.exs. Default 100ms is not enough.

config :my_app, MyAppWeb.Endpoint,
  live_reload: [
    interval: 1000,
tomtaylor commented 1 year ago

@tomtaylor Had same issue! Try to set interval to 1 second in your dev.exs. Default 100ms is not enough.

Thanks! I couldn't quite follow why that would be the case. It looks like the default is for the client to wait 100ms after receiving a message from the server that the compile assets have updated. Do you know why extending this to 1s helps?

sharpfun commented 1 year ago

Glad that it works! :smile: I suppose that template or css isn't compiled fast enough for reload request, and server was not responding. If you set interval higher to 1 second, then client tries to reload page only after 1 second (instead of 100ms).