Frontend Academy · 课时

错误边界

使用 componentDidCatch 和 getDerivedStateFromError 实现基于类的错误边界，防止未捕获的渲染错误导致整个应用崩溃。

错误边界 是 CoddyKit 上的免费 Frontend Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

为什么需要错误边界

默认情况下，渲染期间、生命周期方法中或构造函数中出现的未捕获错误会导致整个 React 树崩溃。错误边界可以捕获子树中的这些错误，让您改为渲染 fallback。

仅限类组件

错误边界必须是类组件（即使到了 2026 年仍然如此，目前还没有等价的钩子）。像 react-error-boundary 这样的库提供了 useErrorBoundary 钩子。

getDerivedStateFromError

后代组件抛出错误时会调用的静态方法。请返回一次状态更新，以触发 fallback 渲染。

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

使用 componentDidCatch 记录日志

使用 componentDidCatch 将错误记录到服务（Sentry、Datadog）中，它会同时获得错误和 React 组件堆栈。

componentDidCatch(error, errorInfo) {
  Sentry.captureException(error, {
    contexts: { react: { componentStack: errorInfo.componentStack } }
  });
}

包装应用根组件

使用错误边界包装顶层 App，以防止出现崩溃白屏。

<ErrorBoundary fallback={<GlobalErrorPage />}>
  <App />
</ErrorBoundary>

为每个路由或小部件设置细粒度边界

全局边界是最低要求。请为每个路由添加边界，这样某个区域崩溃时就不会清空整个应用。

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/dashboard" element={
    <ErrorBoundary fallback={<DashboardError />}>
      <Dashboard />
    </ErrorBoundary>
  } />
</Routes>

错误边界无法捕获的错误

错误边界无法捕获：事件处理程序中的错误、异步代码（setTimeout、Promise）中的错误、SSR 期间抛出的错误，以及边界自身中的错误。请在这些位置使用 try/catch。

事件处理程序错误

请将事件处理程序包装在 try/catch 中，并调用手动的 reportError 函数。

function Button() {
  function onClick() {
    try {
      riskyOperation();
    } catch (err) {
      reportError(err);
      toast.error('Something went wrong');
    }
  }
  return <button onClick={onClick}>Click</button>;
}

react-error-boundary 库

社区软件包 react-error-boundary 提供了适合函数组件的 API，并支持重置。

import { ErrorBoundary } from 'react-error-boundary';

<ErrorBoundary
  fallbackRender={({ error, resetErrorBoundary }) => (
    <div>
      <p>Error: {error.message}</p>
      <button onClick={resetErrorBoundary}>Try again</button>
    </div>
  )}
  onReset={() => refetch()}
>
  <DataView />
</ErrorBoundary>

恢复时重置

请提供恢复方式（重试按钮、切换路由）。边界应重置其状态，以停止显示后备界面。

class ErrorBoundary extends React.Component {
  state = { hasError: false };
  static getDerivedStateFromError() { return { hasError: true }; }
  reset = () => this.setState({ hasError: false });
  render() {
    if (this.state.hasError) {
      return <button onClick={this.reset}>Retry</button>;
    }
    return this.props.children;
  }
}

开发环境与生产环境

在开发环境中，即使有边界，React 仍会渲染红色错误覆盖层——这是有意为之。在生产环境中，只会显示边界的后备界面。

最佳实践

1）在 app 根部设置全局边界。2）设置按路由划分的边界。3）在相互独立的小组件周围设置细粒度边界。4）始终记录到跟踪服务。5）显示恢复操作（重试、返回首页）。6）不要静默吞掉错误。

快速检查

React 错误边界无法捕获哪类错误？

回顾：错误边界

带有静态 getDerivedStateFromError + componentDidCatch 的类组件。它包装一个子树，用于捕获渲染时错误。无法捕获事件处理程序、异步代码和 SSR 中的错误。在 app 根部放置全局边界，并额外设置按路由和按组件划分的边界。记录到 Sentry。提供恢复操作。使用 react-error-boundary 库可获得更简洁的使用体验。

常见问题解答

「错误边界」课时是免费的吗？

是的 — 「错误边界」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。

「错误边界」这节课中我会学到什么？

使用 componentDidCatch 和 getDerivedStateFromError 实现基于类的错误边界，防止未捕获的渲染错误导致整个应用崩溃。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「错误边界」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Frontend Academy 课中编写并运行代码吗？

能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Frontend Academy