组件错误边界：让图形设计系统更稳定的秘密武器

做图形设计的时候，没人希望页面突然白屏或者卡住。尤其是在用 React 这类前端框架搭建设计工具或可视化编辑器时，一个小组件出问题，整个界面就挂了，用户体验直接崩塌。这时候，“组件错误边界”就成了关键防线。

什么是组件错误边界？

简单说，错误边界是一种特殊的 React 组件，它能捕获其子组件树中任何地方的 JavaScript 错误，记录这些错误，并展示一个备用的 UI，而不是让整个应用崩溃。就像电路里的保险丝，某条线路短路，不会烧掉整个房子。

为什么图形设计项目特别需要它？

想想你正在用一个在线海报编辑器，左边是组件库，中间是画布，右边是属性面板。如果某个动态加载的贴纸组件因为数据异常报错，没加防护的话，可能整个画布直接消失，你辛辛苦苦做的设计全没了。但如果有错误边界包裹贴纸区域，顶多那个贴纸不显示，其他功能照常使用。

怎么写一个错误边界？

在 React 中，只要实现 componentDidCatch 或 static getDerivedStateFromError 这两个生命周期方法之一，就能创建错误边界。下面是个实用例子：

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

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

  componentDidCatch(error, errorInfo) {
    console.log("捕获到错误：", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <div style={{ padding: "20px", color: "red" }}>该组件暂时无法显示</div>;
    }

    return this.props.children;
  }
}

实际应用场景

在图形设计系统中，可以给以下部分加上错误边界：

• 动态组件预览区
• 用户上传的自定义素材渲染
• 第三方图标库嵌入
• 实时协作中的他人操作渲染

比如你在做一个 Figma 插件，里面要渲染用户从 API 拉取的 SVG 图标列表。某些 SVG 可能格式不规范导致解析失败，用错误边界包一层，单个图标出问题也不影响其他人正常浏览和选择。

注意事项

错误边界只能捕获组件渲染和生命周期中的错误，不能捕获异步事件（比如定时器）或事件处理器里的错误。另外，它只对类组件有效，函数组件本身不能作为错误边界，但可以被包裹。

上线前，在开发环境故意抛个错试试，看看错误边界能不能正常接管。别等到用户真遇到了才发现问题。