When a LiveView crashes, the front-end JavaScript will attempt to reconnect. Is there a way to disable this behaviour during development such that when a crash occurs, the LiveView does not attempt to reconnect at all?
In app.js, there are some utilities for modifying the LiveView’s socket but none that I see to completely prevent it from trying to reconnect.
If nothing else, this can be annoying during development when trying to view logs. More specifically for us, even during development, we might be making API calls to a third party. If the crash occurred after the API calls are made, then we can find ourselves making a lot of unnecessary external API calls while the developer sifts through the logs unless they remember to specifically navigate to another page in the web browser to terminal the LiveView from continuing to try to reconnect.
Yes the LiveView will slowly backoff, but we’d prefer if it just didn’t attempt to reconnect at all during development. Is that possible?
Edit
Looking through phoenix_live_view.js, I see there’s an option that can be passed in to LiveSocket called maxReloads that looks rather promising, but attempts to change to the value like 0 or 1 don’t seem to have any effect:
GitHub: phoenix_live_view.js#L4109
At the moment, my Chrome Console looks like the following:
phx-F8h520LCoZRUkAKB error: unable to join - {reason: 'join crashed'}
phx-F8h520LCoZRUkAKB destroyed: the child has been removed from the parent - undefined
phx-F8h520LCoZRUkAKB join: encountered 14 consecutive reloads - undefined
phx-F8h520LCoZRUkAKB join: exceeded 1 consecutive reloads. Entering failsafe mode - undefined
As I type this update, I’m up to 14 attempts to reload the page because I haven’t closed the browser tab. The reason it’s crashing is because I’m working on the original crash but, as I develop, I’m saving my work along the way. So when a file is saved, Phoenix detects the save and reloads the page. Since I haven’t yet fixed the issue, it keeps crashing as I continue to work through the problem.
That’s why in development it would be nice to have a way to disable this behaviour.
Solution
Looks like there is a solution if you set the maxReloads options and increase the failsafeJitter. The failsafeJitter defaults to 30,000 ms (30 seconds), so even with a low maxReloads value, the LiveView will still keep reloading every 30 seconds.
The following code in app.js effectively sets the reload timeout to infinity.
let liveSocket = new LiveSocket("/live", Socket, {
params: { _csrf_token: csrfToken },
maxReloads: 0,
failsafeJitter: 2147483647, // Max value allowed for setTimeout.
});
