Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[v1.0.0b] PWA shows white-screen when logged in (sometimes) #1077

Closed
5 tasks done
14wkinnersley opened this issue Mar 21, 2022 · 84 comments · Fixed by #1086, #1526 or #1992
Closed
5 tasks done

[v1.0.0b] PWA shows white-screen when logged in (sometimes) #1077

14wkinnersley opened this issue Mar 21, 2022 · 84 comments · Fixed by #1086, #1526 or #1992
Labels
bug: confirmed bug Something isn't working help wanted Extra attention is needed

Comments

@14wkinnersley
Copy link

First Check

  • This is not a feature request
  • I added a very descriptive title to this issue.
  • I used the GitHub search to find a similar issue and didn't find it.
  • I searched the Mealie documentation, with the integrated search.
  • I already read the docs and didn't find an answer.

What is the issue you are experiencing?

After setting up Mealie 1.0.0b, I added a homescreen shortcut within iOS, and initially it worked, it let me login. After closing out, and closing out from the iOS “task manager”, It will no longer load correctly. I see the login screen for a brief moment, and then it goes to a white page. This only occurs for the iOS Add to Homescreen function.

Deployment

Docker (Linux)

Deployment Details

I run this within docker on Ubuntu Server 20.04 Headless. I run the site behind Nginx Proxy Manager.

@hay-kot
Copy link
Collaborator

hay-kot commented Mar 21, 2022

I noticed this today as well on Android, seems intermittent for me. Will dig into it this week.

@hay-kot hay-kot added the bug Something isn't working label Mar 23, 2022
@hay-kot hay-kot changed the title iOS Add to HomeScreen not working correctly [v1.0.0b] PWA shows white-screen when logged in (sometimes) Mar 23, 2022
@hay-kot
Copy link
Collaborator

hay-kot commented Mar 23, 2022

Okay, so I was able to replicate this pretty easily on iOS, Android, and MacOS. I'm thinking it has something to do with SSR but I'm pretty stumped on what's causing the issue.

Hoping someone else might have an idea of what's going on.

As a temporary work around, if you can tap login fast enough it will let you pass the login screen, which I know is not ideal 😞

Edit: I'm an idiot and used fetch on the server. See here

Should be fixed when that PR is merged

@hay-kot hay-kot added the help wanted Extra attention is needed label Mar 23, 2022
hay-kot added a commit that referenced this issue Mar 23, 2022
hay-kot added a commit that referenced this issue Mar 23, 2022
* remove fetch / use axios fix #1077

* revert checkbox change

* add password peek

* fix bool check
@hay-kot hay-kot linked a pull request Mar 23, 2022 that will close this issue
@zierbeek
Copy link
Contributor

thinks this is still happening?

@hay-kot
Copy link
Collaborator

hay-kot commented Mar 23, 2022

thinks this is still happening?

I haven't been able to replicate it with the most recent build. Make sure you grab the latest build of the nightly containers. You might also need to reinstall the PWA.

@14wkinnersley
Copy link
Author

thinks this is still happening?

I haven't been able to replicate it with the most recent build. Make sure you grab the latest build of the nightly containers. You might also need to reinstall the PWA.

I did some testing:

It works ✅ if I add the PWA homescreen icon for the direct local IP Address to Mealie.

It does not ❌ work if mealie is behind a reverse proxy (NGINX Proxy Manager in my case) ie: accessing mealie from https://mealie.domain.com

@zierbeek
Copy link
Contributor

issues are indeed gone after a removal :) both on Nginx and local :)

@14wkinnersley
Copy link
Author

issues are indeed gone after a removal :) both on Nginx and local :)

Hmm ill do some more testing. It only works the first time behind NGINX for me. After I close out the PWA from the "task manager" it no longer works, and I get the same issues as before. I did try setting it up on a whole new subdomain and it still did not work. Do you use NGINX Proxy Manager?

@zierbeek
Copy link
Contributor

zierbeek commented Mar 23, 2022 via email

@hay-kot
Copy link
Collaborator

