React Error Boundary未捕获内层组件抛出错误的问题排查

你的代码存在几个关键问题，导致错误边界无法捕获内层组件抛出的错误，具体如下：

1. React组件名必须大写开头 #

React规定自定义组件名必须以大写字母开头，小写名称会被识别为原生HTML标签，不会执行你的组件逻辑。你代码里的studentDetails和studentContacts都是小写，这会让React跳过自定义组件的渲染，错误边界实际包裹的是不存在的原生标签，自然无法捕获组件内的错误。

修改方法：将组件名改为大写开头，使用时同步调整：

<ErrorBoundary FallbackComponent={errorFallback}>
  <StudentDetails>
      <StudentContacts />
  </StudentDetails>
</ErrorBoundary>

2. studentContacts组件内的语法错误 #

你的studentContacts组件存在多处语法问题，这些问题会导致组件无法正常编译，甚至在错误抛出前就终止执行：

• 参数名in是JavaScript关键字，不能用作变量名，改为input或其他合法名称
• input变量未定义，需改为props.input（假设父组件传递了该属性）
• JSX标签未闭合，<label>缺少对应的</label>

修正后的StudentContacts组件：

function StudentContacts(props) {
  function formatContacts(input) {
    throw Error("Test error occured in StudentContacts-formatContacts");
  }
  return <label>{formatContacts(props.input)}</label>;
}
export default StudentContacts;

3. 确认错误属于渲染阶段同步错误 #

react-error-boundary仅能捕获渲染阶段的同步错误，如果错误在异步操作（如setTimeout、Promise回调）中抛出，错误边界无法捕获。你的代码是在渲染时调用formatContacts，属于渲染阶段错误，修正上述问题后即可被错误边界捕获。

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