Add timeout + abort to Link prefetching to prevent unclickable Links

[karlhorky]

Description

If the background prefetch request triggered by hovering <Link /> elements does not complete, subsequent clicks on the link appear to be broken.

Eg. Hovering over a link on a page that has not yet been prefetched (or is stale) leads to a prefetch requests to /page-data/app-data.json (due to the call to loader.loadPage() in cache-dir/navigation.js -> navigate()).

Steps to reproduce

1. Simulate a never-returning (pending) response to requests to /page-data/app-data.json. This can be done with eg. an Express server route in front of Gatsby that never returns a response.
2. Links no longer work, without any feedback to the user

Expected result

The links should go to the href location when they are clicked on.

Suggested solution

1. When the user clicks on a link
   1. no event.preventDefault() call - navigation to the href should work
   2. maybe: any prefetches should be hard aborted
2. Add timeout to prefetching functions

I would also suggest considering a general timeout for all other prefetches. Maybe built into a fetch wrapper.

Actual result

The links appear to be broken when clicked on (more keywords: non functional, not working)

Environment

  System:
    OS: macOS 10.15.5
    CPU: (4) x64 Intel(R) Core(TM) i7-6567U CPU @ 3.30GHz
    Shell: 5.5.1 - /usr/local/bin/zsh
  Binaries:
    Node: 13.12.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.5 - /usr/local/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 83.0.4103.116
    Firefox: 77.0
    Safari: 13.1.1

Related issue

Links not working after period of inactivity: #4779

My comment on the issue: #4779 (comment)

[karlhorky]

Not sure if this is related enough to this issue, but:

Maybe the request code could also have a try ... catch around it (in addition to the timeout), to prevent issues where failed pre-loading of assets causes JavaScript on the page to fail:

#20745 (comment)

[LekoArts]

Hi!

I'm closing this as a stale issue as in the meantime Gatsby 4 and related packages were released. You can check our Framework Version Support Page to see which versions currently receive active support. If this is a feature request, please create a discussion as we moved feature requests from issues to GitHub Discussions.

Please try the mentioned issue on the latest version (using the next tag) and if you still see this problem, open a new bug report. It must include a minimal reproduction.

Thanks!

[karlhorky]

I haven't seen this for a while, so probably fine that it's closed.