优化错误处理和header点击逻辑

awesomeYG · awesomeYG · commit 583f050a5e72 · 2025-10-25T17:07:17.000+08:00
- 修复序列化错误问题，创建安全的错误处理工具
- 改进ServerErrorBoundary组件，避免序列化失败
- 优化header组件logo点击逻辑，当forum为空时跳转到登录页
- 统一API调用的错误处理，提供优雅降级
- 删除不再使用的RootRedirect组件
diff --git a/ui/front/src/app/layout.tsx b/ui/front/src/app/layout.tsx
@@ -5,6 +5,7 @@ import { AuthProvider, CommonProvider } from '@/components'
 import { ForumProvider } from '@/contexts/ForumContext'
 import { AuthConfigProvider } from '@/contexts/AuthConfigContext'
 import ServerErrorBoundary from '@/components/ServerErrorBoundary'
+import { safeApiCall, safeLogError } from '@/lib/error-utils'
 import theme from '@/theme'
 import '@ctzhian/tiptap/dist/index.css'
 import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter'
@@ -45,7 +46,7 @@ export async function generateMetadata(): Promise<Metadata> {
     brandName = brand?.text || 'Koala QA'
   } catch (error) {
     // 构建时如果无法获取品牌信息，使用默认值
-    console.warn('Failed to fetch brand info during build:', error)
+    safeLogError('Failed to fetch brand info during build', error)
   }
   
   return {
@@ -102,10 +103,8 @@ async function getUserData() {
     const userData = await getUser()
     return userData
   } catch (error) {
-    // 静默失败，不影响页面渲染
-    if (process.env.NODE_ENV === 'development') {
-      console.error('Failed to fetch user data:', error)
-    }
+    // 使用安全的错误处理
+    safeLogError('Failed to fetch user data', error)
     return null
   }
 }
@@ -116,10 +115,8 @@ async function getForumData() {
     const forumData = await getForum()
     return forumData || []
   } catch (error) {
-    // 静默失败，不影响页面渲染
-    if (process.env.NODE_ENV === 'development') {
-      console.error('Failed to fetch forum data:', error)
-    }
+    // 使用安全的错误处理
+    safeLogError('Failed to fetch forum data', error)
     return []
   }
 }
@@ -130,10 +127,8 @@ async function getAuthConfigData() {
     const authConfigData = await getUserLoginMethod()
     return authConfigData
   } catch (error) {
-    // 静默失败，不影响页面渲染
-    if (process.env.NODE_ENV === 'development') {
-      console.error('Failed to fetch auth config data:', error)
-    }
+    // 使用安全的错误处理
+    safeLogError('Failed to fetch auth config data', error)
     return null
   }
 }
diff --git a/ui/front/src/app/page.tsx b/ui/front/src/app/page.tsx
@@ -1,13 +1,18 @@
 import { getForum } from '@/api'
+import { safeApiCall } from '@/lib/error-utils'
 import { redirect } from 'next/navigation'
 
 // 根路径重定向到第一个板块 - 服务端重定向
 export default async function RootPage() {
-  const forums = await getForum()
+  const forums = await safeApiCall(
+    () => getForum(),
+    [],
+    'Failed to fetch forums for root page redirect'
+  )
   
   if (forums && forums.length > 0) {
     redirect(`/forum/${forums[0].id}`)
   } else {
-    redirect('/not-found')
+    redirect('/login')
   }
 }
diff --git a/ui/front/src/components/RootRedirect.tsx b/ui/front/src/components/RootRedirect.tsx
diff --git a/ui/front/src/components/ServerErrorBoundary.tsx b/ui/front/src/components/ServerErrorBoundary.tsx
@@ -29,19 +29,34 @@ export class ServerErrorBoundary extends React.Component<Props, State> {
   }
 
   static getDerivedStateFromError(error: Error): State {
+    // 创建一个可序列化的错误对象，避免序列化问题
+    const serializableError = {
+      message: error.message || 'An unknown error occurred',
+      name: error.name || 'Error',
+      stack: error.stack || undefined,
+    } as Error;
+    
     return {
       hasError: true,
-      error,
+      error: serializableError,
     };
   }
 
   componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
-    console.error('ServerErrorBoundary caught an error:', error, errorInfo);
+    // 安全地记录错误信息，避免序列化问题
+    const errorMessage = error?.message || 'Unknown error';
+    const errorName = error?.name || 'Error';
+    
+    console.error('ServerErrorBoundary caught an error:', {
+      message: errorMessage,
+      name: errorName,
+      componentStack: errorInfo?.componentStack || 'No component stack available'
+    });
     
     // 服务端错误处理逻辑
     if (typeof window === 'undefined') {
-      // 服务端错误处理
-      console.error('Server-side error:', error.message);
+      // 服务端错误处理 - 可以在这里添加错误上报逻辑
+      console.error('Server-side error occurred:', errorMessage);
     }
   }
 
diff --git a/ui/front/src/components/header/index.tsx b/ui/front/src/components/header/index.tsx
@@ -45,6 +45,24 @@ const Header = ({ brandConfig, initialForums = [] }: HeaderProps) => {
     }
   }, [])
 
