fix(gatsby): fix infinite reloads when resources fail (gatsbyjs#10141)

- 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 gatsbyjs#10074

packages/gatsby/cache-dir/ensure-resources.js

@@ -92,25 +92,54 @@ class EnsureResources extends React.Component {
     return shallowCompare(this, nextProps, nextState)
   }
 
-  render() {
+  shouldRenderStaticHTML() {
+    const { localStorage } = window
+    const { href, pathname } = window.location
+
     // This should only occur if the network is offline, or if the
     // path is nonexistent and there's no custom 404 page.
     if (
       process.env.NODE_ENV === `production` &&
       !(this.state.pageResources && this.state.pageResources.json)
     ) {
-      // Do this, rather than simply `window.location.reload()`, so that
-      // pressing the back/forward buttons work - otherwise Reach Router will
-      // try to handle back/forward navigation, causing the URL to change but
-      // the page displayed to stay the same.
-      const originalUrl = new URL(location.href)
-      window.history.replaceState({}, `404`, `${location.pathname}?gatsby-404`)
-      window.location.replace(originalUrl)
-
-      return null
+      if (localStorage.getItem(`___failedResources`) === pathname) {
+        // Maybe it will work again in the future, so remove the flag
+        localStorage.removeItem(`___failedResources`)
+        console.error(
+          `WARNING: Resources cannot be loaded for the pathname ${pathname} - ` +
+            `falling back to static HTML instead.\n` +
+            `This is likely due to a bug in Gatsby, or misconfiguration in your project.`
+        )
+      } else {
+        // Mark the pathname as failed
+        localStorage.setItem(`___failedResources`, pathname)
+
+        // Reload the page.
+        // Do this, rather than simply `window.location.reload()`, so that
+        // pressing the back/forward buttons work - otherwise when pressing
+        // back, the browser will just change the URL and expect JS to handle
+        // the change, which won't always work since it might not be a Gatsby
+        // page.
+        const originalUrl = new URL(href)
+        window.history.replaceState({}, `404`, `${pathname}?gatsby-404`)
+        window.location.replace(originalUrl)
+      }
+
+      return true
+    } else {
+      localStorage.removeItem(`___failedResources`)
+      return false
     }
+  }
 
-    return this.props.children(this.state)
+  render() {
+    // TODO: find a nicer way to do this (e.g. React Suspense)
+    if (this.shouldRenderStaticHTML()) {
+      const __html = document.getElementById(`___gatsby`).innerHTML
+      return <div dangerouslySetInnerHTML={{ __html }} />
+    } else {
+      return this.props.children(this.state)
+    }
   }
 }
 

packages/gatsby/cache-dir/production-app.js

@@ -11,7 +11,6 @@ import {
   RouteUpdates,
 } from "./navigation"
 import emitter from "./emitter"
-window.___emitter = emitter
 import PageRenderer from "./page-renderer"
 import asyncRequires from "./async-requires"
 import loader, { setApiRunnerForLoader } from "./loader"