feat: add error boundary

package.json

@@ -31,6 +31,7 @@
     "monaco-editor": "^0.34.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-error-boundary": "^3.1.4",
     "react-i18next": "^12.0.0",
     "react-router-dom": "^6.4.3",
     "react-virtuoso": "^3.1.3",

src/components/base/base-error-boundary.tsx

@@ -0,0 +1,20 @@
+import { ErrorBoundary, FallbackProps } from "react-error-boundary";
+
+function ErrorFallback({ error }: FallbackProps) {
+  return (
+    <div role="alert">
+      <p>Something went wrong:(</p>
+      <pre>{error.message}</pre>
+    </div>
+  );
+}
+
+const BaseErrorBoundary: React.FC = (props) => {
+  return (
+    <ErrorBoundary FallbackComponent={ErrorFallback}>
+      {props.children}
+    </ErrorBoundary>
+  );
+};
+
+export default BaseErrorBoundary;

src/components/base/base-page.tsx

@@ -1,5 +1,6 @@
-import { Typography } from "@mui/material";
 import React from "react";
+import { Typography } from "@mui/material";
+import BaseErrorBoundary from "./base-error-boundary";
 
 interface Props {
   title?: React.ReactNode; // the page title
@@ -11,21 +12,23 @@ const BasePage: React.FC<Props> = (props) => {
   const { title, header, contentStyle, children } = props;
 
   return (
-    <div className="base-page" data-windrag>
-      <header data-windrag style={{ userSelect: "none" }}>
-        <Typography variant="h4" component="h1" data-windrag>
-          {title}
-        </Typography>
+    <BaseErrorBoundary>
+      <div className="base-page" data-windrag>
+        <header data-windrag style={{ userSelect: "none" }}>
+          <Typography variant="h4" component="h1" data-windrag>
+            {title}
+          </Typography>
 
-        {header}
-      </header>
+          {header}
+        </header>
 
-      <section>
-        <div className="base-content" style={contentStyle} data-windrag>
-          {children}
-        </div>
-      </section>
-    </div>
+        <section>
+          <div className="base-content" style={contentStyle} data-windrag>
+            {children}
+          </div>
+        </section>
+      </div>
+    </BaseErrorBoundary>
   );
 };
 

src/pages/_layout.tsx

@@ -20,6 +20,7 @@ import LayoutControl from "@/components/layout/layout-control";
 import LayoutTraffic from "@/components/layout/layout-traffic";
 import UpdateButton from "@/components/layout/update-button";
 import useCustomTheme from "@/components/layout/use-custom-theme";
+import BaseErrorBoundary from "@/components/base/base-error-boundary";
 import getSystem from "@/utils/get-system";
 import "dayjs/locale/zh-cn";
 
@@ -137,11 +138,13 @@ const Layout = () => {
             )}
 
             <div className="the-content">
-              <Routes>
-                {routers.map(({ label, link, ele: Ele }) => (
-                  <Route key={label} path={link} element={<Ele />} />
-                ))}
-              </Routes>
+              <BaseErrorBoundary>
+                <Routes>
+                  {routers.map(({ label, link, ele: Ele }) => (
+                    <Route key={label} path={link} element={<Ele />} />
+                  ))}
+                </Routes>
+              </BaseErrorBoundary>
             </div>
           </div>
         </Paper>

yarn.lock

@@ -971,7 +971,7 @@ ahooks-v3-count@^1.0.0:
   resolved "https://registry.yarnpkg.com/ahooks-v3-count/-/ahooks-v3-count-1.0.0.tgz#ddeb392e009ad6e748905b3cbf63a9fd8262ca80"
   integrity sha512-V7uUvAwnimu6eh/PED4mCDjE7tokeZQLKlxg9lCTMPhN+NjsSbtdacByVlR1oluXQzD3MOw55wylDmQo4+S9ZQ==
 
-ahooks@3.7.2:
+ahooks@^3.7.2:
   version "3.7.2"
   resolved "https://registry.npmmirror.com/ahooks/-/ahooks-3.7.2.tgz#0afa42625e77ae1cc4b60b19c45cf12a8cf29b56"
   integrity sha512-nJPsQJcmJnGaNXiqgZdfO7UMs+o926LQg6VyDYt2vzKhXU8Ze/U87NsA/FeIvlIZB0rQr/j7uotFb1bGPp627A==
@@ -1976,6 +1976,13 @@ react-dom@^17.0.2:
     object-assign "^4.1.1"
     scheduler "^0.20.2"
 
+react-error-boundary@^3.1.4:
+  version "3.1.4"
+  resolved "https://registry.npmmirror.com/react-error-boundary/-/react-error-boundary-3.1.4.tgz#255db92b23197108757a888b01e5b729919abde0"
+  integrity sha512-uM9uPzZJTF6wRQORmSrvOIgt4lJ9MC1sNgEOj2XGsDTRE4kmpWxg7ENK9EWNKJRMAOY9z0MuF4yIfl6gp4sotA==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+
 react-i18next@^12.0.0:
   version "12.0.0"
   resolved "https://registry.npmmirror.com/react-i18next/-/react-i18next-12.0.0.tgz#634015a2c035779c5736ae4c2e5c34c1659753b1"