vesoft-inc · huaxiabuluo · Oct 12, 2022 · Oct 12, 2022
diff --git a/app/components/ErrorBoundary/index.module.less b/app/components/ErrorBoundary/index.module.less
@@ -0,0 +1,50 @@
+.errPage {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: #fff;
+  .errImg {
+    width: 436px;
+    margin-bottom: 20px;
+  }
+  .errText {
+    font-weight: 400;
+    font-size: 24px;
+    line-height: 34px;
+    margin-bottom: 8px;
+  }
+  .errTip {
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 17px;
+    color: #595959;
+    margin-bottom: 18px;
+  }
+  .btns {
+    margin-bottom: 50px;
+    button:not(:last-child) {
+      margin-right: 15px;
+    }
+  }
+
+  .errContainer {
+    max-width: 1180px;
+    padding: 18px 30px;
+    background: #FFFFFF;
+    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
+    .header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 20px;
+    }
+    .errMsg {
+      max-height: 400px;
+      color: #B00000;
+      overflow: auto;
+    }
+  }
+}
diff --git a/app/components/ErrorBoundary/index.tsx b/app/components/ErrorBoundary/index.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import errorImg from '@app/static/images/errorBoundary.png';
+import intl from 'react-intl-universal';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { Button, message } from 'antd';
+import { withRouter, RouteComponentProps } from 'react-router-dom';
+import styles from './index.module.less';
+
+interface IProps extends RouteComponentProps {}
+interface IState {
+  errInfo: string;
+}
+class ErrorBoundary extends React.PureComponent<IProps, IState> {
+  constructor(props) {
+    super(props);
+    this.state = {
+      errInfo: null,
+    };
+  }
+  componentDidCatch(_error, errorInfo) {
+    this.setState({
+      errInfo: errorInfo.componentStack,
+    });
+  }
+  componentDidUpdate(prevProps: Readonly<IProps>): void {
+    if(prevProps.location.pathname !== this.props.location.pathname) {
+      this.setState({
+        errInfo: null,
+      });
+    }
+  }
+
+  handleCopy = () => {
+    message.success(intl.get('common.copySuccess'));
+  };
+
+  render() {
+    const { errInfo } = this.state;
+    if(!errInfo) return this.props.children;
+    return <div className={styles.errPage}>
+      <img src={errorImg} className={styles.errImg} />
+      <p className={styles.errText}>{intl.get('warning.crashPage')}</p>
+      <p className={styles.errTip}>{intl.get('warning.crashPageTip')}</p>
+      <div className={styles.btns}>
+        <Button type="primary" onClick={() => window.location.reload()}>{intl.get('warning.refreshPage')}</Button>
+        <Button onClick={() => window.open(intl.get('link.forumHref'), '_blank')}>{intl.get('warning.contactStaff')}</Button>
+      </div>
+      <div className={styles.errContainer}>
+        <div className={styles.header}>
+          <span>{intl.get('warning.errorMessage')}</span>
+          <CopyToClipboard key={1} text={errInfo} onCopy={this.handleCopy}>
+            <Button>{intl.get('common.copy')}</Button>
+          </CopyToClipboard>
+        </div>
+        <p className={styles.errMsg}>{errInfo.toString()}</p>
+      </div>
+    </div>;
+  }
+}
+
+export default withRouter(ErrorBoundary);
diff --git a/app/config/locale/en-US.json b/app/config/locale/en-US.json
@@ -52,6 +52,8 @@
     "version": "Version",
     "statistics": "Statistics",
     "duplicate": "Duplicate",
+    "copy": "Copy",
+    "copySuccess": "Copied successfully",
     "sketch": "Schema drafting",
     "viewSchema": "View Schema",
     "beta": "Beta"
