From 9d2017e598a7821cbd83ada66ade3d8b84fa790d Mon Sep 17 00:00:00 2001
From: GyDi <zzzgydi@gmail.com>
Date: Sat, 19 Nov 2022 01:22:19 +0800
Subject: [PATCH] feat: add error boundary
---
package.json | 1 +
src/components/base/base-error-boundary.tsx | 20 +++++++++++++
src/components/base/base-page.tsx | 31 +++++++++++----------
src/pages/_layout.tsx | 13 +++++----
yarn.lock | 9 +++++-
5 files changed, 54 insertions(+), 20 deletions(-)
create mode 100644 src/components/base/base-error-boundary.tsx
diff --git a/package.json b/package.json
index f6bf8ba..d9b9950 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/base/base-error-boundary.tsx b/src/components/base/base-error-boundary.tsx
new file mode 100644
index 0000000..c6fd123
--- /dev/null
+++ b/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;
diff --git a/src/components/base/base-page.tsx b/src/components/base/base-page.tsx
index 789b513..e69b0cf 100644
--- a/src/components/base/base-page.tsx
+++ b/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>
);
};
diff --git a/src/pages/_layout.tsx b/src/pages/_layout.tsx
index b319897..5520847 100644
--- a/src/pages/_layout.tsx
+++ b/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>
diff --git a/yarn.lock b/yarn.lock
index 1a87fad..f1ff069 100644
--- a/yarn.lock
+++ b/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"
--
GitLab