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 React from 'react';
import { // import {
Box, // Box,
Alert, // Alert,
AlertIcon, // AlertIcon,
AlertTitle, // AlertTitle,
AlertDescription, // AlertDescription,
Button, // Button,
VStack, // VStack,
Container // Container
} from '@chakra-ui/react'; // } from '@chakra-ui/react';
import { logger } from '../utils/logger'; import { logger } from '../utils/logger';
class ErrorBoundary extends React.Component { class ErrorBoundary extends React.Component {
@@ -40,66 +40,68 @@ class ErrorBoundary extends React.Component {
} }
render() { render() {
// 如果有错误，显示错误边界（所有环境） // 静默模式：捕获错误并记录日志（已在 componentDidCatch 中完成）
if (this.state.hasError) { // 但继续渲染子组件，不显示错误页面
return ( // 注意：如果组件因错误无法渲染，该区域可能显示为空白
<Container maxW="lg" py={20}> // // 如果有错误，显示错误边界（所有环境）
<VStack spacing={6}> // if (this.state.hasError) {
<Alert status="error" borderRadius="lg" p={6}> // return (
<AlertIcon boxSize="24px" /> // <Container maxW="lg" py={20}>
<Box> // <VStack spacing={6}>
<AlertTitle fontSize="lg" mb={2}> // <Alert status="error" borderRadius="lg" p={6}>
页面出现错误！ // <AlertIcon boxSize="24px" />
</AlertTitle> // <Box>
<AlertDescription> // <AlertTitle fontSize="lg" mb={2}>
{process.env.NODE_ENV === 'development' // 页面出现错误！
? '组件渲染时发生错误，请查看下方详情和控制台日志。' // </AlertTitle>
: '页面加载时发生了未预期的错误，请尝试刷新页面。'} // <AlertDescription>
</AlertDescription> // {process.env.NODE_ENV === 'development'
</Box> // ? '组件渲染时发生错误，请查看下方详情和控制台日志。'
</Alert> // : '页面加载时发生了未预期的错误，请尝试刷新页面。'}
// </AlertDescription>
// </Box>
// </Alert>
{/* 开发环境显示详细错误信息 */} // {/* 开发环境显示详细错误信息 */}
{process.env.NODE_ENV === 'development' && this.state.error && ( // {process.env.NODE_ENV === 'development' && this.state.error && (
<Box // <Box
w="100%" // w="100%"
bg="red.50" // bg="red.50"
p={4} // p={4}
borderRadius="lg" // borderRadius="lg"
fontSize="sm" // fontSize="sm"
overflow="auto" // overflow="auto"
maxH="400px" // maxH="400px"
border="1px" // border="1px"
borderColor="red.200" // borderColor="red.200"
> // >
<Box fontWeight="bold" mb={2} color="red.700">错误详情:</Box> // <Box fontWeight="bold" mb={2} color="red.700">错误详情:</Box>
<Box as="pre" whiteSpace="pre-wrap" color="red.900" fontSize="xs"> // <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> // <Box fontWeight="bold" mb={1}>{this.state.error.name}: {this.state.error.message}</Box>
{this.state.error.stack && ( // {this.state.error.stack && (
<Box mt={2} color="gray.700">{this.state.error.stack}</Box> // <Box mt={2} color="gray.700">{this.state.error.stack}</Box>
)} // )}
{this.state.errorInfo && this.state.errorInfo.componentStack && ( // {this.state.errorInfo && this.state.errorInfo.componentStack && (
<> // <>
<Box fontWeight="bold" mt={3} mb={1} color="red.700">组件堆栈:</Box> // <Box fontWeight="bold" mt={3} mb={1} color="red.700">组件堆栈:</Box>
<Box color="gray.700">{this.state.errorInfo.componentStack}</Box> // <Box color="gray.700">{this.state.errorInfo.componentStack}</Box>
</> // </>
)} // )}
</Box> // </Box>
</Box> // </Box>
)} // )}
<Button
colorScheme="blue"
size="lg"
onClick={() => window.location.reload()}
>
重新加载页面
</Button>
</VStack>
</Container>
);
}
// <Button
// colorScheme="blue"
// size="lg"
// onClick={() => window.location.reload()}
// >
// 重新加载页面
// </Button>
// </VStack>
// </Container>
// );
// }
return this.props.children; return this.props.children;
} }
} }