add: subpage error handle component

package.json

@@ -25,7 +25,7 @@
     "dependencies": {
         "@ant-design/cssinjs": "^1.20.0",
         "@ant-design/icons": "^5.3.6",
-        "@ant-design/pro-components": "^2.7.1",
+        "@ant-design/pro-components": "^2.7.14",
         "@emotion/react": "^11.11.4",
         "@tabler/icons-react": "^3.2.0",
         "ahooks": "^3.7.11",
@@ -36,7 +36,7 @@
         "fortea": "^1.0.9",
         "i18next": "^23.11.3",
         "i18next-browser-languagedetector": "^7.2.1",
-        "keepalive-for-react": "^2.0.7",
+        "keepalive-for-react": "^2.0.9",
         "lodash": "^4.17.21",
         "react": "18.2.0",
         "react-beautiful-dnd": "^13.1.1",

src/components/SubpageErrorBoundary/index.tsx

@@ -0,0 +1,81 @@
+import { Component, ErrorInfo, ReactNode } from "react"
+
+interface SubpageErrorBoundaryProps {
+    children: ReactNode
+}
+
+interface SubpageErrorBoundaryState {
+    hasError: boolean
+    error?: Error
+    errorStackInfo?: ErrorInfo
+    showErrorMessage: boolean
+}
+
+class SubpageErrorBoundary extends Component<SubpageErrorBoundaryProps, SubpageErrorBoundaryState> {
+    constructor(props: SubpageErrorBoundaryProps) {
+        super(props)
+        this.state = { hasError: false, showErrorMessage: false }
+    }
+
+    static getDerivedStateFromError(_: Error): SubpageErrorBoundaryState {
+        // Update state so the next render will show the fallback UI.
+        return { hasError: true, showErrorMessage: false }
+    }
+
+    componentDidCatch(error: Error, errorStackInfo: ErrorInfo) {
+        // You can log the error to an error reporting service
+        console.error("Uncaught error:", error, errorStackInfo)
+        this.setState({
+            error,
+            errorStackInfo,
+        })
+    }
+
+    render() {
+        const { hasError, error, showErrorMessage } = this.state
+        const { children } = this.props
+
+        if (hasError) {
+            return (
+                <div
+                    className={
+                        "flex flex-col items-center justify-center bg-white min-h-[600px] dark:bg-[#0F1318] p-[20px]"
+                    }
+                >
+                    <div>
+                        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24">
+                            <path
+                                fill="currentColor"
+                                d="M20 2H4c-1.103 0-2 .897-2 2v12c0 1.103.897 2 2 2h3v3.767L13.277 18H20c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2m0 14h-7.277L9 18.233V16H4V4h16z"
+                            />
+                            <path fill="currentColor" d="M11 6h2v5h-2zm0 6h2v2h-2z" />
+                        </svg>
+                    </div>
+                    <h1 className={"text-[18px] mb-[0px] mt-[16px] font-bold"}>sorry, the page crashed!</h1>
+                    <div className={"text-[14px] mt-[14px] "}>Try refreshing the page or contact the administrator</div>
+
+                    {error?.message && (
+                        <div
+                            className={"mt-[10px] text-[12px] underline cursor-pointer"}
+                            onClick={() => {
+                                this.setState({
+                                    showErrorMessage: !showErrorMessage,
+                                })
+                            }}
+                        >
+                            view error message
+                        </div>
+                    )}
+                    {showErrorMessage && (
+                        <div className={"mt-[10px] rounded p-[20px] bg-gray-100 dark:bg-gray-950"}>
+                            <code className={"mt-[10px] "}>{error?.message}</code>
+                        </div>
+                    )}
+                </div>
+            )
+        }
+        return children
+    }
+}
+
+export default SubpageErrorBoundary

src/layout/components/KeepAliveOutlet/index.tsx

@@ -1,9 +1,10 @@
 import { useLocation, useOutlet } from "react-router-dom"
-import { Fragment, Suspense, useMemo } from "react"
+import { Suspense, useMemo } from "react"
 import KeepAlive from "keepalive-for-react"
 import Loading from "@/components/Loading"
 import { findAdminRouteByUrl } from "@/router/config.tsx"
 import usePageContext from "@/components/AdminPagesProvider/usePageContext"
+import SubpageErrorBoundary from "@/components/SubpageErrorBoundary"
 
 function KeepAliveOutlet() {
     const { getKeepAliveRef } = usePageContext()
@@ -24,6 +25,28 @@ function KeepAliveOutlet() {
     return (
         <Suspense fallback={<Loading />}>
             <KeepAlive
+                errorElement={SubpageErrorBoundary}
+                onBeforeActive={() => {
+                    const dropdowns = document.querySelectorAll(".ant-select-dropdown")
+                    dropdowns.forEach(dropdown => {
+                        if (dropdown) {
+                            dropdown.setAttribute("style", "")
+                        }
+                    })
+                    const pickerDropdowns = document.querySelectorAll(".ant-picker-dropdown")
+                    pickerDropdowns.forEach(pickerDropdown => {
+                        if (pickerDropdown) {
+                            pickerDropdown.setAttribute("style", "")
+                        }
+                    })
+                    // ant-dropdown
+                    const dropdowns2 = document.querySelectorAll(".ant-dropdown")
+                    dropdowns2.forEach(dropdown => {
+                        if (dropdown) {
+                            dropdown.setAttribute("style", "")
+                        }
+                    })
+                }}
                 aliveRef={keepAliveRef}
                 cache={currentRoute?.cache}
                 activeName={active}

src/pages/index/nested/menu1/index.tsx

@@ -1,11 +1,20 @@
-import { Divider } from "antd"
+import { DatePicker, Divider, Select } from "antd"
 
 function Menu1() {
     return (
         <div className={"p-[20px]"}>
             <h1 className={"text-center text-2xl"}>Menu1</h1>
             <Divider />
             <p className={"text-center text-[#999] dark:text-[#ccc]"}>This is a demo page for nested routing.</p>
+            <div>
+                <DatePicker />
+                <Select
+                    placeholder={"Select"}
+                    style={{
+                        width: 120,
+                    }}
+                />
+            </div>
         </div>
     )
 }