collect-system/apps/web/src/app/error.tsx

/**
 * 错误处理模块 - 全局路由级错误展示组件
 * 功能: 捕获React Router路由层级错误并展示可视化错误信息
 * 特性: 
 * - 自动解析路由错误对象
 * - 自适应错误信息展示
 * - 响应式布局设计
 */
import { useRouteError } from "react-router-dom";

/**
 * 错误展示页面组件
 * @核心功能 呈现标准化错误界面，用于处理应用程序的路由层级错误
 * @设计模式 采用展示型组件模式，完全解耦业务逻辑实现纯UI展示
 * @使用示例 在React Router的RouterProvider中配置errorElement={<ErrorPage/>}
 */
export default function ErrorPage() {
    // 使用React Router提供的Hook获取路由错误对象
    // 类型定义为any以兼容React Router不同版本的类型差异
    const error: any = useRouteError();

    return (
        // 主容器: 基于Flex的垂直水平双居中布局
        // pt-64: 顶部留白实现视觉层次结构
        <div className="flex justify-center items-center pt-64">
            {/* 内容区块: 采用纵向弹性布局控制内部元素间距 */}
            <div className="flex flex-col gap-4">
                {/* 主标题: 强调性文字样式配置 */}
                <div className="text-xl font-bold text-primary">
                    哦?页面似乎出错了...
                </div>

                {/* 错误详情: 动态渲染错误信息，实现优雅降级策略 */}
                {/* 使用可选链操作符防止未定义错误，信息优先级: statusText > message */}
                <div className="text-tertiary">
                    {error?.statusText || error?.message}
                </div>
            </div>
        </div>
    )
}