phoenixframework
Rendering LiveComponent or child LiveViews results in corrupted pages
Environment
- Elixir version (elixir -v): 1.13.1 and 1.13.4
- Phoenix version (mix deps): 1.6.12
- Phoenix LiveView version (mix deps): 0.17.11
- Operating system: Mac OS Monterey 12.5.1 (M1)
- Browsers you attempted to reproduce this bug on (the more the merrier): Safari, Chrome and Firefox
- Does the problem persist after removing "assets/node_modules" and trying again? Yes/no: Yes, bare Phoenix doesn’t have
node_modules
Actual behavior
POC repo: https://github.com/vfsoraki/liveview-delay-bug
The way to reproduce the bug is written in the readme of the repo. To reiterate:
- Clone the repo, set it up and run it
- Go to
localhost:4000 - Open browser console and execute
liveSocket.enableLatencySim(2000) - Angrily hit the tabs
- After a couple of tries, you should see an error similar to what’s in repo’s readme in browser console
Here’s a video showcasing it (Chrome):
https://user-images.githubusercontent.com/7745247/189134235-2085e7c0-4bdb-4353-b5ca-bb3dd90a6068.mov
What we found is that the error in browser console appears only if you have nested live components. If you only use live components in the main live view (and not inside live components) then you don’t see any error. But even in this case, LiveView misses updates after a couple of clicks. Here’s a video showcasing it (Chrome):
https://user-images.githubusercontent.com/7745247/189134469-d6535b03-94c4-4403-9c54-fc71e303c11c.mov
We’ve tried to corner this, but it seems not everyone can reproduce this. This may be related to M1 processors, 3 people tested this, two with M1 and one not. Only M1 owners could reproduce it. Nevertheless, this happened in our staging environment which (thank Zeus, yet!) isn’t running on M1.
We’re still not sure if it’s a bug in Elixir code, JS code, M1-specific or even not a bug but nevertheless more eyes will help to clarify it.
Expected behavior
There should be no error and page should be updated correctly.
