wip: error boundary

cdsctf · Nov 22, 2024 · 392aac8 · 392aac8
1 parent 8c94d43
commit 392aac8
Show file tree

Hide file tree

Showing 20 changed files with 162 additions and 8 deletions.
diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
         "nanoid": "^5.0.8",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-error-boundary": "^4.1.2",
         "react-markdown": "^9.0.1",
         "react-router-dom": "^6.26.1",
         "react-transition-group": "^4.4.5",

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,5 +1,6 @@
 import { useThemeStore } from "@/stores/theme";
 import { RouterProvider } from "react-router-dom";
+import { ErrorBoundary } from "react-error-boundary";
 import { useEffect } from "react";
 import { router } from "@/routers";
 

diff --git a/src/components/core/Box/Box.module.scss b/src/components/core/Box/Box.module.scss
diff --git a/src/components/core/Box/Box.tsx b/src/components/core/Box/Box.tsx
@@ -0,0 +1,9 @@
+import { ComponentProps } from "react";
+
+export interface BoxProps extends ComponentProps<"div"> {}
+
+export function Box(props: BoxProps) {
+    const { children, ...rest } = props;
+
+    return <div {...rest}>{children}</div>;
+}
diff --git a/src/components/core/Box/index.ts b/src/components/core/Box/index.ts
@@ -0,0 +1 @@
+export { Box, type BoxProps } from "./Box";
diff --git a/src/components/core/Flex/Flex.module.scss b/src/components/core/Flex/Flex.module.scss
@@ -0,0 +1,4 @@
+.root {
+    display: flex;
+    gap: var(--flex-gap, 0);
+}
diff --git a/src/components/core/Flex/Flex.tsx b/src/components/core/Flex/Flex.tsx
@@ -0,0 +1,29 @@
+import { CSSProperties } from "react";
+import { Box, BoxProps } from "../Box";
+import styles from "./Flex.module.scss";
+import clsx from "clsx";
+
+export interface FlexProps extends BoxProps {
+    gap?: string;
+}
+
+export function Flex(props: FlexProps) {
+    const { gap, children, className, style, ...rest } = props;
+
+    const variables = {
+        "--flex-gap": gap,
+    } as CSSProperties;
+
+    return (
+        <Box
+            className={clsx(styles["root"], className)}
+            style={{
+                ...variables,
+                ...style,
+            }}
+            {...rest}
+        >
+            {children}
+        </Box>
+    );
+}
diff --git a/src/components/core/Flex/index.ts b/src/components/core/Flex/index.ts
@@ -0,0 +1 @@
+export { Flex } from "./Flex";
diff --git a/src/components/core/InputBase/InputBase.module.scss b/src/components/core/InputBase/InputBase.module.scss
@@ -1,11 +1,13 @@
 @use "@/styles/mixins";
 
 $width: var(--input-width);
