feat(next/web): auto reload when dynamic import failed

next/web/src/App/helpers/lazy.tsx

@@ -0,0 +1,26 @@
+import { lazy as _lazy } from 'react';
+
+function shouldReload() {
+  const reloadedAt = sessionStorage.getItem('TapDesk/reloadedAt');
+  if (reloadedAt && Date.now() - parseInt(reloadedAt) < 10000) {
+    return false;
+  }
+  sessionStorage.setItem('TapDesk/reloadedAt', Date.now().toString());
+  return true;
+}
+
+function Reloading() {
+  return <div>A newer version was found, reloading...</div>;
+}
+
+export const lazy: typeof _lazy = (factory) => {
+  return _lazy(() =>
+    factory().catch((err) => {
+      if (shouldReload()) {
+        location.reload();
+        return { default: Reloading as any };
+      }
+      throw err;
+    })
+  );
+};

next/web/src/App/index.tsx

@@ -1,4 +1,4 @@
-import { Suspense, lazy } from 'react';
+import { Suspense } from 'react';
 import { QueryClientProvider } from 'react-query';
 import { RecoilRoot } from 'recoil';
 import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
@@ -11,6 +11,7 @@ import zhCN from 'antd/lib/locale/zh_CN';
 import { useCurrentUser } from '@/leancloud';
 import { queryClient } from '@/api/query-client';
 import { Spin } from '@/components/antd';
+import { lazy } from './helpers/lazy';
 
 const Tickets = lazy(() => import('./Tickets'));
 const Admin = lazy(() => import('./Admin'));