✨ feat: 添加错误捕捉组件

packages/journey-map/package.json

@@ -39,6 +39,7 @@
     "antd": "^4.12.3",
     "classnames": "^2.2.6",
     "js-yaml": "^4.0.0",
+    "react-error-boundary": "^3.1.1",
     "use-merge-value": "^1.0.2",
     "use-overflow": "^1.1.0"
   },

packages/journey-map/src/components/ErrorFallback.less

@@ -0,0 +1,8 @@
+@import '../token';
+
+.avx-journey-error {
+  &-detail {
+    margin-top: 8px;
+    .secondText;
+  }
+}

packages/journey-map/src/components/ErrorFallback.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Alert, Typography } from 'antd';
+
+import './ErrorFallback.less';
+
+const { Title, Text } = Typography;
+const ErrorFallback = ({ error }) => (
+  <Alert
+    type={'error'}
+    message={
+      <div>
+        <Title level={5} className="avx-journey-error-title">
+          渲染出错啦 😮
+        </Title>
+        <Text className="avx-journey-error-desc">
+          请检查输入语法是否存在问题，错误详情如下:
+        </Text>
+        <pre>
+          <Text ellipsis copyable className="avx-journey-error-detail">
+            {error.message}
+          </Text>
+        </pre>
+      </div>
+    }
+  />
+);
+export default ErrorFallback;

packages/journey-map/src/components/index.ts

@@ -1,2 +1,3 @@
 export { default as Section } from './Section';
 export { default as OverflowTitle } from './OverflowTitle';
+export { default as ErrorFallback } from './ErrorFallback';

packages/journey-map/src/index.tsx

@@ -1,11 +1,13 @@
 import React from 'react';
 import type { FC, CSSProperties } from 'react';
 import cls from 'classnames';
+import { ErrorBoundary } from 'react-error-boundary';
 
 import Stage from './Stages';
 import Chart from './Chart';
 import Actions from './Actions';
 import Thoughts from './Thoughts';
+import { ErrorFallback } from './components';
 
 import { JourneyMapStore, useJourneyMap } from './useJourneyMap';
 import type { Config, JourneyMapData, SectionType } from './types';
@@ -64,22 +66,24 @@ const JourneyMap: FC<JourneyMapProps> = ({
   ];
 
   return (
-    <JourneyMapStore.Provider value={store}>
-      <div
-        className={cls('avx-journey-map-container', className)}
-        style={style}
-      >
-        {store.title ? (
-          <div className="avx-journey-map-title">{store.title}</div>
-        ) : null}
-        <div className="avx-journey-map-content">
-          {arrange.map((a) => {
-            const Section = sections[a];
-            return <Section key={a} />;
-          })}
+    <ErrorBoundary FallbackComponent={ErrorFallback}>
+      <JourneyMapStore.Provider value={store}>
+        <div
+          className={cls('avx-journey-map-container', className)}
+          style={style}
+        >
+          {store.title ? (
+            <div className="avx-journey-map-title">{store.title}</div>
+          ) : null}
+          <div className="avx-journey-map-content">
+            {arrange.map((a) => {
+              const Section = sections[a];
+              return <Section key={a} />;
+            })}
+          </div>
         </div>
-      </div>
-    </JourneyMapStore.Provider>
+      </JourneyMapStore.Provider>
+    </ErrorBoundary>
   );
 };
 

yarn.lock

@@ -16972,6 +16972,13 @@ react-error-boundary@^3.1.0:
   dependencies:
     "@babel/runtime" "^7.12.5"
 
+react-error-boundary@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.npm.taobao.org/react-error-boundary/download/react-error-boundary-3.1.1.tgz#932c5ca5cbab8ec4fe37fd7b415aa5c3a47597e7"
+  integrity sha1-kyxcpcurjsT+N/17QVqlw6R1l+c=
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+
 react-fast-compare@^3.1.1:
   version "3.2.0"
   resolved "https://registry.npm.taobao.org/react-fast-compare/download/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"