baozaotumao
008ffc4889
- 横切层：utils/logger（统一日志，禁 console.log）、services/wsClient（通用 WS 客户端）、 components/ErrorBoundary（错误边界）；main.tsx 接 ErrorBoundary + Toaster - 接通 tailwind：补 tailwind.config.js + postcss.config.js + @tailwind 指令 （此前 tailwindcss/postcss/autoprefixer 是悬空依赖，无配置） - vite-env.d.ts：VITE_ 环境变量类型（按 include_backend 渲染） - App.tsx 改用 tailwind utility class（规则禁自定义 CSS） - 验证：build/lint/typecheck 三门禁全过 至此三服务架构基座完成：copier 预生成横切层，每个生成项目第一天即结构完整、能跑、过门禁。
27 lines
774 B
TypeScript
27 lines
774 B
TypeScript
import { Component, type ErrorInfo, type ReactNode } from "react";
|
||
|
||
import { logger } from "../utils/logger";
|
||
|
||
type Props = { children: ReactNode };
|
||
type State = { hasError: boolean };
|
||
|
||
// 组件级错误边界：捕获渲染异常，记录日志并展示兜底 UI。
|
||
export class ErrorBoundary extends Component<Props, State> {
|
||
state: State = { hasError: false };
|
||
|
||
static getDerivedStateFromError(): State {
|
||
return { hasError: true };
|
||
}
|
||
|
||
componentDidCatch(error: Error, info: ErrorInfo): void {
|
||
logger.error("component error", { message: error.message, info });
|
||
}
|
||
|
||
render(): ReactNode {
|
||
if (this.state.hasError) {
|
||
return <div className="p-8 text-red-600">页面出错了，请刷新重试。</div>;
|
||
}
|
||
return this.props.children;
|
||
}
|
||
}
|