Auto retry lazy imports

Author: synzen

services/backend-api/client/src/features/feedConnections/components/DiscordMessageForm/index.tsx

@@ -17,7 +17,7 @@ import {
   Text,
 } from "@chakra-ui/react";
 import { yupResolver } from "@hookform/resolvers/yup";
-import { lazy, Suspense, useContext, useState } from "react";
+import { Suspense, useContext, useState } from "react";
 import { FormProvider, useFieldArray, useForm, useWatch } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { motion } from "framer-motion";
@@ -44,14 +44,15 @@ import {
 } from "../../../../contexts/UserFeedConnectionContext";
 import getChakraColor from "../../../../utils/getChakraColor";
 import { DiscordMessageChannelThreadForm } from "./DiscordMessageChannelThreadForm";
+import { lazyWithRetries } from "../../../../utils/lazyImportWithRetry";
 
-const DiscordMessageEmbedForm = lazy(() =>
+const DiscordMessageEmbedForm = lazyWithRetries(() =>
   import("./DiscordMessageEmbedForm").then(({ DiscordMessageEmbedForm: component }) => ({
     default: component,
   }))
 );
 
-const DiscordChannelConnectionPreview = lazy(() =>
+const DiscordChannelConnectionPreview = lazyWithRetries(() =>
   import("./DiscordChannelConnectionPreview").then(
     ({ DiscordChannelConnectionPreview: component }) => ({
       default: component,

services/backend-api/client/src/pages/index.tsx

@@ -1,7 +1,7 @@
 import { Route, Routes, Navigate } from "react-router-dom";
 import * as Sentry from "@sentry/react";
 import { Spinner } from "@chakra-ui/react";
-import { Suspense, lazy } from "react";
+import { Suspense } from "react";
 import Feed from "./Feed";
 import FeedFilters from "./FeedFilters";
 import FeedMessage from "./FeedMessage";
@@ -30,14 +30,15 @@ import { NotFound } from "./NotFound";
 import { SuspenseErrorBoundary } from "../components/SuspenseErrorBoundary";
 import AddUserFeeds from "./AddUserFeeds";
 import { MultiSelectUserFeedProvider } from "../contexts/MultiSelectUserFeedContext";
+import { lazyWithRetries } from "../utils/lazyImportWithRetry";
 
-const UserSettings = lazy(() =>
+const UserSettings = lazyWithRetries(() =>
   import("./UserSettings").then(({ UserSettings: c }) => ({
     default: c,
   }))
 );
 
-const Checkout = lazy(() =>
+const Checkout = lazyWithRetries(() =>
   import("./Checkout").then(({ Checkout: c }) => ({
     default: c,
   }))

services/backend-api/client/src/utils/lazyImportWithRetry.ts

@@ -0,0 +1,42 @@
+/* eslint-disable no-await-in-loop */
+import React from "react";
+
+const RECOGNIZED_ERROR_MESSAGE = "Failed to fetch dynamically imported module: ";
+
+// https://medium.com/@alonmiz1234/retry-dynamic-imports-with-react-lazy-c7755a7d557a
+export const lazyWithRetries: typeof React.lazy = (importer) => {
+  const retryImport = async () => {
+    try {
+      return await importer();
+    } catch (error: any) {
+      if (!error.message.startsWith(RECOGNIZED_ERROR_MESSAGE)) {
+        throw error;
+      }
+
+      // retry 5 times with 2 second delay and backoff factor of 2 (2, 4, 8, 16, 32 seconds)
+      for (let i = 0; i < 5; i += 1) {
+        await new Promise<void>((resolve) => {
+          setTimeout(() => {
+            resolve();
+          }, 1000 * 2 ** i);
+        });
+        // this assumes that the exception will contain this specific text with the url of the module
+        // if not, the url will not be able to parse and we'll get an error on that
+        // eg. "Failed to fetch dynamically imported module: https://example.com/assets/Home.tsx"
+        const url = new URL(error.message.replace(RECOGNIZED_ERROR_MESSAGE, "").trim());
+        // add a timestamp to the url to force a reload the module (and not use the cached version - cache busting)
+        url.searchParams.set("t", `${+new Date()}`);
+
+        try {
+          return await import(url.href);
+        } catch (e) {
+          console.log("retrying import");
+        }
+      }
+
+      throw error;
+    }
+  };
+
+  return React.lazy(retryImport);
+};