100 lines
2.9 KiB
TypeScript
100 lines
2.9 KiB
TypeScript
"use client"
|
||
|
||
import React, { type ErrorInfo } from "react"
|
||
import { Card, CardContent, CardFooter } from "@/components/ui/card"
|
||
import { Button } from "@/components/ui/button"
|
||
import { useRouter } from "next/navigation"
|
||
import { useToast } from "@/components/ui/use-toast"
|
||
|
||
interface ErrorBoundaryProps {
|
||
children: React.ReactNode
|
||
}
|
||
|
||
interface ErrorBoundaryState {
|
||
hasError: boolean
|
||
error?: Error
|
||
}
|
||
|
||
class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
|
||
constructor(props: ErrorBoundaryProps) {
|
||
super(props)
|
||
this.state = { hasError: false }
|
||
}
|
||
|
||
static getDerivedStateFromError(error: Error): ErrorBoundaryState {
|
||
// 更新state使下一次渲染可以显示错误界面
|
||
return { hasError: true, error }
|
||
}
|
||
|
||
componentDidCatch(error: Error, errorInfo: ErrorInfo) {
|
||
// 记录错误信息
|
||
console.error("错误边界捕获到错误:", error, errorInfo)
|
||
}
|
||
|
||
render() {
|
||
if (this.state.hasError) {
|
||
return <ErrorScreen error={this.state.error} onReset={() => this.setState({ hasError: false })} />
|
||
}
|
||
|
||
return this.props.children
|
||
}
|
||
}
|
||
|
||
// 错误显示界面
|
||
function ErrorScreen({ error, onReset }: { error?: Error; onReset: () => void }) {
|
||
const router = useRouter()
|
||
const { toast } = useToast()
|
||
|
||
// 导航到主页
|
||
const goHome = () => {
|
||
router.push("/dashboard")
|
||
onReset()
|
||
}
|
||
|
||
// 刷新当前页面
|
||
const refreshPage = () => {
|
||
if (typeof window !== "undefined") {
|
||
toast({
|
||
title: "正在刷新页面",
|
||
description: "正在重新加载页面内容...",
|
||
variant: "default",
|
||
})
|
||
setTimeout(() => {
|
||
window.location.reload()
|
||
}, 500)
|
||
}
|
||
}
|
||
|
||
return (
|
||
<div className="w-full h-[calc(100vh-200px)] flex items-center justify-center p-4">
|
||
<Card className="w-full max-w-md">
|
||
<CardContent className="pt-6">
|
||
<div className="flex flex-col gap-4">
|
||
<div className="bg-red-50 text-red-600 p-4 rounded-md">
|
||
<h2 className="text-xl font-semibold mb-2">页面出错了</h2>
|
||
<p className="text-sm text-red-700 mb-4">
|
||
很抱歉，页面加载过程中遇到了问题。
|
||
</p>
|
||
{error && (
|
||
<div className="bg-white/50 p-2 rounded text-xs font-mono overflow-auto max-h-24">
|
||
{error.message}
|
||
</div>
|
||
)}
|
||
</div>
|
||
<p className="text-sm text-gray-500">
|
||
您可以尝试刷新页面或返回首页。如果问题持续存在，请联系系统管理员。
|
||
</p>
|
||
</div>
|
||
</CardContent>
|
||
<CardFooter className="flex justify-end gap-2">
|
||
<Button variant="outline" onClick={goHome}>
|
||
返回首页
|
||
</Button>
|
||
<Button onClick={refreshPage}>刷新页面</Button>
|
||
</CardFooter>
|
||
</Card>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default ErrorBoundary
|