Gatsby: Gatsby Link error when rapidly changing pages

[janosh]

Steps to reproduce

Opening my personal site janosh.io (which I recently ported from Remark to MDX, maybe that's related since I didn't notice the following behavior before) and rapidly clicking links in the nav bar eventually results in a blank page. Reloading the page displays the error message "This site can’t be reached".

Doing a hard refresh (cmd + shift + R in Chrome) displays the page correctly. This seems to suggest that there's a problem with Gatsby Link. The Chrome console only shows

TypeError: n is not a function
    at fe02a7e7eb3227117962882a7cf3d7cc3b71fffa.js:1
    at t.unstable_runWithPriority (fe02a7e7eb3227117962882a7cf3d7cc3b71fffa.js:1)
    at di (fe02a7e7eb3227117962882a7cf3d7cc3b71fffa.js:1)
    at Da (fe02a7e7eb3227117962882a7cf3d7cc3b71fffa.js:1)
    at Va (fe02a7e7eb3227117962882a7cf3d7cc3b71fffa.js:1)
    at Wu (fe02a7e7eb3227117962882a7cf3d7cc3b71fffa.js:1)
    at t.unstable_runWithPriority (fe02a7e7eb3227117962882a7cf3d7cc3b71fffa.js:1)
    at di (fe02a7e7eb3227117962882a7cf3d7cc3b71fffa.js:1)
    at Qu (fe02a7e7eb3227117962882a7cf3d7cc3b71fffa.js:1)
    at Iu (fe02a7e7eb3227117962882a7cf3d7cc3b71fffa.js:1)

which makes this hard to debug. unstable_runWithPriority sounds a little bit like it might be related to prefetching. Any advice?

Environment

System:
  OS: macOS 10.14.6
  CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
  Shell: 5.3 - /bin/zsh
Binaries:
  Node: 12.10.0 - /usr/local/bin/node
  Yarn: 1.17.3 - /usr/local/bin/yarn
  npm: 6.11.3 - /usr/local/bin/npm
Languages:
  Python: 2.7.10 - /usr/bin/python
Browsers:
  Chrome: 76.0.3809.87
  Firefox: 68.0.2
  Safari: 13.0.1
npmPackages:
  gatsby: 2.15.26 => 2.15.26 
  gatsby-image: 2.2.21 => 2.2.21 
  gatsby-plugin-algolia: ^0.3.4 => 0.3.4 
  gatsby-plugin-catch-links: 2.1.10 => 2.1.10 
  gatsby-plugin-favicon: ^3.1.6 => 3.1.6 
  gatsby-plugin-google-analytics: 2.1.17 => 2.1.17 
  gatsby-plugin-lodash: ^3.1.7 => 3.1.8 
  gatsby-plugin-manifest: 2.2.18 => 2.2.18 
  gatsby-plugin-mdx: ^1.0.42 => 1.0.44 
  gatsby-plugin-netlify-cache: ^1.2.0 => 1.2.0 
  gatsby-plugin-offline: 3.0.9 => 3.0.9 
  gatsby-plugin-react-helmet: 3.1.8 => 3.1.8 
  gatsby-plugin-sharp: 2.2.25 => 2.2.25 
  gatsby-plugin-styled-components: 3.1.6 => 3.1.6 
  gatsby-remark-autolink-headers: ^2.1.10 => 2.1.11 
  gatsby-remark-code-titles: ^1.1.0 => 1.1.0 
  gatsby-remark-copy-linked-files: ^2.1.19 => 2.1.21 
  gatsby-remark-embed-video: 2.0.0 => 2.0.0 
  gatsby-remark-emojis: ^0.3.2 => 0.3.2 
  gatsby-remark-images: 3.1.23 => 3.1.23 
  gatsby-remark-katex: ^3.1.8 => 3.1.10 
  gatsby-remark-responsive-iframe: 2.2.18 => 2.2.18 
  gatsby-remark-smartypants: 2.1.9 => 2.1.9 
  gatsby-remark-sub-sup: ^1.0.0 => 1.0.0 
  gatsby-remark-vscode: ^1.2.1 => 1.2.1 
  gatsby-source-filesystem: 2.1.26 => 2.1.26 
  gatsby-transformer-sharp: 2.2.17 => 2.2.17 
  gatsby-transformer-yaml: 2.2.10 => 2.2.10 

[m-allanson]

If you build the site with gatsby build --no-uglify, do you get a more informative error message?

[janosh]

@m-allanson Thanks for the tip. To be clear, the error only occurs once the site is deployed. I can't trigger it locally, no matter how fast I try to switch pages. I just deployed a version of the site built with the --no-uglify option and the error message looks very similar:

[davidbailey00]

Hey @janosh! I remember chatting with you at Gatsby Days 👋😄

So it looks like there are two issues happening here - one is the <letter> is not a function message, which could indeed be caused by something related to MDX, and the other is ERR_FAILED on refresh.

I'm not so sure about the former, but the latter of these issues is related to the offline plugin - however, I can only reproduce the first issue when playing around with your site. Can you try upgrading all your Gatsby packages to the latest versions? I can see you're still on offline 3.0.0 when there have been some other versions released since to fix some issues so maybe this will partly fix the issue.

[janosh]

@davidbailey00 Thanks for taking a look at this!

The site was actually locally built and then deployed via Netlify's CLI. On my machine, I had upgraded to [email protected] but not yet pushed that to GH. And it looks like since 3.0.11, there have only been version bumps so far. So if you think it's a problem with the offline plugin, I don't think it's been fixed yet.

[davidbailey00]

Hmm, can you try clearing site data and see if the ERR_FAILED message still occurs? You can do this by opening dev tools -> Application -> Clear storage -> Clear site data (make sure you've only got one tab open with your site or it doesn't work properly).

[janosh]

I'd tried that as well. Sorry to say, the error persists.

[davidbailey00]

Can you try in a guest window? For me the blank page / undefined issue is still occurring but I can't reproduce the ERR_FAILED from offline plugin

[janosh]

With guest window I assume you mean incognito window? You're right, I'm not getting ERR_FAILED there!

Also, just to be clear, the error we're talking about is

Failed to load resource: net::ERR_FAILED

at www.google-analytics.com/analytics.js:1, right?

[davidbailey00]

With guest window I assume you mean incognito window?

There's also a guest profile:

Both have the effect of disabling extensions - the guest profile is just a bit more reliable since you can also choose to enable certain extensions in incognito, whereas they won't carry over to a different profile.

Also, just to be clear, the error we're talking about is...

I was thinking the error in your initial screenshot - the analytics error is either ad blocking, or CORS related.

[janosh]

I was thinking the error in your initial screenshot - the analytics error is either ad blocking, or CORS related.

Ah, sorry for my confusion. The odd thing is, I can't reproduce that exact behavior anymore. Maybe that was before clearing site data, can't quite remember.

What's still causing trouble at this point is rapidly clicking links eventually results in a blank page which is definitely caused by TypeError: <letter> is not a function. But if I refresh now, I get a functioning page again, no "This site can’t be reached".

[davidbailey00]

Okay, so the good news is that there is no longer an issue related to the offline plugin, so we've isolated it a bit :D

Bad news is I'm not so sure what's causing the undefined issue just yet

[janosh]

Anyone with any more ideas? This is proving quite hard to debug.

[janosh]

My bad, this was just a poorly implemented function I passed to useEffect which returned a string rather than a cleanup function.