TanStack / TanStack/router

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

Open
#3,327 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
15.1k
Forks
1.9k
Avg merge
1d 20h
Merged PRs (30d)
143

Description

Which project does this relate to?

Router

Describe the bug

This issue is a follow-up of https://github.com/TanStack/router/pull/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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in packages/react-router/src/lazyRouteComponent.tsx, where failed lazy route loading uses the error message as a sessionStorage key, and compare the behavior with the linked StackBlitz reproduction in Safari, Chrome, and Firefox. Done means Safari can recover after more than one deployment while still preventing a reload loop for repeated failures.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.