feat: retry failed revalidation caused by HDR

packages/remix-react/browser.tsx

@@ -30,6 +30,7 @@ declare global {
   };
   var __remixRouteModules: RouteModules;
   var __remixManifest: EntryContext["manifest"];
+  var __remixRevalidation: number | undefined;
   var $RefreshRuntime$: {
     performReactRefresh: () => void;
   };
@@ -139,6 +140,7 @@ if (import.meta && import.meta.hot) {
           }, 1);
         }
       });
+      window.__remixRevalidation = (window.__remixRevalidation || 0) + 1;
       router.revalidate();
     }
   );

packages/remix-react/data.ts

@@ -17,7 +17,7 @@ export function isCatchResponse(response: any): boolean {
   );
 }
 
-export function isErrorResponse(response: any): boolean {
+export function isErrorResponse(response: any): response is Response {
   return (
     response instanceof Response &&
     response.headers.get("X-Remix-Error") != null
@@ -40,7 +40,8 @@ export function isDeferredResponse(response: any): boolean {
 
 export async function fetchData(
   request: Request,
-  routeId: string
+  routeId: string,
+  retry = 0
 ): Promise<Response | Error> {
   let url = new URL(request.url);
   url.searchParams.set("_data", routeId);
@@ -59,7 +60,24 @@ export async function fetchData(
         : await request.formData();
   }
 
-  let response = await fetch(url.href, init);
+  if (retry > 0) {
+    // Retry up to seven times waiting 20, 40, 80, 160, 320, 640, and 1280 ms
+    // between retries for a total of 2540 ms before giving up.
+    await new Promise((resolve) => setTimeout(resolve, 2 ** retry * 10));
+  }
+
+  let revalidation = window.__remixRevalidation;
+  let response = await fetch(url.href, init).catch((error) => {
+    if (
+      typeof revalidation === "number" &&
+      revalidation === window.__remixRevalidation &&
+      error?.name === "TypeError" &&
+      retry <= 7
+    ) {
+      return fetchData(request, routeId, retry + 1);
+    }
+    throw error;
+  });
 
   if (isErrorResponse(response)) {
     let data = await response.json();