Merge remote-tracking branch 'origin/main' into dev/chat

src/components/ErrorBoundary.jsx

@@ -0,0 +1,33 @@
+import React, { PureComponent } from 'react'
+import { Result } from 'antd'
+
+// 参考文档：
+// https://zh-hans.react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary
+// https://juejin.cn/post/7168720873006825503
+// https://github.com/bvaughn/react-error-boundary/tree/master
+
+class ErrorBoundary extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false }
+  }
+
+  componentDidCatch(error, info) {
+    console.error('Sorry, Something went wrong.')
+    console.error(error)
+    this.setState({ hasError: true })
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return <Result
+        status='500'
+        title='Sorry, Something went wrong.'
+        subTitle='...'
+      />
+    }
+    return this.props.children
+  }
+}
+
+export default ErrorBoundary

src/views/App.jsx

@@ -2,6 +2,7 @@ import { Outlet, Link, useHref, NavLink } from 'react-router-dom'
 import { useRef, useEffect, useState } from 'react'
 import { Layout, Menu, ConfigProvider, theme, Empty, Row, Col, Dropdown, Space, Typography, Result, Select, App as AntApp } from 'antd'
 import { DownOutlined } from "@ant-design/icons";
+import ErrorBoundary from '@/components/ErrorBoundary';
 import zhLocale from 'antd/locale/zh_CN';
 import dayjs from 'dayjs';
 import 'dayjs/locale/zh-cn';
@@ -130,7 +131,9 @@ function App() {
       renderEmpty={globalEmpty}
     >
       <AntApp>
+      <ErrorBoundary>
         {renderLayout()}
+      </ErrorBoundary>
       </AntApp>
     </ConfigProvider>
   )