oddnugget

oddnugget

Strategies for dealing with stale JS hooks in a frequently deployed app

We run a midsized LiveView app and deploy multiple times a day and have been having issues with javascript hooks running older versions than the server.

This causes major headaches when fixing bugs because it will sometimes take multiple days before everyone has gotten the updated javascript. Or when a liveview is refactored and no longer responds to events that an old hook sends out, but the old hook stays around and still sends those events.

The only way to get the new version of the javascript / css is to do a full page reload. We are using phx-digest and have wired up a banner shown when static_changed is true but our users tend to ignore it.

Approaches we’ve considered

  1. Force immediate reload when static_changed
    This would lead to loss of work, as form inputs would be cleared and form recovery wouldn’t have a chance to run.
  2. Intercepting <.link /> clicks and turning them into full page navigations
    It will most likely improve the situation somewhat, but there would still be a lot of cases where old javascript is active
  3. Save state to session storage and do a reload
    An option that would guarantee we get the newest javascript as fast as possible, but that would introduce a lot more complexity and essentially mean implementing logic that liveview already deals with. I did find this issue that speaks to an intent to implement this in liveview, but it seems it was abandoned in favor of a different approach.

How is everyone dealing with these kinds of issues? Are there any plans to implement more robust automatic reloads on asset changes in liveview?

Appreciate any advice or war stories. Thanks!

Most Liked

rhcarvalho

rhcarvalho

I understand LiveView doesn’t solve it out of the box because there is no one single correct solution.

You seem to be aware of the mechanisms to control what to do, and tradeoffs. Likely different pages/LiveViews would require distinct approaches instead of a global solution – highly dependant on your app and expected behavior.

What I can offer is to suggest keeping your code changes forward/backward compatible. It is similar to database migrations and code changes.

E.g. you can keep event handlers in place for some time after you remove them from client code. You may change the event behavior to notify the user they must refresh the page.

Are you looking for a uniform solution for all LVs or would your app qualify for a more granular choice of approach?

Where Next?

Popular in Questions Top

siddhant3030
Hi, I have to write a raw query for one of my project. But till now I have used ecto queries and don’t have much experience writing raw ...
New
Darmani72
If I have a post route which an argument: post /my_post_route/:my_param1, MyController.my_post_handler How would get the post params ...
New
chrisalley
ExUnit now has describe blocks which is a welcome addition coming from RSpec. In the docs, it states that nested hierarchies of describe ...
New
mgjohns61585
Could someone help me? I’m making my first elixir program, number guessing game. I can’t figure out how to convert the user’s guess from ...
New
jerry
Good day to you all. I have been struggling to get a query involving like and ilike to work. Can anyone assist me on this, please? pro...
New
jay1
Why is it that the mnesia database isn’t the most preferred database for use in Elixir/Phoenix?
New
freewebwithme
Using vs code and installed ElixirLS: support and debugger. And I got an error popped up on start up says Failed to run ‘elixir’ comma...
New
jason.o
In the code below, if the create action is not set to accept “extra_key” as an input, it errors out with a message shown above. Is there ...
New
chensan
I have a User schema with a :from_id field set to type :string: defmodule TweetBot.Repo.Migrations.CreateUsers do use Ecto.Migration ...
New
JorisKok
I have a server on AWS, and was running a load test using artillery. When looking at the Phoenix dashboard I see the Ports going to 100% ...
New

Other popular topics Top

sen
Hi All, I set a environment variables in dev.exs , like below code. when i start server, how can i set the ${enable} value? thanks. d...
New
albydarned
Hello all! I am typing this post from my new MacBook Pro with the M1 chip. I’m loving it so far, and will probably use it as my daily dr...
New
skosch
To my knowledge, put_in, Map.update etc. all have the one limitation of not automatically creating intermediate keys when needed (for exa...
New
greenz1
I have a phoenix application from which a user can download multiple(5-6) files of size 1MB. I couldn’t find anything related to sending ...
New
stefanchrobot
What’s the safe way to decode a JSON string into a struct? I want to avoid calling String.to_atom. Jason.decode can give me a map with st...
New
jason.o
In the code below, if the create action is not set to accept “extra_key” as an input, it errors out with a message shown above. Is there ...
New
dblack
I’ve got an issue with an app and I’ve no idea of how to troubleshoot it. I’m hoping someone here might have seen something similar. I p...
New
nsuchy
Hi. I’ve noticed that Windows Powershell has it’s own IEX command and you cannot access Elixir’s IEX due to the conflict. This isn’t a cr...
New
JakeBecker
TL;DR: I’ve just released an implementation of Microsoft’s IDE-independent Language Server Protocol for Elixir. It adds language support ...
1144 54120 245
New
lanycrost
Hi everyone! I need implement if…else if…else condition from my elixir code, and anymore of this control flow structures not work proper...
New

Latest on Elixir Forum

Elixir Forum

We're in Beta

About us Mission Statement