e46d8f28d1
Some checks failed
部署管理后台 / 🧪 测试和构建 (push) Failing after 1m6s
部署管理后台 / 🔒 安全扫描 (push) Has been skipped
部署后端服务 / 🚀 构建并部署 (push) Failing after 12m23s
部署管理后台 / 🚀 部署到生产环境 (push) Has been skipped
部署管理后台 / 🔄 回滚部署 (push) Has been skipped
部署后端服务 / 🔄 回滚部署 (push) Failing after 1m34s
## 修复内容 ### ErrorBoundary.tsx - 为错误边界中的 console.error 添加 ESLint 忽略注释 - 保留错误日志功能，用于调试和错误追踪 ### TestApi.tsx - 移除所有 console.log 和 console.error 语句 - 使用 toast 通知替代控制台输出 - 简化 catch 块，移除未使用的 error 参数 - 提升用户体验，通过 UI 反馈替代控制台日志 ## 技术细节 - ESLint 警告从 7 个减少到 0 个 - 保持功能完整性，仅移除调试日志 - 符合生产环境代码质量标准 ## 测试验证 ✅ `bun run lint` 通过，无警告 ✅ 功能逻辑保持不变 ✅ 用户界面反馈完整
111 lines
3.4 KiB
TypeScript
111 lines
3.4 KiB
TypeScript
import { Component, ErrorInfo, ReactNode } from 'react'
|
||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||
import { Button } from '@/components/ui/button'
|
||
import { Alert, AlertDescription } from '@/components/ui/alert'
|
||
import { AlertTriangle, RefreshCw, Home } from 'lucide-react'
|
||
|
||
interface Props {
|
||
children: ReactNode
|
||
fallback?: ReactNode
|
||
}
|
||
|
||
interface State {
|
||
hasError: boolean
|
||
error?: Error
|
||
errorInfo?: ErrorInfo
|
||
}
|
||
|
||
export class ErrorBoundary extends Component<Props, State> {
|
||
constructor(props: Props) {
|
||
super(props)
|
||
this.state = { hasError: false }
|
||
}
|
||
|
||
static getDerivedStateFromError(error: Error): State {
|
||
return { hasError: true, error }
|
||
}
|
||
|
||
componentDidCatch(error: Error, errorInfo: ErrorInfo) {
|
||
this.setState({
|
||
error,
|
||
errorInfo
|
||
})
|
||
|
||
// 这里可以将错误发送到日志服务
|
||
// eslint-disable-next-line no-console
|
||
console.error('ErrorBoundary caught an error:', error, errorInfo)
|
||
}
|
||
|
||
handleRetry = () => {
|
||
this.setState({ hasError: false, error: undefined, errorInfo: undefined })
|
||
}
|
||
|
||
handleGoHome = () => {
|
||
window.location.href = '/dashboard'
|
||
}
|
||
|
||
render() {
|
||
if (this.state.hasError) {
|
||
if (this.props.fallback) {
|
||
return this.props.fallback
|
||
}
|
||
|
||
return (
|
||
<div className="min-h-screen flex items-center justify-center bg-gray-50 p-4">
|
||
<Card className="w-full max-w-md">
|
||
<CardHeader className="text-center">
|
||
<div className="flex justify-center mb-4">
|
||
<AlertTriangle className="h-12 w-12 text-red-500" />
|
||
</div>
|
||
<CardTitle className="text-xl">出错了</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4">
|
||
<Alert variant="destructive">
|
||
<AlertTriangle className="h-4 w-4" />
|
||
<AlertDescription>
|
||
页面遇到了一个错误，无法正常显示。请尝试刷新页面或返回首页。
|
||
</AlertDescription>
|
||
</Alert>
|
||
|
||
{import.meta.env.DEV && this.state.error && (
|
||
<div className="p-4 bg-gray-100 rounded-md">
|
||
<h4 className="font-medium text-sm mb-2">错误详情：</h4>
|
||
<pre className="text-xs text-red-600 whitespace-pre-wrap">
|
||
{this.state.error.toString()}
|
||
</pre>
|
||
{this.state.errorInfo && (
|
||
<pre className="text-xs text-gray-600 mt-2 whitespace-pre-wrap">
|
||
{this.state.errorInfo.componentStack}
|
||
</pre>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
<div className="flex gap-2">
|
||
<Button
|
||
onClick={this.handleRetry}
|
||
className="flex-1"
|
||
variant="outline"
|
||
>
|
||
<RefreshCw className="h-4 w-4 mr-2" />
|
||
重试
|
||
</Button>
|
||
<Button
|
||
onClick={this.handleGoHome}
|
||
className="flex-1"
|
||
>
|
||
<Home className="h-4 w-4 mr-2" />
|
||
返回首页
|
||
</Button>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
return this.props.children
|
||
}
|
||
}
|
||
|
||
export default ErrorBoundary |