✨ feat: 添加错误处理逻辑

lobehub · May 24, 2024 · 23b2d5d · 23b2d5d
1 parent ffdccc2
commit 23b2d5d
Show file tree

Hide file tree

Showing 11 changed files with 204 additions and 58 deletions.
diff --git a/src/app/error.tsx b/src/app/error.tsx
@@ -0,0 +1,5 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+
+export default dynamic(() => import('@/components/Error'));
diff --git a/src/app/global-error.tsx b/src/app/global-error.tsx
@@ -0,0 +1,22 @@
+'use client';
+
+import Error from 'next/error';
+import { useEffect } from 'react';
+
+export default function GlobalError({
+  error,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    console.log('error', error);
+  }, [error]);
+  return (
+    <html>
+      <body>
+        <Error statusCode={undefined as any} />
+      </body>
+    </html>
+  );
+}
diff --git a/src/app/welcome/loading.tsx b/src/app/welcome/loading.tsx
@@ -17,12 +17,7 @@ const Loading = () => {
   const { styles } = useStyles();
   return (
     <div className={styles.content}>
-      <PageLoading
-        title={'应用初始化中，请稍后...'}
-        description={
-          '项目当前正在施工中，不保证数据稳定性，如果遇到问题可以在系统设置中清除数据，造成的不便敬请谅解'
-        }
-      />
+      <PageLoading title={'应用初始化中，请稍后...'} />
     </div>
   );
 };