+  // 统一的 logo 点击处理函数
+  const handleLogoClick = () => {
+    if (isAuthPage && initialForums.length > 0) {
+      // 如果在登录/注册页面，跳转到首页
+      router.push(`/forum/${initialForums[0].id}`)
+    } else if (initialForums && initialForums.length > 0) {
+      // 如果有论坛数据，跳转到当前论坛或第一个论坛
+      if (forum_id) {
+        router.push(`/forum/${forum_id}`)
+      } else {
+        router.push(`/forum/${initialForums[0].id}`)
+      }
+    } else {
+      // 如果没有论坛数据，跳转到登录页面
+      plainRouter.push('/login')
+    }
+  }
+
   return (
     <AppBar
       position='fixed'
@@ -73,13 +91,7 @@ const Header = ({ brandConfig, initialForums = [] }: HeaderProps) => {
               alignItems='center'
               gap={1}
               sx={{ cursor: 'pointer' }}
-              onClick={() => {
-                if (isAuthPage) {
-                  plainRouter.push('/')
-                } else {
-                  router.push(forum_id ? `/forum/${forum_id}` : '/')
-                }
-              }}
+              onClick={handleLogoClick}
             >
               <Image
                 src={brandConfig.logo}
@@ -112,16 +124,15 @@ const Header = ({ brandConfig, initialForums = [] }: HeaderProps) => {
               width={120}
               height={20}
               style={{ cursor: 'pointer' }}
-              onClick={() => {
-                if (isAuthPage) {
-                  plainRouter.push('/')
-                } else {
-                  router.push(forum_id ? `/forum/${forum_id}` : '/')
-                }
-              }}
+              onClick={handleLogoClick}
+            />
+          )}
+          {Boolean(initialForums?.length) && (
+            <ForumSelector
+              selectedForumId={forum_id ? parseInt(forum_id as string) : undefined}
+              forums={initialForums}
             />
           )}
-          <ForumSelector selectedForumId={forum_id ? parseInt(forum_id as string) : undefined} forums={initialForums} />
         </Stack>
 
         <Stack
diff --git a/ui/front/src/lib/error-utils.ts b/ui/front/src/lib/error-utils.ts
@@ -0,0 +1,114 @@
+/**
+ * 错误处理工具函数
+ * 用于安全地处理错误对象，避免序列化问题
+ */
+
+/**
+ * 创建一个可序列化的错误对象
+ * 移除不可序列化的属性，如函数、循环引用等
+ */
+export function createSerializableError(error: any): Error {
+  if (!error) {
+    return new Error('Unknown error');
+  }
+
+  // 如果是 Error 对象，提取基本信息
+  if (error instanceof Error) {
+    return {
+      name: error.name || 'Error',
+      message: error.message || 'An error occurred',
+      stack: error.stack || undefined,
+    } as Error;
+  }
+
+  // 如果是普通对象，尝试提取错误信息
+  if (typeof error === 'object') {
+    const message = error.message || error.error || error.msg || 'An error occurred';
+    return {
+      name: error.name || 'Error',
+      message: String(message),
+      stack: error.stack || undefined,
+    } as Error;
+  }
+
+  // 如果是字符串或其他类型
+  return {
+    name: 'Error',
+    message: String(error),
+    stack: undefined,
+  } as Error;
+}
+
+/**
+ * 安全地记录错误信息
+ * 避免在服务端渲染时出现序列化问题
+ */
+export function safeLogError(context: string, error: any): void {
+  if (process.env.NODE_ENV === 'development') {
+    const serializableError = createSerializableError(error);
+    console.error(`${context}:`, {
+      message: serializableError.message,
+      name: serializableError.name,
+      stack: serializableError.stack,
+    });
+  }
+}
+
+/**
+ * 安全地获取错误消息
+ * 确保返回的字符串是可序列化的
+ */
+export function getErrorMessage(error: any): string {
+  if (!error) {
+    return 'Unknown error';
+  }
+
+  if (error instanceof Error) {
+    return error.message || 'An error occurred';
+  }
+
+  if (typeof error === 'object') {
+    return error.message || error.error || error.msg || 'An error occurred';
+  }
+
+  return String(error);
+}
+
+/**
+ * 包装 API 调用，提供安全的错误处理
+ */
+export async function safeApiCall<T>(
+  apiCall: () => Promise<T>,
+  fallback: T | null = null,
+  context: string = 'API call'
+): Promise<T | null> {
+  try {
+    return await apiCall();
+  } catch (error) {
+    safeLogError(context, error);
+    return fallback;
+  }
+}
+
+/**
+ * 包装多个 API 调用，提供安全的错误处理
+ */
+export async function safeBatchApiCalls<T extends Record<string, () => Promise<any>>>(
+  calls: T,
+  context: string = 'Batch API calls'
+): Promise<{ [K in keyof T]: Awaited<ReturnType<T[K]>> | null }> {
+  const results = {} as { [K in keyof T]: Awaited<ReturnType<T[K]>> | null };
+
+  await Promise.all(
+    Object.entries(calls).map(async ([key, apiCall]) => {
+      try {
+        results[key as keyof T] = await apiCall();
+      } catch (error) {
+        safeLogError(`${context} - ${key}`, error);
+        results[key as keyof T] = null;
+      }
+    })
+  );
+
+  return results;
+}