@@ -73,7 +75,12 @@
     "sketchIntro": "Schema drafting"
   },
   "warning": {
-    "connectError": "Connection refused, please configure server again"
+    "connectError": "Connection refused, please configure server again",
+    "crashPage": "Oops, something went wrong",
+    "crashPageTip": "Service crashed, please contact administrator",
+    "refreshPage": "Refresh page",
+    "contactStaff": "Contact Us",
+    "errorMessage": "Error Message"
   },
   "configServer": {
     "connect": "Connect",
@@ -269,7 +276,8 @@
     "nGQLHref": "https://docs.nebula-graph.io/3.1.0/3.ngql-guide/1.nGQL-overview/1.overview/",
     "mannualHref": "https://docs.nebula-graph.io/3.1.0/nebula-studio/about-studio/st-ug-what-is-graph-studio/",
     "startStudioHref": "https://docs.nebula-graph.io/3.1.0/nebula-studio/quick-start/st-ug-plan-schema/",
-    "versionLogHref": "https://docs.nebula-graph.io/3.1.0/nebula-studio/about-studio/st-ug-release-note/"
+    "versionLogHref": "https://docs.nebula-graph.io/3.1.0/nebula-studio/about-studio/st-ug-release-note/",
+    "forumHref": "https://discuss.nebula-graph.io/"
   },
   "sketch": {
     "dragTip": "Drag and drop to the canvas",

diff --git a/app/config/locale/zh-CN.json b/app/config/locale/zh-CN.json
@@ -52,6 +52,8 @@
     "version": "版本",
     "statistics": "统计",
     "duplicate": "复制",
+    "copy": "复制",
+    "copySuccess": "复制成功",
     "sketch": "Schema 草图",
     "viewSchema": "查看 Schema",
     "beta": "Beta"
@@ -73,7 +75,12 @@
     "sketchIntro": "Schema 草图"
   },
   "warning": {
-    "connectError": "数据库连接有误，请重新配置"
+    "connectError": "数据库连接有误，请重新配置",
+    "crashPage": "页面崩溃了",
+    "crashPageTip": "服务崩溃，请联系管理员",
+    "refreshPage": "刷新页面",
+    "contactStaff": "联系客服",
+    "errorMessage": "错误信息"
   },
   "configServer": {
     "connect": "连接",
@@ -269,7 +276,8 @@
     "nGQLHref": "https://docs.nebula-graph.com.cn/3.1.0/3.ngql-guide/1.nGQL-overview/1.overview/",
     "mannualHref": "https://docs.nebula-graph.com.cn/3.1.0/nebula-studio/about-studio/st-ug-what-is-graph-studio/",
     "startStudioHref": "https://docs.nebula-graph.com.cn/3.1.0/nebula-studio/quick-start/st-ug-plan-schema/",
-    "versionLogHref": "https://docs.nebula-graph.com.cn/3.1.0/nebula-studio/about-studio/st-ug-release-note/"
+    "versionLogHref": "https://docs.nebula-graph.com.cn/3.1.0/nebula-studio/about-studio/st-ug-release-note/",
+    "forumHref": "https://discuss.nebula-graph.com.cn/"
   },
   "sketch": {
     "dragTip": "拖放到画布上",

diff --git a/app/pages/MainPage/index.tsx b/app/pages/MainPage/index.tsx
@@ -2,6 +2,7 @@ import React, { Suspense } from 'react';
 import { Layout, Spin } from 'antd';
 import { Redirect, Route, Switch } from 'react-router-dom';
 import { shouldAlwaysShowWelcome } from '@app/pages/Welcome';
+import ErrorBoundary from '@app/components/ErrorBoundary';
 import { MENU_LIST, RoutesList } from './routes';
 import './index.less';
 
@@ -13,25 +14,27 @@ const MainPage = () => {
   return (
     <Layout className="nebulaStudioLayout">
       <Header menus={MENU_LIST} />
-      <Switch>
-        {RoutesList.map((route) => (
-          <Route
-            path={route.path}
-            render={() => (
-              <>
-                <Suspense fallback={<Spin />}>
-                  <Content>
-                    <Route component={route.component} />
-                  </Content>
-                </Suspense>
-              </>
-            )}
-            key={route.path}
-            exact={route.exact}
-          />
-        ))}
-        <Redirect from="/" to={{ pathname: redirectPath, search: location.search }} />
-      </Switch>
+      <ErrorBoundary>
+        <Switch>
+          {RoutesList.map((route) => (
+            <Route
+              path={route.path}
+              render={() => (
+                <>
+                  <Suspense fallback={<Spin />}>
+                    <Content>
+                      <Route component={route.component} />
+                    </Content>
+                  </Suspense>
+                </>
+              )}
+              key={route.path}
+              exact={route.exact}
+            />
+          ))}
+          <Redirect from="/" to={{ pathname: redirectPath, search: location.search }} />
+        </Switch>
+      </ErrorBoundary>
     </Layout>
   );
 };

diff --git a/app/static/images/errorBoundary.png b/app/static/images/errorBoundary.png