hay-kot commented Mar 23, 2022

Does this issues also occur on the Beta sites PWA?

https://beta.mealie.io/

Never-mind, I got it to fail. Back to the drawing board.

@14wkinnersley
Copy link
Author

Does this issues also occur on the Beta sites PWA?

https://beta.mealie.io/

Never-mind, I got it to fail. Back to the drawing board.

Just tested, no issues with the demo site.

@hay-kot
Copy link
Collaborator

hay-kot commented Mar 23, 2022

Yeah, this is thoroughly confusing. I think the PR I did resolved the core issue that was causing the error, but the PWA is doing some aggressive caching that is causing the pages not to render correctly.

It may be that you need to uninstall the PWA and delete all associated page data and re-install the PWA to get this to be resolved? I've done that and so far so good on my Ipad and Android phone and MacBook 🤞

@14wkinnersley
Copy link
Author

Yeah, this is thoroughly confusing. I think the PR I did resolved the core issue that was causing the error, but the PWA is doing some aggressive caching that is causing the pages not to render correctly.

It may be that you need to uninstall the PWA and delete all associated page data and re-install the PWA to get this to be resolved? I've done that and so far so good on my Ipad and Android phone and MacBook 🤞

No dice for me. I removed all PWA for it, and even setup access on a whole other domain, created the new PWA, and had the same issue. Ill keep doing some testing on my end with the reverse proxy and see if I can get anywhere.

@hay-kot
Copy link
Collaborator

hay-kot commented Mar 23, 2022

Bummer, I'd double check that you've got the latest build docker-compose pull && docker-compose up -d just in case.

@hay-kot
Copy link
Collaborator

hay-kot commented Mar 27, 2022

Checking in on this again. I haven't had the issue since updating and have been using it pretty regularly.

@14wkinnersley
Copy link
Author

Checking in on this again. I haven't had the issue since updating and have been using it pretty regularly.

I still have the issue on the latest update. Tried deleting and reinstalling the PWA. Just tried a few minutes ago. No help. Gave up on using it

@tbleiker
Copy link

Same here

  • Android 12 (Pixel 4a)
  • Docker (Linux), current nightlies, behind proxy (traefik)

@CarloDePieri
Copy link

My 2c about this:

  • as of today, the PWA is not working correctly on my android 11 device (pixel 2xl) and android 12 device (pixel 4a)

My setup is nightlies docker, behind traefik; this stack went up yesterday for the first time on this server so images are up-to-date.
On both device I also completely cleared the website data from the browsers (tried chrome, chrome-beta, firefox, kiwi) when reinstalling the pwa.

Thank you for all your work on this project!

@hay-kot
Copy link
Collaborator

hay-kot commented Apr 9, 2022

Not much I can do on this to troubleshoot since I can't replicate the issue with any of my devices. If anyone can troubleshoot on their end with a remote debugger with chrome or eq. and can provide some more information or ideas on what causing the issue that would be really helpful.

@14wkinnersley
Copy link
Author

Not much I can do on this to troubleshoot since I can't replicate the issue with any of my devices. If anyone can troubleshoot on their end with a remote debugger with chrome or eq. and can provide some more information or ideas on what causing the issue that would be really helpful.

I just tested this using even Microsoft Edge in Windows 11 by adding the "application" to my desktop and had the same issue. I can run debugger tools if needed but I dont really know what im doing with all that. I could create a dummy user account maybe for you to test if you need?

@CarloDePieri
Copy link

Not much I can do on this to troubleshoot since I can't replicate the issue with any of my devices. If anyone can troubleshoot on their end with a remote debugger with chrome or eq. and can provide some more information or ideas on what causing the issue that would be really helpful.

I can reproduce this behavior even on chrome (Version 99.0.4844.84 (Official Build) (64-bit)) on my linux machine (the build number of Mealie as reported in Settings -> General about -> Build is 10784b6 by the way).

