React应用中避免白屏现象的方法小结

function MyComponent() {
  try {
    // 可能抛出错误的代码
    const result = someFunctionThatMightThrow();
    return <div>{result}</div>;
  } catch (error) {
    console.error("捕获到错误", error);
    return <div>发生错误，请重试。</div>;
  }
}

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

  static getDerivedStateFromError(error) {
    // 更新state使下一次渲染能够显示降级后的UI
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // 你同样可以将错误日志上报给服务器
    logErrorToMyService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // 你可以自定义降级后的UI并渲染
      return <h1>对不起，发生了一些错误。</h1>;
    }

    return this.props.children; 
  }
}

<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>

window.addEventListener('error', (event) => {
  console.error("全局错误捕获:", event.error);
});

window.addEventListener('unhandledrejection', (event) => {
  console.error("未处理的Promise拒绝:", event.reason);
});