feat:

增加 ErrorBoundary
useStorage->usingStorage

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, info: '' }
+  }
+
+  componentDidCatch(error, info) {
+    console.error('Sorry, Something went wrong.')
+    console.error(error)
+    this.setState({ hasError: true, info: error.message })
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return <Result
+        status='500'
+        title='Sorry, Something went wrong.'
+        subTitle={this.state.info}
+      />
+    }
+    return this.props.children
+  }
+}
+
+export default ErrorBoundary

src/components/ErrorPage.jsx

@@ -0,0 +1,13 @@
+import { useRouteError } from "react-router-dom"
+import { Result } from 'antd'
+
+export default function ErrorPage() {
+  const errorResponse = useRouteError()
+  return (
+    <Result
+      status="404"
+      title="Sorry, an unexpected error has occurred."
+      subTitle={errorResponse?.message || errorResponse.error?.message}
+    />
+  )
+}

src/hooks/usingStorage.js

@@ -5,8 +5,8 @@ const persistObject = {}
  * G-STR:LOGIN_TOKEN -> loginToken = 'E6779386E7D64DF0ADD0F97767E00D8B'
  * G-JSON:LOGIN_USER -> loginUser = { username: 'test-username' }
  */
-export function useStorage() {
-
+export function usingStorage() {
+  // TODO: rename storageUse()???webStorage()???
   const getStorage = () => {
     if (import.meta.env.DEV && window.localStorage) {
       return window.localStorage

src/main.jsx

@@ -13,7 +13,7 @@ import Standlone from "@/views/Standlone";
 import Login from "@/views/Login";
 import Logout from "@/views/Logout";
 import Index from "@/views/index";
-import ErrorPage from "@/views/error-page";
+import ErrorPage from "@/components/ErrorPage";
 import ReservationNewest from "@/views/reservation/Newest";
 import ReservationDetail from "@/views/reservation/Detail";
 import ChangePassword from "@/views/account/ChangePassword";

src/stores/Auth.js

@@ -4,7 +4,7 @@ import { appendRequestParams, fetchJSON, postForm } from '@/utils/request'
 import { HT_HOST } from "@/config"
 import { isNotEmpty, prepareUrl } from '@/utils/commons'
 import { loadPageSpy } from '@/pageSpy'
-import { useStorage } from '@/hooks/useStorage'
+import { usingStorage } from '@/hooks/usingStorage'
 
 
 const KEY_LOGIN_TOKEN = 'G-STR:LOGIN_TOKEN'
@@ -48,7 +48,7 @@ const useAuthStore = create((set, get) => ({
   },
 
   validateUserPassword: async (usr, pwd) => {
-    const { setStorage } = useStorage()
+    const { setStorage } = usingStorage()
 
     const formData = new FormData()
     formData.append('username', usr)
@@ -99,7 +99,7 @@ const useAuthStore = create((set, get) => ({
   },
 
   logout: () => {
-    const { clearStorage } = useStorage()
+    const { clearStorage } = usingStorage()
     clearStorage()
     set(() => ({
       loginUser: {

src/stores/Reservation.js

@@ -3,7 +3,7 @@ import { create } from 'zustand'
 import { fetchJSON, postForm } from '@/utils/request'
 import { HT_HOST } from "@/config"
 import { prepareUrl } from '@/utils/commons'
-import { useStorage } from '@/hooks/useStorage'
+import { usingStorage } from '@/hooks/usingStorage'
 
 export const fetchCityList = async (travelAgencyId, reservationId) => {
   const { errcode, Result } = await fetchJSON(
@@ -60,7 +60,7 @@ const useReservationStore = create((set, get) => ({
   ],
 
   getCityListByReservationId: async (reservationId) => {
-    const { travelAgencyId } = useStorage()
+    const { travelAgencyId } = usingStorage()
     set(() => ({
       cityList: []
     }))
@@ -93,7 +93,7 @@ const useReservationStore = create((set, get) => ({
   },
 
   fetchReservationList: (formVal, current=1) => {
-    const { travelAgencyId } = useStorage()
+    const { travelAgencyId } = usingStorage()
     const { reservationPage } = get()
     // 设置为 0，后端会重新计算总数，当跳转第 X 页时可用原来的总数。
     const totalNum = current == 1 ? 0 : reservationPage.total;
@@ -139,7 +139,7 @@ const useReservationStore = create((set, get) => ({
   },
 
   fetchAllGuideList: () => {
-    const { userId, travelAgencyId } = useStorage()
+    const { userId, travelAgencyId } = usingStorage()
     const fetchUrl = prepareUrl(HT_HOST + '/service-cusservice/PTGetGuideList')
       .append('VEI_SN', travelAgencyId)
       .build();

src/views/App.jsx

@@ -11,10 +11,11 @@ import { useTranslation } from 'react-i18next';
 import zhLocale from 'antd/locale/zh_CN';
 import enLocale from 'antd/locale/en_US';
 import 'dayjs/locale/zh-cn';
+import ErrorBoundary from '@/components/ErrorBoundary'
 import { BUILD_VERSION,  } from '@/config';
 import useNoticeStore from '@/stores/Notice';
 import useAuthStore from '@/stores/Auth'
-import { useStorage } from '@/hooks/useStorage'
+import { usingStorage } from '@/hooks/usingStorage'
 
 const { Header, Content, Footer } = Layout;
 const { Title } = Typography;
@@ -27,7 +28,7 @@ function App() {
 
   const [loginUser, validateUserPassword] = useAuthStore((state) => [state.loginUser, state.validateUserPassword])
 
-  const { loginToken, username } = useStorage()
+  const { loginToken, username } = usingStorage()
 
   const noticeUnRead = useNoticeStore((state) => state.noticeUnRead)
 	const href = useHref();
@@ -88,6 +89,7 @@ function App() {
 				algorithm: theme.defaultAlgorithm,
 			}}>
 			<AntApp>
+      <ErrorBoundary>
       <Modal
         centered
         closable={false}
@@ -182,6 +184,7 @@ function App() {
 					</Content>
 					<Footer></Footer>
 				</Layout>
+        </ErrorBoundary>
 			</AntApp>
 		</ConfigProvider>
 	);

src/views/error-page.jsx

@@ -1,18 +0,0 @@
-import { useRouteError } from "react-router-dom";
-import { uploadPageSpyLog } from '@/pageSpy';
-
-export default function ErrorPage() {
-  const error = useRouteError();
-  console.error(error);
-  uploadPageSpyLog();
-
-  return (
-    <div id="error-page">
-      <h1>Oops!</h1>
-      <p>Sorry, an unexpected error has occurred.</p>
-      <p>
-        <i>{error.statusText || error.message}</i>
-      </p>
-    </div>
-  );
-}