KC-MiddlePlatform/src/pages/login/ErrorBoundary.tsx

/*
 * @Author: code4eat awesomedema@gmail.com
 * @Date: 2024-12-11 11:07:41
 * @LastEditors: code4eat awesomedema@gmail.com
 * @LastEditTime: 2024-12-11 11:08:26
 * @FilePath: /KC-MiddlePlatform/src/pages/login/ErrorBoundary.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React from 'react';

interface ErrorBoundaryState {
  hasError: boolean;
  error: Error | null;
  errorInfo: React.ErrorInfo | null;
}

export class ErrorBoundary extends React.Component<{}, ErrorBoundaryState> {
  constructor(props: {}) {
    super(props);
    this.state = { hasError: false, error: null, errorInfo: null };
  }

  static getDerivedStateFromError(error: Error) {
    // 当子组件抛出错误时更新 state，用于 fallback UI 的显示
    return { hasError: true, error: error };
  }

  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
    // 这里可以将错误信息上报到日志分析服务
    console.error('ErrorBoundary caught an error:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // 这里展示一个简短的 fallback UI
      return <div>很抱歉，页面加载出现错误。</div>;
    }
    return this.props.children;
  }
}