fix(gatsby): fix infinite reloads when resources fail

[vtenfys]

• Check if resources fail (as before)
• Upon any failure, render static HTML instead of dynamically rendering the children
  • Upon initial failure, reload the page and mark the path as failed
  • Upon second failure, don't reload the page and unflag it (since it might have just been a temporary failure and we want it to retry the next time)

Fixes #10074

[pieh]

I'm not sure about using innerHTML - it will work for initial mount, but afterwards it would prevent page transitions if resources for next page failed to load? (as html markup hold in state is from first page). I'm thinking if we shouldn't just fail there (i.e. throw error)

[vtenfys]

afterwards it would prevent page transitions if resources for next page failed to load? (as html markup hold in state is from first page)

If we're online this won't happen, because upon the first failure we immediately reload the page - upon second failure (i.e. after reloading) we've already loaded the full HTML for the page which failed, so rendering static HTML will work correctly.

However, if we go offline then later come back online and try to visit that page, this could happen (since the flag will still be set) - so I agree with you it might be better to just throw an error. I'll do some more testing later and try out these different scenarios.

[vtenfys]

@pieh I did some testing and I think the current approach works best - if we throw an error (instead of returning static HTML), links stop working, because we've thrown an error internally, whereas returning static content doesn't cause this problem.

Also, re: the "offline then revisit" scenario which I thought might be a problem - it actually works fine, because we remove the flag on any subsequent page load (not necessarily just the same page).

[pieh]

I'll pull this and do some local testing and hopefully merge soon

[pieh]

This here show slight problem - when I start on /docs - html from that page is stored (constructor for EnsureResources is called just once - on first page). My second navigation (going to gatsby-starter-blog detail page) is when there are problems with loading resources and we get flash on very first page before we reload page.

Maybe getting innerHTML should be done straight in render function (yikes), so we don't flash stale content there? This is edge case, so I'd rather avoid updating state on each page transition here

[pieh]

🙏 Thanks @davidbailey00!