fix: error-boundary in page assembly

src/components/Error.tsx

@@ -4,8 +4,10 @@
 
 import { Result } from "antd";
 import ConfigManager from "./ConfigManager";
+import React from "react";
+import { useRouteError } from "react-router-dom";
 
-export default function ErrorResult() {
+function BacsErrorResult() {
   return (
     <Result
       status="500"
@@ -15,3 +17,45 @@ export default function ErrorResult() {
     />
   );
 }
+
+export default function ErrorResult(props: any) {
+  const error = useRouteError() as any;
+  if (error || props.error) {
+    return (
+      <>
+        <p className="text-center">
+          捕获到错误：
+          <span className="text-red-500">
+            {" "}
+            {error?.message || props.error.message}
+          </span>
+        </p>
+        <BacsErrorResult />
+      </>
+    );
+  }
+  return <BacsErrorResult />;
+}
+
+export class ErrorBoundary extends React.Component<any, any> {
+  constructor(props: any) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: any) {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: any, errorInfo: any) {
+    this.setState({ error });
+    console.error(error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return <ErrorResult {...this.state} />;
+    }
+    return this.props.children;
+  }
+}

src/pages/[id]/assembly.tsx

@@ -7,6 +7,7 @@ import ShortCodeRules from "~/components/ShortCodeRules";
 import { useChaifenTitle } from "~/atoms";
 import SelectRules from "~/components/SelectRules";
 import MetricTable from "~/components/MetricTable";
+import { ErrorBoundary } from "~/components/Error";
 
 const ConfigureRules = () => {
   return (
@@ -24,10 +25,12 @@ export default function Assembly() {
   return (
     <Flex vertical gap="middle">
       <ConfigureRules />
-      <Suspense fallback={<Skeleton active />}>
-        <MetricTable />
-        <SequenceTable />
-      </Suspense>
+      <ErrorBoundary>
+        <Suspense fallback={<Skeleton active />}>
+          <MetricTable />
+          <SequenceTable />
+        </Suspense>
+      </ErrorBoundary>
     </Flex>
   );
 }