编译成功但浏览器崩溃，ContactCard.js文件问题排查求助

一、定位ContactCard.js崩溃根因 #

编译通过仅代表语法符合规范，运行时崩溃属于逻辑类错误，优先排查以下高频问题点：

• 检查是否存在无限渲染循环：比如useEffect依赖数组包含每次渲染都会生成新引用的变量（如未用useMemo/useCallback包裹的对象、函数，或直接写在内联的字面量），导致useEffect反复触发state更新，最终页面爆栈崩溃
• 检查是否有未捕获的空值引用：比如直接访问contact.info.phone但contact或info可能为undefined，未加可选链contact?.info?.phone做空值兼容，抛出未捕获的引用错误
• 检查是否存在无终止条件的递归：如果ContactCard内部嵌套调用自身，没有设置停止递归的判断逻辑，会导致调用栈溢出

二、实现Error Boundary做错误兜底 #

React的Error Boundary可以捕获子组件树的运行时错误，避免错误扩散导致整个页面崩溃，同时可以打印错误堆栈辅助定位问题，实现步骤如下：

1. 新建ErrorBoundary.js组件，代码如下：

import React from 'react';

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

  static getDerivedStateFromError(error) {
    // 出错时更新状态，用于渲染降级UI
    return { hasError: true, errorMessage: error.message };
  }

  componentDidCatch(error, errorInfo) {
    // 可在此处将错误上报到前端监控平台，方便排查问题
    console.error('组件运行错误：', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // 自定义错误降级展示UI
      return (
        <div style={{ padding: '24px', border: '1px solid #ffccc7', borderRadius: '4px' }}>
          <h3>组件加载失败</h3>
          <p>错误详情：{this.state.errorMessage}</p>
        </div>
      );
    }
    return this.props.children;
  }
}

export default ErrorBoundary;

2. 包裹ContactCard组件使用
   在调用ContactCard的父组件中，用ErrorBoundary包裹组件即可：

import ErrorBoundary from './ErrorBoundary';
import ContactCard from './components/ContactCard';

function App() {
  return (
    <div className="app">
      {/* 其他业务组件 */}
      <ErrorBoundary>
        <ContactCard />
      </ErrorBoundary>
    </div>
  );
}

添加完成后重新运行项目，页面不会直接崩溃，控制台会输出具体的错误堆栈，即可直接定位到ContactCard中的具体报错代码行。

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