How to reproduce on chrome on pc

  • Uninstall any previously installed pwa version
  • Clear all website data by clicking on 'clear site data' in the Application -> Storage tab of the Developer Tools (Menu -> more tools -> Developer Tools)
  • Install the pwa by pressing the button in the address bar or Menu -> Install Mealie...
  • In the newly installed pwa, log in. Everything should work correctly
  • Close the application
  • Open the pwa again by going to chrome://apps, apps tab (or by launching it by the shortcut created by your os)
  • The login menu flashes for a second, then a blank white screen appears.

All http request succeeded, but the console report an error:

7b44a51.js:2 TypeError: Cannot read properties of undefined (reading '_isDestroyed')
    at destroy (7b44a51.js:2:21512)
    at E (7b44a51.js:2:55951)
    at E (7b44a51.js:2:56050)
    at E (7b44a51.js:2:56050)
    at f.__patch__ (7b44a51.js:2:59472)
    at f.t.$destroy (7b44a51.js:2:36269)
    at destroy (7b44a51.js:2:21555)
    at E (7b44a51.js:2:55951)
    at f.__patch__ (7b44a51.js:2:59472)
    at f.t.$destroy (7b44a51.js:2:36269)

The js is mimified so it's not easly debugged: maybe later I'll manage to setup Mealie in dev mode and look further into this issue.

@CarloDePieri
Copy link

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

Good bot.

The issue is still relevant though!
I just reproduced it with a fresh nightly (beta3) installation following the step I outlined above.

@stale stale bot removed the stale label Jun 9, 2022
@articuno1au
Copy link

Just cross-linking. I started encountering this issue after installing the attempted fix for #1816. I've completely blown away the storage for the site and all cookies, but the issue persists.

I wasn't previously encountering the problem, so this is a new behaviour. Let me know if there's any testing I can perform for you.

I've got my configuration listed in #1816 (comment)

@hay-kot
Copy link
Collaborator

hay-kot commented Jan 6, 2023

@articuno1au, do you know the last good build number where you weren't experiencing the PWA error?

@hay-kot hay-kot added this to the v1.0.0beta-RC1 milestone Jan 6, 2023
@michael-genson
Copy link
Collaborator

FWIW I wasn't experiencing it before either, but that's because it logged me out every time I opened the PWA, so I never had the chance for the redirect to fail (because it never redirected).

So the issue still existed, it just basically got cancelled out by the login state not persisting

@hay-kot
Copy link
Collaborator

hay-kot commented Jan 6, 2023

Trying another fix

Will give it a try again once the build is complete. 🤞

@14wkinnersley
Copy link
Author

Trying another fix

Will give it a try again once the build is complete. 🤞

Tested and confirmed its operational for me across multiple devices! Thanks so much!!

@articuno1au
Copy link

articuno1au commented Jan 7, 2023

image

EDIT::
Actually, I can't confirm this is fixed on my end. I'm getting a JSON dump appearing in the PWA window when opening it

