sveltejs / kit

web development, streamlined
https://svelte.dev/docs/kit
MIT License
18.73k stars 1.94k forks source link

Race-condition when pressing **Back** while the page is still loading when not using SSR #12924

Open aloisklink opened 2 weeks ago

aloisklink commented 2 weeks ago

Describe the bug

When loading a non-SSR page and pressing the browser's back button while the page is still loading, it's possible for current.url to still be the default value of null, which then causes the popState function to throw the following uncaught error:

Uncaught (in promise) TypeError: Cannot destructure property 'href' of 'object null' as it is null.
    at strip_hash (url.js?v=3a24e001:84:30)
    at client.js?v=3a24e001:2227:52

The error is from current.url being null in: https://github.com/sveltejs/kit/blob/e41a8e24b71cb9e9ee249ddfe732a3d0721d40bf/packages/kit/src/runtime/client/client.js#L2234, and seems to be have been introduced in https://github.com/sveltejs/kit/commit/aabe33c4f6097503c7dabf8a5b9a8a566981da2a

I've got a PR pending for this, but I'm not 100% on my fix, so I thought I'd make an issue just to be sure!

Reproduction

https://stackblitz.com/edit/sveltejs-kit-template-default-51wzhl?file=README.md

If I go to the /about page, which has contents:

export const prerender = false;
export const ssr = false;

export async function load() {
  await new Promise((resolve) => setTimeout(() => resolve(), 10_000));

  return { text: 'hello world' };
}

If I then refresh the page, then press the Back button on my mouse before it's finished loading the PageData, nothing happens (other than seeing the error in the console):

Screencast from 2024-10-31 20-45-32.webm

Logs

Uncaught (in promise) TypeError: Cannot destructure property 'href' of 'object null' as it is null.
    at strip_hash (url.js?v=718158da:84:30)
    at client.js?v=718158da:2227:52

System Info

~/projects/sveltejs-kit-template-default-51wzhl 59s
❯ npx envinfo --system --binaries --browsers --npmPackages "{svelte,@sveltejs/*,vite}"
Need to install the following packages:
envinfo@7.14.0
Ok to proceed? (y) y

  System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @sveltejs/adapter-auto: ^3.0.0 => 3.3.1 
    @sveltejs/kit: ^2.0.0 => 2.7.3 
    @sveltejs/vite-plugin-svelte: ^4.0.0 => 4.0.0 
    svelte: ^5.0.0 => 5.1.4 
    vite: ^5.0.3 => 5.4.10

Severity

annoyance

Additional Information

This is pretty minor, but I've got @getsentry setup on a SvelteKit site, and I'm noticing that it's happening quite a bit.

eltigerchino commented 5 days ago

I can't seem to reproduce the issue. After refreshing the page, the setTimeout prevents the page from loading immediately, and if I click the back button, it shows the Home page without any errors.

aloisklink commented 5 days ago

I can't seem to reproduce the issue. After refreshing the page, the setTimeout prevents the page from loading immediately, and if I click the back button, it shows the Home page without any errors.

Ah, that's my fault (it's my first time using Stackblitz)! For some reason, the Stackblitz had export const ssr = true;, and this bug only happens when SSR is disabled (maybe I was testing this previously, and I accidentally saved it).

Please try again (and if you still see export const ssr = true;, try disabling it)!