perf: add ErrorBoundary for routes

client/web/src/App.tsx

@@ -25,6 +25,7 @@ import isElectron from 'is-electron';
 import { AppRouterApi } from './components/AppRouterApi';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
+import { ErrorBoundary } from './components/ErrorBoundary';
 
 const AppRouter: any = isElectron() ? HashRouter : BrowserRouter;
 
@@ -114,36 +115,43 @@ export const App: React.FC = React.memo(() => {
       <AppHeader />
       <AppContainer>
         <AppRouterApi />
-        <Routes>
+        <ErrorBoundary>
-          <Route
+          <Routes>
-            path="/entry/*"
+            <Route
-            element={
+              path="/entry/*"
-              <FallbackPortalHost>
+              element={
-                <EntryRoute />
+                <FallbackPortalHost>
-              </FallbackPortalHost>
+                  <EntryRoute />
-            }
+                </FallbackPortalHost>
-          />
+              }
-          <Route path="/main/*" element={<MainRoute />} />
+            />
-          <Route path="/panel/*" element={<PanelRoute />} />
+            <Route path="/main/*" element={<MainRoute />} />
-          <Route path="/invite/:inviteCode" element={<InviteRoute />} />
+            <Route path="/panel/*" element={<PanelRoute />} />
-          <Route
+            <Route path="/invite/:inviteCode" element={<InviteRoute />} />
-            path="/plugin/*"
+            <Route
-            element={
+              path="/plugin/*"
-              <FallbackPortalHost>
+              element={
-                {pluginRootRoute.map((r, i) => (
+                <FallbackPortalHost>
-                  // NOTICE: Switch里不能出现动态路由
+                  {pluginRootRoute.map((r, i) => (
-                  <Route
+                    // NOTICE: Switch里不能出现动态路由
-                    key={r.name}
+                    <Route
-                    path={r.path ? `/plugin${r.path}` : `/plugin/fallback${i}`}
+                      key={r.name}
-                    element={React.createElement(r.component)}
+                      path={
-                  />
+                        r.path ? `/plugin${r.path}` : `/plugin/fallback${i}`
-                ))}
+                      }
-              </FallbackPortalHost>
+                      element={React.createElement(r.component)}
-            }
+                    />
-          />
+                  ))}
+                </FallbackPortalHost>
+              }
+            />
 
-          <Route path="/*" element={<Navigate to="/entry" replace={true} />} />
+            <Route
-        </Routes>
+              path="/*"
+              element={<Navigate to="/entry" replace={true} />}
+            />
+          </Routes>
+        </ErrorBoundary>
       </AppContainer>
     </AppProvider>
   );