diff --git a/src/components/Error/index.tsx b/src/components/Error/index.tsx
@@ -0,0 +1,61 @@
+'use client';
+
+import { FluentEmoji } from '@lobehub/ui';
+import { Button } from 'antd';
+import Link from 'next/link';
+import { memo, useEffect } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { MAX_WIDTH } from '@/constants/common';
+import ResetConfig from '@/features/Actions/ClearSession';
+import ClearChat from '@/features/Actions/ResetConfig';
+
+interface ErrorCaptureProps {
+  error: Error & { digest?: string };
+  reset: () => void;
+}
+
+const ErrorCapture = memo<ErrorCaptureProps>(({ reset, error }) => {
+  useEffect(() => {
+    // Log the error to an error reporting service
+    console.error(error);
+  }, [error]);
+
+  return (
+    <Flexbox align={'center'} justify={'center'} style={{ minHeight: '100%', width: '100%' }}>
+      <h1
+        style={{
+          filter: 'blur(8px)',
+          fontSize: `min(${MAX_WIDTH / 6}px, 25vw)`,
+          fontWeight: 900,
+          margin: 0,
+          opacity: 0.12,
+          position: 'absolute',
+          zIndex: 0,
+        }}
+      >
+        ERROR
+      </h1>
+      <FluentEmoji emoji={'🤧'} size={64} />
+      <h2 style={{ fontWeight: 'bold', marginTop: '1em', textAlign: 'center' }}>
+        页面遇到一点问题...
+      </h2>
+      <p style={{ marginBottom: '2em' }}>
+        项目当前正在施工中，不保证数据稳定性，如果遇到问题可以尝试
+        <ClearChat text="清除会话消息" type={'link'} />
+        或 <ResetConfig text="重置系统设置" type={'link'} />
+        ，造成地不便敬请谅解
+      </p>
+      <Flexbox gap={12} horizontal style={{ marginBottom: '1em' }}>
+        <Button onClick={() => reset()}>重新加载</Button>
+        <Link href="/">
+          <Button type={'primary'}>返回首页</Button>
+        </Link>
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+ErrorCapture.displayName = 'ErrorCapture';
+
+export default ErrorCapture;
diff --git a/src/constants/common.ts b/src/constants/common.ts
@@ -9,6 +9,8 @@ export const LOADING_FLAG = '...';
 export const DEFAULT_USER_AVATAR = '😀';
 
 export const MAX_NAME_LENGTH = 20;
+
+export const MAX_WIDTH = 1024;
 export const MAX_DESCRIPTION_LENGTH = 100;
 export const MAX_GREETING_LENGTH = 200;
 export const MAX_README_LENGTH = 800;

diff --git a/src/features/Actions/ClearSession.tsx b/src/features/Actions/ClearSession.tsx
@@ -0,0 +1,41 @@
+import { App, Button } from 'antd';
+import { ButtonType } from 'antd/es/button';
+import React from 'react';
+
+import { useAgentStore } from '@/store/agent';
+import { useSessionStore } from '@/store/session';
+
+interface Props {
+  text?: string;
+  type?: ButtonType;
+}
+export default (props: Props) => {
+  const { text = '立即清除', type = 'primary' } = props;
+  const clearAgentStorage = useAgentStore((s) => s.clearAgentStorage);
+  const clearSessions = useSessionStore((s) => s.clearSessions);
+  const { message, modal } = App.useApp();
+
+  const handleClear = () => {
+    modal.confirm({
+      cancelText: '取消',
+      centered: true,
+      content: '操作无法撤销，清除后数据将无法恢复，请慎重操作',
+      okButtonProps: {
+        danger: true,
+      },
+      okText: '确定',
+      onOk: () => {
+        clearSessions();
+        clearAgentStorage();
+        message.success('清除成功');
+      },
+      title: '确认清除所有会话消息?',
+    });
+  };
+
+  return (
+    <Button danger onClick={handleClear} type={type}>
+      {text}
+    </Button>
+  );
+};
diff --git a/src/features/Actions/ResetConfig.tsx b/src/features/Actions/ResetConfig.tsx
@@ -0,0 +1,38 @@
+import { App, Button } from 'antd';
+import { ButtonType } from 'antd/es/button';
+import React from 'react';
+
+import { useSettingStore } from '@/store/setting';
+
+interface Props {
+  text?: string;
+  type?: ButtonType;
+}
+export default (props: Props) => {
+  const { text = '立即重置', type = 'primary' } = props;
+  const resetConfig = useSettingStore((s) => s.resetConfig);
+  const { message, modal } = App.useApp();
+
+  const handleReset = () => {
+    modal.confirm({
+      cancelText: '取消',
+      centered: true,
+      content: '操作无法撤销，重置后数据将无法恢复，请慎重操作',
+      okButtonProps: {
+        danger: true,
+      },
+      okText: '确定',
+      onOk: () => {
+        resetConfig();
+        message.success('重置成功');
+      },
+      title: '确认重置所有系统设置?',
+    });
+  };
+
+  return (
+    <Button danger onClick={handleReset} type={type}>
+      {text}
+    </Button>
+  );
+};
diff --git a/src/features/DebugUI/index.tsx b/src/features/DebugUI/index.tsx
@@ -0,0 +1,20 @@
+'use client';
+
+import { Icon } from '@lobehub/ui';
+import { FloatButton } from 'antd';
+import { LucideBugPlay } from 'lucide-react';
+import { memo } from 'react';
+
+const DebugUI = memo(() => {
+  return (
+    <FloatButton
+      icon={<Icon icon={LucideBugPlay} />}
+      onClick={async () => {
+        throw new Error('触发错误');
+      }}
+      tooltip={'触发错误'}
+    />
+  );
+});
+
+export default DebugUI;
diff --git a/src/features/Settings/common.tsx b/src/features/Settings/common.tsx
@@ -1,17 +1,15 @@
 import { Form, FormGroup, FormItem } from '@lobehub/ui';
-import { App, Button } from 'antd';
 import { createStyles } from 'antd-style';
 import classNames from 'classnames';
 import { Monitor, Settings2, User2Icon } from 'lucide-react';
 import React from 'react';
 
+import ResetConfig from '@/features/Actions/ClearSession';
+import ClearChat from '@/features/Actions/ResetConfig';
 import BackgroundEffect from '@/features/Settings/features/BackgroundEffect';
 import NickName from '@/features/Settings/features/NickName';
 import ThemeSwatchesNetural from '@/features/Settings/features/ThemeSwatchesNetural';
 import ThemeSwatchesPrimary from '@/features/Settings/features/ThemeSwatchesPrimary';
-import { useAgentStore } from '@/store/agent';
-import { useSessionStore } from '@/store/session';
-import { useSettingStore } from '@/store/setting';
 
 import AvatarWithUpload from './features/AvatarWithUpload';
 
@@ -35,45 +33,6 @@ const useStyles = createStyles(({ css }) => ({
 const CommonConfig = (props: CommonConfigProps) => {
   const { style, className } = props;
   const { styles } = useStyles();
-  const clearAgentStorage = useAgentStore((s) => s.clearAgentStorage);
-  const clearSessions = useSessionStore((s) => s.clearSessions);
-  const resetConfig = useSettingStore((s) => s.resetConfig);
-  const { message, modal } = App.useApp();
-
-  const handleClear = () => {
-    modal.confirm({
-      cancelText: '取消',
-      centered: true,
-      content: '操作无法撤销，清除后数据将无法恢复，请慎重操作',
-      okButtonProps: {
-        danger: true,
-      },
-      okText: '确定',
-      onOk: () => {
-        clearSessions();
-        clearAgentStorage();
-        message.success('清除成功');
-      },
-      title: '确认清除所有会话消息?',
-    });
-  };
-
-  const handleReset = () => {
-    modal.confirm({
-      cancelText: '取消',
-      centered: true,
-      content: '操作无法撤销，重置后数据将无法恢复，请慎重操作',
-      okButtonProps: {
-        danger: true,
-      },
-      okText: '确定',
-      onOk: () => {
-        resetConfig();
-        message.success('重置成功');
-      },
-      title: '确认重置所有系统设置?',
-    });
-  };
 
   return (
     <div className={classNames(styles.config, className)} style={style}>
@@ -108,18 +67,14 @@ const CommonConfig = (props: CommonConfigProps) => {
             divider
             label={'清除所有会话消息'}
           >
-            <Button danger onClick={handleClear} type={'primary'}>
-              立即清除
-            </Button>
+            <ClearChat />
           </FormItem>
           <FormItem
             desc={'将会重置所有系统设置，包括主题设置、聊天设置、语言模型设置等'}
             divider
             label={'重置系统设置'}
           >
-            <Button danger onClick={handleReset} type={'primary'}>
-              立即重置
-            </Button>
+            <ResetConfig />
           </FormItem>
         </FormGroup>
       </Form>

diff --git a/src/layout/Header/index.tsx b/src/layout/Header/index.tsx
@@ -9,7 +9,6 @@ import { memo } from 'react';
 import Discord from '@/features/Actions/Discord';
 import Github from '@/features/Actions/Github';
 import ThemeMode from '@/features/Actions/ThemeMode';
-import UserAvatar from '@/features/Actions/UserAvatar';
 import { HeaderNavKey } from '@/layout/type';
 
 interface Props {
@@ -23,10 +22,10 @@ const Header = (props: Props) => {
   return (
     <LobeHeader
       actions={[
-        <UserAvatar key="user" />,
         <Github key="github" />,
         <ThemeMode key={'theme'} />,
         <Discord key={'discord'} />,
+        // <UserAvatar key="user" />,
       ]}
       logo={
         <Space>

diff --git a/src/layout/index.tsx b/src/layout/index.tsx
@@ -1,13 +1,20 @@
 import { PrimaryColors } from '@lobehub/ui';
 import { ThemeAppearance } from 'antd-style';
+import dynamic from 'next/dynamic';
 import { cookies } from 'next/headers';
-import { ReactNode } from 'react';
+import { FC, ReactNode } from 'react';
 
 import { VIDOL_THEME_NEUTRAL_COLOR, VIDOL_THEME_PRIMARY_COLOR } from '@/constants/theme';
 import AppTheme from '@/layout/AppTheme';
 import StoreHydration from '@/layout/StoreHydration';
 import StyleRegistry from '@/layout/StyleRegistry';
 
+let DebugUI: FC = () => null;
+
+if (process.env.NODE_ENV === 'development') {
+  DebugUI = dynamic(() => import('@/features/DebugUI'), { ssr: false }) as FC;
+}
+
 export interface LayoutProps {
   children?: ReactNode;
   defaultAppearance?: ThemeAppearance;
@@ -27,6 +34,7 @@ const Layout = (props: LayoutProps) => {
         defaultNeutralColor={neutralColor?.value as any}
         defaultPrimaryColor={primaryColor?.value as any}
       >
+        <DebugUI />
         <StoreHydration />
         {children}
       </AppTheme>