Stale sessions error out during navigate if a deployment occured after the page first loads

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I’m using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

It’s common for tabs to be left open for long and people people revisit these tabs again after a few days. Unfortunately Docusaurus hasn’t handled this case very well if a new deployment occured during a session and the user tries to navigate on stale sessions. Each Docusaurus page has a corresponding chunk and the stale versions of the website will still be referring to the old chunks but they don’t exist anymore in the new deployment. As a result, you see a progress bar at the top which never completes.

Reproducible demo

No response

Steps to reproduce

1. Open a Docusaurus site in a tab
2. Change some contents and push to the site
3. Go back to the tab and try to navigate by clicking on links or whatever

Expected behavior

Can navigate pages even on stale sessions.

Actual behavior

See that the spinner never completes. There’ll be an error in the browser console

Uncaught (in promise) ChunkLoadError: Loading chunk 484 failed.
(error: https://www.techinterviewhandbook.org/assets/js/b44c9e68.bc980405.js)
    at n.f.j (runtime~main.fc544bd8.js:1:8609)
    at runtime~main.fc544bd8.js:1:1418
    at Array.reduce (<anonymous>)
    at n.e (runtime~main.fc544bd8.js:1:1383)
    at f.b44c9e68 (main.a2ce0572.js:2:18693)
    at d (main.a2ce0572.js:2:365638)
    at main.a2ce0572.js:2:365913
    at Array.forEach (<anonymous>)
    at f (main.a2ce0572.js:2:365886)
    at h (main.a2ce0572.js:2:366532)

This is because the chunk names aren’t stable and change after a new deployment if the build changes.

I think a fix would be to perform a hard refresh if an error was encountered during navigation, e.g. a chunk cannot be loaded.

Another good fix to make would be to make the chunk names more stable and don’t change if the contents don’t change (I always thought that should be the default), at least the “damage” will be contained to the pages which have really changed. This doesn’t eliminate the need for the hard reload though.

Your environment

• Public source code: https://github.com/yangshun/tech-interview-handbook/tree/master/website
• Public site URL: https://www.techinterviewhandbook.org/
• Docusaurus version used: Docusaurus v2.0.0-beta.21
• Environment name and version (e.g. Chrome 89, Node.js 16.4): Chrome 102.0.5005.61, Node 16
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): macOS 12.3.1

Self-service

• I’d be willing to fix this bug myself.

[Josh-Cena]

I think you can try here:

https://github.com/facebook/docusaurus/blob/ec8230b7ba395b6b317b3e4bc3441e3d9b116651/packages/docusaurus/src/client/PendingNavigation.tsx#L68-L73

During preload, PendingNavigation itself is already receiving the new location as props, but it’s passing the old location down to the route element, so I’m not sure whether you need to use location.reload or location.assign to force navigation.

[Josh-Cena]

Aw, that’s interesting…

So do we just do a location.reload() when catching a preload error?