feat: error page

src/App.tsx

@@ -3,6 +3,7 @@ import React, { useEffect, useState } from "react"
 import { useTranslation } from "react-i18next"
 import { Route, BrowserRouter as Router, Routes } from "react-router-dom"
 
+import ErrorBoundary from "./components/ErrorBoundary"
 import Footer from "./components/Footer"
 import Header from "./components/Header"
 import { InjectContext } from "./lib/inject"
@@ -56,6 +57,7 @@ const App: React.FC = () => {
 
   return (
     <Router basename={import.meta.env.BASE_URL}>
+      <ErrorBoundary>
         {/* 固定定位的背景层 */}
         {customBackgroundImage && (
           <div
@@ -87,6 +89,7 @@ const App: React.FC = () => {
             <Footer />
           </main>
         </div>
+      </ErrorBoundary>
     </Router>
   )
 }

src/components/ErrorBoundary.tsx

@@ -0,0 +1,36 @@
+import React from "react"
+
+import ErrorPage from "../pages/ErrorPage"
+
+interface Props {
+  children: React.ReactNode
+}
+
+interface State {
+  hasError: boolean
+  error?: Error
+}
+
+class ErrorBoundary extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props)
+    this.state = { hasError: false }
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return {
+      hasError: true,
+      error,
+    }
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return <ErrorPage code={500} message={this.state.error?.message || "应用程序发生错误"} />
+    }
+
+    return this.props.children
+  }
+}
+
+export default ErrorBoundary

src/pages/ErrorPage.tsx

@@ -1,6 +1,4 @@
-import { Button } from "@/components/ui/button"
 import { useTranslation } from "react-i18next"
-import { useNavigate } from "react-router-dom"
 
 interface ErrorPageProps {
   code?: string | number
@@ -8,7 +6,6 @@ interface ErrorPageProps {
 }
 
 export default function ErrorPage({ code = "500", message }: ErrorPageProps) {
-  const navigate = useNavigate()
   const { t } = useTranslation()
 
   return (
@@ -16,14 +13,6 @@ export default function ErrorPage({ code = "500", message }: ErrorPageProps) {
       <div className="flex flex-col items-center gap-2">
         <h1 className="text-4xl font-semibold">{code}</h1>
         <p className="text-xl text-muted-foreground">{message || t("error.somethingWentWrong")}</p>
-        <div className="flex gap-2">
-          <Button onClick={() => window.location.reload()} variant="outline">
-            {t("error.tryAgain")}
-          </Button>
-          <Button onClick={() => navigate("/")} className="mt-2">
-            {t("error.backToHome")}
-          </Button>
-        </div>
       </div>
     </div>
   )