feat: added a graceful handling when version skew happens

backend/src/server/plugins/serve-ui.ts

@@ -60,6 +60,11 @@ export const registerServeUI = async (
           return;
         }
 
+        if (request.url.startsWith("/assets") && request.url.endsWith(".js")) {
+          reply.callNotFound();
+          return;
+        }
+
         return reply.sendFile("index.html", {
           immutable: false,
           maxAge: 0,

frontend/src/main.tsx

@@ -32,34 +32,6 @@ setWasmUrl(lottieWasmUrl);
 // Create a new router instance
 NProgress.configure({ showSpinner: false });
 
-window.addEventListener("vite:preloadError", async (event) => {
-  event.preventDefault();
-  // Get current count from session storage or initialize to 0
-  const reloadCount = parseInt(sessionStorage.getItem("vitePreloadErrorCount") || "0", 10);
-
-  // Check if we've already tried 3 times
-  if (reloadCount >= 2) {
-    console.warn("Vite preload has failed multiple times. Stopping automatic reload.");
-    // Optionally show a user-facing message here
-    return;
-  }
-
-  try {
-    if ("caches" in window) {
-      const keys = await caches.keys();
-      await Promise.all(keys.map((key) => caches.delete(key)));
-    }
-  } catch (cleanupError) {
-    console.error(cleanupError);
-  }
-  //
-  // Increment and save the counter
-  sessionStorage.setItem("vitePreloadErrorCount", (reloadCount + 1).toString());
-
-  console.log(`Reloading page (attempt ${reloadCount + 1} of 2)...`);
-  window.location.reload(); // for example, refresh the page
-});
-
 const router = createRouter({
   routeTree,
   context: { serverConfig: null, queryClient },

frontend/src/pages/public/ErrorPage/ErrorPage.tsx

@@ -1,13 +1,30 @@
+import { useEffect } from "react";
 import { faBugs, faHome } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { ErrorComponentProps, Link } from "@tanstack/react-router";
 import { AxiosError } from "axios";
 
-import { Button } from "@app/components/v2";
+import { Button, Lottie } from "@app/components/v2";
 
 import { ProjectAccessError } from "./components";
 
 export const ErrorPage = ({ error }: ErrorComponentProps) => {
+  const isDeploymentSkew =
+    error instanceof TypeError &&
+    error.message.includes("error loading dynamically imported module");
+
+  const reloadCount = parseInt(sessionStorage.getItem("vitePreloadErrorCount") || "0", 10);
+
+  useEffect(() => {
+    if (isDeploymentSkew && reloadCount <= 3) {
+      const timeout = setTimeout(() => {
+        clearTimeout(timeout);
+        sessionStorage.setItem("vitePreloadErrorCount", (reloadCount + 1).toString());
+        window.location.reload();
+      }, 10000);
+    }
+  }, [isDeploymentSkew]);
+
   if (
     error instanceof AxiosError &&
     error.status === 403 &&
@@ -16,6 +33,14 @@ export const ErrorPage = ({ error }: ErrorComponentProps) => {
     return <ProjectAccessError />;
   }
 
+  if (isDeploymentSkew && reloadCount <= 3) {
+    return (
+      <div className="flex h-screen w-screen items-center justify-center bg-bunker-800">
+        <Lottie isAutoPlay icon="infisical_loading" className="h-32 w-32" />
+      </div>
+    );
+  }
+
   return (
     <div className="flex h-screen items-center justify-center bg-bunker-800">
       <div className="flex max-w-3xl flex-col rounded-md border border-mineshaft-600 bg-mineshaft-800 p-8 text-center text-mineshaft-200">

frontend/vite.config.ts

@@ -23,11 +23,6 @@ const virtualRouteFileChangeReloadPlugin: PluginOption = {
 export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, process.cwd());
   const allowedHosts = env.VITE_ALLOWED_HOSTS?.split(",") ?? [];
-  const version = (
-    env.INFISICAL_PLATFORM_VERSION ||
-    env.VITE_INFISICAL_PLATFORM_VERSION ||
-    "0.0.1"
-  ).replaceAll(".", "-");
 
   return {
     server: {
@@ -43,15 +38,6 @@ export default defineConfig(({ mode }) => {
       //   }
       // }
     },
-    build: {
-      rollupOptions: {
-        output: {
-          entryFileNames: `assets/[name]-${version}-[hash].js`,
-          chunkFileNames: `assets/[name]-${version}-[hash].js`,
-          assetFileNames: `assets/[name]-${version}-[hash].[ext]`
-        }
-      }
-    },
     plugins: [
       tsconfigPaths(),
       nodePolyfills({