+$height: var(--input-height);
 $bg-color: var(--input-bg-color);
 $border-color: var(--input-border-color);
 
 .root {
     width: $width;
+    height: $height;
     display: flex;
     flex-direction: column;
     align-items: start;
@@ -45,6 +47,7 @@ $border-color: var(--input-border-color);
 
 .wrapper {
     width: 100%;
+    height: 100%;
     border-radius: 15px;
     box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
     display: flex;

diff --git a/src/components/core/InputBase/InputBase.tsx b/src/components/core/InputBase/InputBase.tsx
@@ -5,6 +5,7 @@ import clsx from "clsx";
 
 export interface InputBaseProps extends ComponentProps<"div"> {
     width?: string;
+    height?: string;
     color?: string;
     variant?: "outlined" | "solid";
     invalid?: boolean;
@@ -20,6 +21,7 @@ export const InputBase = forwardRef<HTMLDivElement, InputBaseProps>(
     (props, ref) => {
         const {
             width = "fit-content",
+            height = "fit-content",
             color = "primary",
             invalid = false,
             variant = "outlined",
@@ -36,6 +38,7 @@ export const InputBase = forwardRef<HTMLDivElement, InputBaseProps>(
 
         const variables = {
             "--input-width": width,
+            "--input-height": height,
             "--input-bg-color": baseColor,
             "--input-border-color": baseColor,
         } as React.CSSProperties;

diff --git a/src/components/core/Stack/Stack.module.scss b/src/components/core/Stack/Stack.module.scss
@@ -0,0 +1,5 @@
+.root {
+    display: flex;
+    flex-direction: column;
+    gap: var(--stack-gap, 0);
+}
diff --git a/src/components/core/Stack/Stack.tsx b/src/components/core/Stack/Stack.tsx
@@ -0,0 +1,29 @@
+import { CSSProperties } from "react";
+import { Box, BoxProps } from "../Box";
+import styles from "./Stack.module.scss";
+import clsx from "clsx";
+
+export interface StackProps extends BoxProps {
+    gap?: string;
+}
+
+export function Stack(props: StackProps) {
+    const { children, gap = "15px", className, style, ...rest } = props;
+
+    const variables = {
+        "--stack-gap": gap,
+    } as CSSProperties;
+
+    return (
+        <Box
+            className={clsx(styles["root"], className)}
+            style={{
+                ...variables,
+                ...style,
+            }}
+            {...rest}
+        >
+            {children}
+        </Box>
+    );
+}
diff --git a/src/components/core/Stack/index.ts b/src/components/core/Stack/index.ts
diff --git a/src/components/core/Textarea/Textarea.module.scss b/src/components/core/Textarea/Textarea.module.scss
@@ -41,6 +41,7 @@
 .textarea {
     flex: 1;
     width: 100%;
+    height: 100%;
     background: transparent;
     border: none;
     outline: none;

diff --git a/src/components/core/Textarea/Textarea.tsx b/src/components/core/Textarea/Textarea.tsx
@@ -4,21 +4,25 @@ import styles from "./Textarea.module.scss";
 
 export interface TextareaProps extends Omit<InputBaseProps, "onChange"> {
     width?: string;
+    height?: string;
     value?: string;
     onChange?: (value: string) => void;
     icon?: React.ReactElement;
 }
 
 export function Textarea(props: TextareaProps) {
-    const { width = "fit-content", value, onChange, icon, ...rest } = props;
+    const {
+        width = "fit-content",
+        height = "fit-content",
+        value,
+        onChange,
+        icon,
+        ...rest
+    } = props;
 
     return (
         <InputBase className={styles["root"]} width={width}>
-            {icon && (
-                <div className={styles["icon"]}>
-                    <Icon icon={icon} />
-                </div>
-            )}
+            {icon && <Icon icon={icon} className={styles["icon"]} />}
             <textarea
                 className={styles["textarea"]}
                 value={value}

diff --git a/src/components/utils/ErrorFallback/ErrorFallback.module.scss b/src/components/utils/ErrorFallback/ErrorFallback.module.scss
@@ -0,0 +1,26 @@
+.root {
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+}
+
+.nav {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 15px;
+}
+
+.icon {
+    width: 50px;
+    height: 50px;
+}
+
+.title {
+    font-size: 24px;
+    font-weight: 700;
+}
diff --git a/src/components/utils/ErrorFallback/ErrorFallback.tsx b/src/components/utils/ErrorFallback/ErrorFallback.tsx
@@ -0,0 +1,31 @@
+import { Button } from "@/components/core";
+import { FallbackProps } from "react-error-boundary";
+import styles from "./ErrorFallback.module.scss";
+import { Icon } from "@/components/core/Icon";
+import SolarPlanet2BoldDuotone from "~icons/solar/planet-2-bold-duotone";
+import { Textarea } from "@/components/core/Textarea";
+import { Flex } from "@/components/core/Flex";
+import RestartBold from "~icons/solar/restart-bold";
+
+export function ErrorFallback(props: FallbackProps) {
+    const { error, resetErrorBoundary } = props;
+
+    return (
+        <div className={styles["root"]}>
+            <div className={styles["nav"]}>
+                <Icon
+                    icon={<SolarPlanet2BoldDuotone />}
+                    className={styles["icon"]}
+                />
+                <h2 className={styles["title"]}>好像出了点问题</h2>
+            </div>
+            <Textarea value={error.stack} width="50vw" height="50vh" />
+            <Flex className={styles["actions"]}>
+                <Button onClick={resetErrorBoundary} icon={<RestartBold />}>
+                    重置
+                </Button>
+                <Button onClick={() => console.log(error)}>查看错误信息</Button>
+            </Flex>
+        </div>
+    );
+}
diff --git a/src/components/utils/ErrorFallback/index.ts b/src/components/utils/ErrorFallback/index.ts
diff --git a/src/layouts/Base/Base.tsx b/src/layouts/Base/Base.tsx
@@ -1,5 +1,7 @@
+import { ErrorFallback } from "@/components/utils/ErrorFallback/ErrorFallback";
 import { Toaster } from "@/components/widgets/Toaster";
 import globalRouter from "@/utils/globalRouter";
+import { ErrorBoundary } from "react-error-boundary";
 import { Outlet, useNavigate } from "react-router-dom";
 
 export function Base() {
@@ -8,8 +10,10 @@ export function Base() {
 
     return (
         <>
-            <Outlet />
-            <Toaster />
+            <ErrorBoundary FallbackComponent={ErrorFallback}>
+                <Outlet />
+                <Toaster />
+            </ErrorBoundary>
         </>
     );
 }
diff --git a/src/pages/page.tsx b/src/pages/page.tsx
@@ -38,6 +38,8 @@ export function Page() {
 
     const [checked, setChecked] = useState<boolean>(false);
 
+    // throw new Error("123");
+
     const markdownText = `
 # welcome Heading1
 ## welcome Heading2