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

Auto-reload on failed lazy route loading can only work once per session on Safari #3327

Open
Sheraff opened this issue Feb 4, 2025 · 0 comments · May be fixed by #3450
Open

Auto-reload on failed lazy route loading can only work once per session on Safari #3327

Sheraff opened this issue Feb 4, 2025 · 0 comments · May be fixed by #3450

Comments

@Sheraff
Copy link
Contributor

Sheraff commented Feb 4, 2025

Which project does this relate to?

Router

Describe the bug

This issue is a follow-up of #3262. The 4th issue mentioned in this PR hasn't been solved yet.

Basically: the system to auto-reload the app on navigation if a lazy route file failed to load is based on the error message. This error message is used as a sessionStorage key to ensure that we don't enter a reload loop if the same file fails to load twice during the same user session.

However, Safari does not include the file name in the error message, only Chrome and Firefox do. So on Safari

  • user opens the app
  • on the server: we deploy a new version of the app, all files get new hashes
  • the user tries to navigate, fails to load the route file
  • we store the error message in sessionStorage and reload the page (so far, everything is OK)
  • on the server: we deploy another version of the app
  • the user tries to navigate again, fails to load the route file
  • the error message is the same as before, we already have it as a key in sessionStorage, we do not reload the page

All this might make more sense looking at the source code: https://github.com/TanStack/router/blob/main/packages/react-router/src/lazyRouteComponent.tsx

Your Example Website or App

see below

Steps to Reproduce the Bug or Issue

Reproducing this on tanstack is a little complicated. But I have a repro that shows the network error: https://stackblitz.com/edit/vitejs-vite-ztyqvabt?file=src%2FApp.tsx

Just open that link on any browser and you'll see the error message directly on the page. If you open it on Chrome or Firefox, the error message includes "blob:foobar" (which is the name of the import in this weird demo), but if you open it on Safari, there is nothing unique about the error message.

Expected behavior

A user on Safari should be able to have their session "survive" more than 1 deployment, like in other browsers.

Screenshots or Videos

No response

Platform

  • OS: macOS
  • Browser: Safari
  • Version: 1.99.0

Additional context

Thread on discord where Manuel Shiller and I were talking about this issue: https://discord.com/channels/719702312431386674/1333557517254398065

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
1 participant