feat: 调整错误提示

src/components/ErrorBoundary.js

@@ -18,31 +18,21 @@ class ErrorBoundary extends React.Component {
     }
 
     static getDerivedStateFromError(error) {
-        // 开发环境：不拦截错误，让 React DevTools 显示完整堆栈
-        if (process.env.NODE_ENV === 'development') {
-            return { hasError: false };
-        }
-        // 生产环境：拦截错误，显示友好界面
+        // 所有环境都捕获错误，避免无限重渲染
         return { hasError: true };
     }
 
     componentDidCatch(error, errorInfo) {
-        // 开发环境：打印错误到控制台，但不显示错误边界
-        if (process.env.NODE_ENV === 'development') {
-            logger.error('ErrorBoundary', 'componentDidCatch', error, {
-                componentStack: errorInfo.componentStack,
-                developmentMode: true
-            });
-            // 不更新 state，让错误继续抛出
-            return;
-        }
-
-        // 生产环境：保存错误信息到 state
-        logger.error('ErrorBoundary', 'componentDidCatch', error, {
+        // 记录详细的错误日志
+        logger.error('ErrorBoundary', 'Component Error Caught', error, {
             componentStack: errorInfo.componentStack,
-            productionMode: true
+            errorName: error.name,
+            errorMessage: error.message,
+            environment: process.env.NODE_ENV,
+            stack: error.stack
         });
 
+        // 保存错误信息到 state
         this.setState({
             error: error,
             errorInfo: errorInfo
@@ -50,12 +40,7 @@ class ErrorBoundary extends React.Component {
     }
 
     render() {
-        // 开发环境：直接渲染子组件，不显示错误边界
-        if (process.env.NODE_ENV === 'development') {
-            return this.props.children;
-        }
-
-        // 生产环境：如果有错误，显示错误边界
+        // 如果有错误，显示错误边界（所有环境）
         if (this.state.hasError) {
             return (
                 <Container maxW="lg" py={20}>
@@ -67,31 +52,45 @@ class ErrorBoundary extends React.Component {
                                     页面出现错误！
                                 </AlertTitle>
                                 <AlertDescription>
-                                    页面加载时发生了未预期的错误，请尝试刷新页面。
+                                    {process.env.NODE_ENV === 'development'
+                                        ? '组件渲染时发生错误，请查看下方详情和控制台日志。'
+                                        : '页面加载时发生了未预期的错误，请尝试刷新页面。'}
                                 </AlertDescription>
                             </Box>
                         </Alert>
 
-                        {process.env.NODE_ENV === 'development' && (
+                        {/* 开发环境显示详细错误信息 */}
+                        {process.env.NODE_ENV === 'development' && this.state.error && (
                             <Box
                                 w="100%"
-                                bg="gray.50"
+                                bg="red.50"
                                 p={4}
                                 borderRadius="lg"
                                 fontSize="sm"
                                 overflow="auto"
-                                maxH="200px"
+                                maxH="400px"
+                                border="1px"
+                                borderColor="red.200"
                             >
-                                <Box fontWeight="bold" mb={2}>错误详情:</Box>
-                                <Box as="pre" whiteSpace="pre-wrap">
-                                    {this.state.error && this.state.error.toString()}
-                                    {this.state.errorInfo && this.state.errorInfo.componentStack}
+                                <Box fontWeight="bold" mb={2} color="red.700">错误详情:</Box>
+                                <Box as="pre" whiteSpace="pre-wrap" color="red.900" fontSize="xs">
+                                    <Box fontWeight="bold" mb={1}>{this.state.error.name}: {this.state.error.message}</Box>
+                                    {this.state.error.stack && (
+                                        <Box mt={2} color="gray.700">{this.state.error.stack}</Box>
+                                    )}
+                                    {this.state.errorInfo && this.state.errorInfo.componentStack && (
+                                        <>
+                                            <Box fontWeight="bold" mt={3} mb={1} color="red.700">组件堆栈:</Box>
+                                            <Box color="gray.700">{this.state.errorInfo.componentStack}</Box>
+                                        </>
+                                    )}
                                 </Box>
                             </Box>
                         )}
 
                         <Button
                             colorScheme="blue"
+                            size="lg"
                             onClick={() => window.location.reload()}
                         >
                             重新加载页面