NextJS自定义ErrorShield错误边界无法捕获部分渲染错误

现有实现核心缺陷 #

当前编写的ErrorShield组件不符合React错误边界的官方实现规范，存在3个直接导致漏捕获的问题：

• 类错误边界组件Catch未实现static getDerivedStateFromError()生命周期方法，依赖componentDidCatch中触发的异步state更新标记错误状态，存在严重竞态问题
• 错误状态存储在外层函数组件ErrorShield中，通过props跨层级传递给Catch组件，进一步拉长状态更新链路，放大竞态影响
• 将控制台打印日志的副作用逻辑放在render方法中执行，违反React render函数必须为纯函数的要求，可能引发不可预期的执行问题

现象解释 #

测试中遇到的不同错误捕获表现，本质都是上述竞态问题导致的：

• 当把map回调参数错写为ttitle时，错误发生在map迭代回调执行阶段，此时外层JSX表达式已经完成计算，错误抛出时机稍晚，异步state更新刚好完成，因此可以被捕获
• 当把遍历数组错写为ttitles时，引用错误在JSX表达式计算的最外层立即抛出，此时异步state更新还未执行，React检测到错误边界没有同步标记错误状态，直接将错误抛到全局
• ContentCarrusel组件测试时两类错误都能被捕获，属于偶然现象：大概率是该组件渲染时机晚于ErrorShield组件挂载完成时机，setState更新优先级足够高没有触发竞态，不代表实现稳定可靠

修复方案 #

按照React官方规范重构错误边界组件，将错误状态收敛到类组件内部，通过getDerivedStateFromError同步更新错误状态触发降级，将日志上报等副作用放到componentDidCatch中执行，修复后代码如下：

import { Component } from "react";

export class Catch extends Component {
  // 错误发生时同步更新内部state，触发降级渲染
  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }

  state = {
    hasError: false,
    error: null,
    errorInfo: null
  };

  componentDidCatch(error, info) {
    const { component, onError } = this.props;
    this.setState({ errorInfo: info });
    
    // 日志打印、错误上报逻辑放在这里执行
    console.groupCollapsed(
      `%c ⛔ Error in the component: ${component} `,
      "color:#ff3333;"
    );
    console.groupCollapsed("%c 📖 Props:", "color:#039BE5;");
    console.table(this.props.children?.props);
    console.groupEnd();
    console.groupCollapsed("%c 🚨 Error:", "color:#F44336;");
    console.log(error);
    console.log(info.componentStack);
    console.groupEnd();
    console.groupEnd();

    if (typeof onError === "function") {
      onError({
        hasError: true,
        error,
        info,
        component
      });
    }
  }

  render() {
    const { hasError } = this.state;
    const { children, fallback = null } = this.props;
    return hasError ? fallback : children;
  }
}

const ErrorShield = (props) => {
  const { children, component, fallback, onError } = props;
  return (
    <Catch
      component={component}
      fallback={fallback}
      onError={onError}
    >
      {children}
    </Catch>
  );
};

export default ErrorShield;

额外注意事项 #

• 错误边界只能捕获子组件渲染阶段、生命周期、同步执行代码抛出的错误，事件回调、setTimeout/Promise等异步代码抛出的错误无法被捕获，这是React本身的设计限制
• 如果使用NextJS App Router，服务端组件抛出的错误无法被客户端错误边界捕获，需要使用框架提供的error.js文件做统一降级处理

内容的提问来源于stack exchange，提问作者Santamou