React Error Boundaries: Chặn đứng 'Màn hình trắng'

import { ErrorBoundary } from "react-error-boundary";

// 1. Fallback Component (Là Function Component bình thường)
// Nhận props { error, resetErrorBoundary }
function ErrorFallback({ error, resetErrorBoundary }) {
  return (
    <div role="alert" className="p-4 bg-red-100 text-red-900 rounded">
      <p className="font-bold">Oops! Có lỗi xảy ra:</p>
      <pre className="text-sm">{error.message}</pre>
      
      {/* Nút Reset giúp user thử lại mà không cần F5 trang */}
      <button 
        onClick={resetErrorBoundary}
        className="mt-2 px-4 py-2 bg-red-600 text-white rounded"
      >
        Thử lại
      </button>
    </div>
  );
}

// 2. Wrap Component
function App() {
  return (
    // onReset: Nơi bạn reset state của app về ban đầu để component con render lại sạch sẽ
    <ErrorBoundary 
      FallbackComponent={ErrorFallback}
      onReset={() => {
        // Ví dụ: Reset form, clear cache
        console.log("Resetting app state...");
      }}
    >
      <ProductList />
    </ErrorBoundary>
  );
}

import { useErrorBoundary } from "react-error-boundary";

function LoginButton() {
  const { showBoundary } = useErrorBoundary();

  const handleClick = async () => {
    try {
      await loginAPI();
    } catch (error) {
      // 🚀 Trick: Ném lỗi vào vòng Render để Error Boundary trên cao bắt được
      showBoundary(error);
    }
  };

  return <button onClick={handleClick}>Login</button>;
}

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // Gửi log lỗi lên Server/Sentry
    logErrorToService(error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      return this.props.fallback;
    }
    return this.props.children;
  }
}