{
  "name": "Mealie",
  "short_name": "mealie",
  "icons": [
    {
      "src": "/_nuxt/icons/icon_64x64.af4555.png",
      "sizes": "64x64",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/_nuxt/icons/icon_120x120.af4555.png",
      "sizes": "120x120",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/_nuxt/icons/icon_144x144.af4555.png",
      "sizes": "144x144",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/_nuxt/icons/icon_152x152.af4555.png",
      "sizes": "152x152",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/_nuxt/icons/icon_192x192.af4555.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/_nuxt/icons/icon_384x384.af4555.png",
      "sizes": "384x384",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/_nuxt/icons/icon_512x512.af4555.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ],
  "start_url": "",
  "display": "standalone",
  "background_color": "#FFFFFF",
  "theme_color": "#E58325",
  "lang": "en",
  "title": "Mealie",
  "share_target": {
    "action": "/",
    "method": "GET",
    "params": {
      "title": "title",
      "text": "recipe_import_url"
    }
  }
}

I've cleared all the data, and same result. I've also confirmed I'm on the latest nightly docker container (might not have made it to Docker yet?).

@hay-kot
Copy link
Collaborator

hay-kot commented Jan 7, 2023

Actually, I can't confirm this is fixed on my end. I'm getting a JSON dump appearing in the PWA window when opening it

I was getting the same earlier today. Trying another fix, should be built soon.

https://github.com/hay-kot/mealie/actions/runs/3859534260

@michael-genson
Copy link
Collaborator

Latest one seems to work correctly!

@hay-kot
Copy link
Collaborator

hay-kot commented Jan 7, 2023

Looks to be working for me as well!

@articuno1au
Copy link

So, it's not working for me, but I'm unsure if I have the correct code.

I'm currently running the following front-end hash: sha256:400eb63197207faa11d1370f29abbf237dbf9b35628a0306cd85dabdd767b56c
back-end hash:
sha256:98fe68351473c00b596117fdd20e344dad8a1cf9b9b89be330f512e1cac0d76c

@hay-kot hay-kot reopened this Jan 7, 2023
@hay-kot
Copy link
Collaborator

hay-kot commented Jan 7, 2023

Didn't mean to close this, whoops!


@articuno1au, did you do the following?

To use the fix, be sure to

  • Delete your current PWA installation
  • Clear cookies and storage for the website.

@articuno1au
Copy link

articuno1au commented Jan 8, 2023

Didn't mean to close this, whoops!

@articuno1au, did you do the following?

To use the fix, be sure to

  • Delete your current PWA installation
  • Clear cookies and storage for the website.

Yeah, I cleared data. I just revalidated and am still seeing the same problem.

Scrub that. It seems to be resolved. I had been logging in then installing the PWA. I installed the PWA then logged in and it started working. I've tested a bunch of times, still working without issue. Not sure why that would make a difference.. Lgtm.

@SimSon2710
Copy link

  • Android 11, Samsung S10
  • Firefox 108.2.0
  • latest mealie nightly: v1.0.0beta-5 (container updated on 07.01.22) running on Ubuntu behind SWAG proxy

I can't confirm that it works :/

I uninstalled the PWA, deleted all browser data in firefox, installed the PWA w/o prior login and then logged in inside the PWA. This worked better than before, but when I closed the PWA and tried to reenter, mealie first asks me to enter my credentials, but then the screen turns blank as before.

@articuno1au
Copy link

@SimSon2710 - Just for isolation testing, do you want to try again with a clean browser like Chrome or Vivaldi? I found some weird caching stuff with the PWA.

@SimSon2710
Copy link

@articuno1au - I just tried both, completely new and clean installation of Vivaldi and Chrome, but the issue persist :/

@articuno1au
Copy link

Worth a try. I can't replicate on my end I'm sorry. Good luck getting it sorted.

@hay-kot
Copy link
Collaborator

hay-kot commented Jan 8, 2023

I just tried both, completely new and clean installation of Vivaldi and Chrome, but the issue persist :/

Up until the most recent builds I've been able to replicate the issue but now the PWA works as expected. As such, there's not much else I can do without any kind of ability to reproduce the issue. I would make sure / try the following

  • You've got the latest frontend container (nightly).
  • You've restarted your container since updating
  • Verify your browser isn't deleting cookies and session data on exit of the PWA (common in firefox)
  • Delete all installed versions of the PWA and clear session/cookies before re-installing
  • Try the PWA on the demo site and see if the same issue occurs https://demo.mealie.io/

If none of that works, I'd need to get some information from your browser console on your phone which is a whole thing... Let me know!

@Zipties
Copy link

Zipties commented Jan 8, 2023

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

Good bot.

The issue is still relevant though! I just reproduced it with a fresh nightly (beta3) installation following the step I outlined above.

Same here on the latest nightly.

@hay-kot are you still looking for someone to send debug logs?

@SimSon2710
Copy link

Sorry I haven't answered anymore, but I was lost under a heap of work. I just updated mealie, and now it seems to work fine!

@m10x
Copy link

m10x commented Feb 3, 2023

It works now for us, too! :) Thank you

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug: confirmed bug Something isn't working help wanted Extra attention is needed
Projects
None yet