Content never loads if prefetching fails

[trbrc]

It appears that react-static has buggy or non-existent recovery after failure when preloading resources.

To Reproduce
Steps to reproduce the behavior:

1. Open a react-static site. For example, react-static.js.org. Let the page load.
2. Turn off your connection (turn off wifi or click "offline" in devtools > network)
3. Click "Documentation" or "Get Started!"
4. The content has preloaded and should show up despite your network being offline. However, it tries to preload additional content, which fails (you can see errors in the console).
5. Turn on your connection again.
6. Click e.g. "Changelog" in the sidebar navigation.
7. You get a 404 page even though you have a working connection and should be able to fetch the content.

Expected behavior
I expected react-static to try to fetch the content again if it failed. With the current behavior, the only way for users to recover is to do a "full" refresh of the page.

I believe it might possible to work around by importing axios and using interceptors, but it really seems like that should not be needed?

[trbrc]

I've patched the problem by using retry-axios, with a very high retry number, which should mean that axios will never fail to fetch in practice (instead it will just stall the request forever).

This is a workaround that happens to solve the issue, only because from the point of view of react-static the prefetch never fails, it just takes a very long time, so the buggy behavior above is never triggered. This means I have to implement a separate way to notify the user about why stuff isn't loading.

It would be much better if react-static could rely on e.g. an error boundary to handle failed requests when they happen, but still retry the request the next time the same route data is requested.

If someone has the same issue:

import axios from 'axios';
import * as rax from 'retry-axios';

axios.defaults.raxConfig = {
  retry: 100, // With the exponential backoff, this should be good for billions of years
  noResponseRetries: 100,
  onRetryAttempt() {
    // Insert code to display an error, if needed
  }
};

rax.attach();

axios.interceptors.response.use(response => {
  // Stop displaying the error, the network is working again
  return response;
});

[Dragomir-Ivanov]

It is not just that. On the 5.x.x version, if you open a page, then go to another page that has no Link or Prefetch components in it, and then you hit Browser reload, the current page will be reloaded, but then if you hit Browser Back button, the url will change to a perfectly valid path for your application, but since this path is not prefetched by react-static, 404 shows. I think react-static just needs to do cold reload on unknown paths.

[stale]

This issue has been automatically marked as stale because it has not had recent activity in 30 days. It will be closed in another 7 days if no further activity occurs. Thank you for your contributions.

[Dragomir-Ivanov]

Nope, not stale

[tannerlinsley]

This is fixed in the next version. Try the beta!

…

On Sat, Dec 8, 2018 at 12:40 PM Dragomir Ivanov ***@***.***> wrote: Nope, not stale — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#839 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFUmCUAy-cSjnFGNan0a_oPQDOyERwv3ks5u3BWPgaJpZM4X6pGt> .

[Dragomir-Ivanov]

Thanks a ton!

[Dragomir-Ivanov]

@trbrc Can you close this issue, stating that it is fixed in v6?

[tannerlinsley]

Fixed in v6

[trbrc]

So is this a won't fix for 5.x.x?

[tannerlinsley]

As of right now, I don't not know of a way to fix it in v5 without introducing a major overhaul of how the v5 components work. And it would likely be a breaking change. I'm open to discuss it though.