feat: error boundary wrapper

components/error-boundary/index.tsx

@@ -0,0 +1,44 @@
+import { Component, PropsWithChildren } from 'react';
+import { NavigateFunction, useNavigate } from 'react-router-dom';
+
+type ErrorBoundaryPropsType = PropsWithChildren<{
+  navigator: NavigateFunction;
+}>;
+
+interface IErrorBoundaryState {
+  hasError: boolean;
+}
+
+class ErrorBoundary extends Component<
+  ErrorBoundaryPropsType,
+  IErrorBoundaryState
+> {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(_: Error) {
+    return { hasError: true };
+  }
+
+  render() {
+    return this.state.hasError ? (
+      <div style={{ width: 400, padding: 16, textAlign: 'center' }}>
+        <p>bviewer has something wrong.</p>
+        <button className='basic-btn' onClick={() => this.props.navigator('/')}>
+          返回主页
+        </button>
+      </div>
+    ) : (
+      this.props.children
+    );
+  }
+}
+
+const ErrorBoundaryWithRouter =
+  (ClassComponent: typeof ErrorBoundary) =>
+  (props: Pick<ErrorBoundaryPropsType, 'children'>) =>
+    <ClassComponent navigator={useNavigate()}>{props.children}</ClassComponent>;
+
+export default ErrorBoundaryWithRouter(ErrorBoundary);

layouts/index.tsx

@@ -1,11 +1,18 @@
-import type { FC } from 'react';
+import type { FC, PropsWithChildren } from 'react';
 import { Route, Routes } from 'react-router-dom';
+import ErrorBoundary from '~components/error-boundary';
 import Follow from './follow';
 import UpSpace from './up-space';
 
+const WrapperErrorBoundary = (FunctionComponent: FC) => (
+  <ErrorBoundary>
+    <FunctionComponent />
+  </ErrorBoundary>
+);
+
 export const Router: FC = () => (
   <Routes>
-    <Route path='/' element={<Follow />} />
-    <Route path='/up/:uid' element={<UpSpace />} />
+    <Route path='/' element={WrapperErrorBoundary(Follow)} />
+    <Route path='/up/:uid' element={WrapperErrorBoundary(UpSpace)} />
   </Routes>
 );