错误边界与错误处理

type Props = {
  children: React.ReactNode;
  fallback: React.ReactNode | ((error: Error, reset: () => void) => React.ReactNode);
  onError?: (error: Error, info: React.ErrorInfo) => void;
};
 
type State = { error: Error | null };
 
class ErrorBoundary extends React.Component<Props, State> {
  state: State = { error: null };
 
  // 渲染阶段调用：返回新 state，用于渲染降级 UI
  static getDerivedStateFromError(error: Error): State {
    return { error };
  }
 
  // 提交阶段调用：可以做副作用，比如上报
  componentDidCatch(error: Error, info: React.ErrorInfo) {
    this.props.onError?.(error, info);
    console.error("捕获到错误:", error, info.componentStack);
  }
 
  reset = () => this.setState({ error: null });
 
  render() {
    const { error } = this.state;
    if (error !== null) {
      const { fallback } = this.props;
      return typeof fallback === "function" ? fallback(error, this.reset) : fallback;
    }
    return this.props.children;
  }
}

import { ErrorBoundary } from "react-error-boundary";
 
<ErrorBoundary
  FallbackComponent={ErrorFallback}
  onReset={() => refetch()}
  resetKeys={[userId]}          // 这些值变化时自动重置
>
  <Profile userId={userId} />
</ErrorBoundary>

async function handleSubmit() {
  try {
    await api.save(data);
    toast.success("保存成功");
  } catch (e) {
    toast.error(e instanceof Error ? e.message : "保存失败");
  }
}

function Widget() {
  const [error, setError] = useState<Error | null>(null);
 
  if (error !== null) throw error;    // 渲染期间抛，边界就能捕获
 
  useEffect(() => {
    load().catch(setError);
  }, []);
 
  return <div>…</div>;
}

import { useErrorBoundary } from "react-error-boundary";
 
function Widget() {
  const { showBoundary } = useErrorBoundary();
 
  useEffect(() => {
    load().catch(showBoundary);
  }, [showBoundary]);
 
  return <div>…</div>;
}

<ErrorBoundary fallback={<FullPageError />}>          {/* 应用级：兜底 */}
  <Layout>
    <Sidebar />
    <ErrorBoundary fallback={<PageError />}>          {/* 路由级 */}
      <Routes>…</Routes>
    </ErrorBoundary>
  </Layout>
 
  <ErrorBoundary fallback={null}>                     {/* 非关键区域：静默降级 */}
    <RecommendationWidget />
  </ErrorBoundary>
</ErrorBoundary>

function ErrorFallback({ error, resetErrorBoundary }: FallbackProps) {
  return (
    <div role="alert" className="error-page">
      <h2>这个页面遇到了一点问题</h2>
 
      {/* 给用户能理解的说明，不要直接显示技术错误 */}
      <p>我们已经记录了这个问题，你可以尝试重新加载。</p>
 
      {/* 明确的恢复动作 */}
      <div>
        <button onClick={resetErrorBoundary}>重试</button>
        <button onClick={() => location.reload()}>刷新页面</button>
        <a href="/">返回首页</a>
      </div>
 
      {/* 开发环境显示细节，生产环境藏起来 */}
      {import.meta.env.DEV && (
        <pre className="error-detail">{error.stack}</pre>
      )}
 
      {/* 给用户一个反馈渠道，附上错误 id 方便排查 */}
      <p className="hint">如果问题持续，请联系客服并提供编号：{errorId}</p>
    </div>
  );
}

<ErrorBoundary
  FallbackComponent={ErrorFallback}
  onReset={() => {
    queryClient.resetQueries();     // 清掉缓存的坏数据
    setInput("");                   // 重置可能导致错误的输入
  }}
  resetKeys={[route.pathname]}      // 路由变化时自动重置
>

// 1. 渲染错误 —— 错误边界
componentDidCatch(error, info) {
  report(error, { componentStack: info.componentStack });
}
 
// 2. 未捕获的同步错误
window.addEventListener("error", (e) => {
  report(e.error ?? new Error(e.message), { source: "window.error" });
});
 
// 3. 未处理的 Promise 拒绝
window.addEventListener("unhandledrejection", (e) => {
  report(e.reason, { source: "unhandledrejection" });
});

type ErrorReport = {
  message: string;
  stack?: string;
  componentStack?: string;   // React 特有，能定位到具体组件
  url: string;
  userAgent: string;
  userId?: string;
  release: string;           // 版本号，用于关联 sourcemap
  breadcrumbs: Action[];     // 出错前用户做了什么
  timestamp: number;
};

// 危险
<span>{user.profile.city}</span>
 
// 安全
<span>{user?.profile?.city ?? "未填写"}</span>

// 接口返回 null 时崩溃
{data.items.map(...)}
 
// 安全
{(data?.items ?? []).map(...)}

const user = JSON.parse(raw) as User;   // TS 相信了你，运行时不保证

// 用类型保证：只有 success 状态下才能访问 data
type Result =
  | { status: "loading" }
  | { status: "error"; message: string }
  | { status: "success"; data: Data };

// 事件处理统一包一层
function safeHandler<T extends unknown[]>(fn: (...args: T) => void) {
  return (...args: T) => {
    try {
      fn(...args);
    } catch (e) {
      report(e);
      toast.error("操作失败");
    }
  };
}
 
<button onClick={safeHandler(handleDelete)}>删除</button>