vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 错误logger 不在被error页面捕获

Browse Source
This commit is contained in:
zdl
2025-10-27 21:14:51 +08:00
parent 10f519a764
commit 657c446594
1 changed files with 70 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
src/components/ErrorBoundary.js
View File

@@ -1,14 +1,14 @@
import React from 'react';
import {
Box,
Alert,
AlertIcon,
AlertTitle,
AlertDescription,
Button,
VStack,
Container
} from '@chakra-ui/react';
// import {
// Box,
// Alert,
// AlertIcon,
// AlertTitle,
// AlertDescription,
// Button,
// VStack,
// Container
// } from '@chakra-ui/react';
import { logger } from '../utils/logger';
class ErrorBoundary extends React.Component {
@@ -40,66 +40,68 @@ class ErrorBoundary extends React.Component {
}
render() {
// 如果有错误，显示错误边界（所有环境）
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>
// 静默模式：捕获错误并记录日志（已在 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>
);
}
// {/* 开发环境显示详细错误信息 */}
// {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;
}
}