109 lines
4.6 KiB
JavaScript
Executable File
109 lines
4.6 KiB
JavaScript
Executable File
import React from 'react';
|
|
// import {
|
|
// Box,
|
|
// Alert,
|
|
// AlertIcon,
|
|
// AlertTitle,
|
|
// AlertDescription,
|
|
// Button,
|
|
// VStack,
|
|
// Container
|
|
// } from '@chakra-ui/react';
|
|
import { logger } from '../utils/logger';
|
|
|
|
class ErrorBoundary extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = { hasError: false, error: null, errorInfo: null };
|
|
}
|
|
|
|
static getDerivedStateFromError(error) {
|
|
// 所有环境都捕获错误，避免无限重渲染
|
|
return { hasError: true };
|
|
}
|
|
|
|
componentDidCatch(error, errorInfo) {
|
|
// 记录详细的错误日志
|
|
logger.error('ErrorBoundary', 'Component Error Caught', error, {
|
|
componentStack: errorInfo.componentStack,
|
|
errorName: error.name,
|
|
errorMessage: error.message,
|
|
environment: process.env.NODE_ENV,
|
|
stack: error.stack
|
|
});
|
|
|
|
// 保存错误信息到 state
|
|
this.setState({
|
|
error: error,
|
|
errorInfo: errorInfo
|
|
});
|
|
}
|
|
|
|
render() {
|
|
// 静默模式：捕获错误并记录日志（已在 componentDidCatch 中完成）
|
|
// 但继续渲染子组件，不显示错误页面
|
|
// 注意：如果组件因错误无法渲染，该区域可能显示为空白
|
|
// // 如果有错误，显示错误边界（所有环境）
|
|
// if (this.state.hasError) {
|
|
// return (
|
|
// <Container maxW="lg" py={20}>
|
|
// <VStack spacing={6}>
|
|
// <Alert status="error" borderRadius="lg" p={6}>
|
|
// <AlertIcon boxSize="24px" />
|
|
// <Box>
|
|
// <AlertTitle fontSize="lg" mb={2}>
|
|
// 页面出现错误！
|
|
// </AlertTitle>
|
|
// <AlertDescription>
|
|
// {process.env.NODE_ENV === 'development'
|
|
// ? '组件渲染时发生错误，请查看下方详情和控制台日志。'
|
|
// : '页面加载时发生了未预期的错误，请尝试刷新页面。'}
|
|
// </AlertDescription>
|
|
// </Box>
|
|
// </Alert>
|
|
|
|
// {/* 开发环境显示详细错误信息 */}
|
|
// {process.env.NODE_ENV === 'development' && this.state.error && (
|
|
// <Box
|
|
// w="100%"
|
|
// bg="red.50"
|
|
// p={4}
|
|
// borderRadius="lg"
|
|
// fontSize="sm"
|
|
// overflow="auto"
|
|
// maxH="400px"
|
|
// border="1px"
|
|
// borderColor="red.200"
|
|
// >
|
|
// <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()}
|
|
// >
|
|
// 重新加载页面
|
|
// </Button>
|
|
// </VStack>
|
|
// </Container>
|
|
// );
|
|
// }
|
|
return this.props.children;
|
|
}
|
|
}
|
|
|
|
export default ErrorBoundary; |