Skip to content

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

Open
@Sheraff

Description

@Sheraff

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions