// Error Boundary : DOIT être une class component -- pas d'équivalent hook natif à ce jour
import { Component } from "react";

class ErrorBoundary extends Component {
    constructor(props) {
        super(props);
        this.state = { aUneErreur: false, erreur: null };
    }

    // déclenché pendant le rendu -- met à jour le state pour afficher le fallback au prochain rendu
    static getDerivedStateFromError(erreur) {
        return { aUneErreur: true, erreur };
    }

    // déclenché APRÈS le rendu -- effet de bord : logger l'erreur vers un service externe
    componentDidCatch(erreur, infos) {
        console.error("Erreur capturée :", erreur, infos.componentStack);
        envoyerVersSentry(erreur, infos);
    }

    render() {
        if (this.state.aUneErreur) {
            return this.props.fallback ?? <p>Une erreur est survenue.</p>;
        }
        return this.props.children;
    }
}

// Utilisation : englober des zones précises, pas forcément toute l'app d'un bloc
function App() {
    return (
        <div>
            <Header /> {/* si Header plante, tout le reste de l'app disparaît aussi -- hors boundary */}

            <ErrorBoundary fallback={<PageErreurGenerique />}>
                <TableauDeBord />
            </ErrorBoundary>

            <ErrorBoundary fallback={<p>Widget indisponible</p>}>
                <WidgetMeteoTiers /> {/* un composant tiers instable, isolé, n'affecte pas le reste */}
            </ErrorBoundary>
        </div>
    );
}

// Ce qu'un Error Boundary NE capture PAS -- limitations importantes à connaître
// 1. Erreurs dans des handlers d'événements (try/catch classique nécessaire)
function Bouton() {
    function gererClic() {
        try {
            operationRisquee();
        } catch (erreur) {
            console.error(erreur); // Error Boundary ne verra JAMAIS cette erreur
        }
    }
    return <button onClick={gererClic}>Cliquer</button>;
}

// 2. Erreurs asynchrones (setTimeout, promesses non attendues dans un effet)
useEffect(() => {
    fetch("/api/donnees").catch((erreur) => {
        // idem : à gérer manuellement, un Error Boundary ne l'attrape pas
        console.error(erreur);
    });
}, []);

// 3. Erreurs côté serveur (SSR) -- nécessitent leur propre gestion selon le framework
// 4. Erreurs DANS l'Error Boundary lui-même

// react-error-boundary : librairie utilitaire courante, avec reset et hooks
import { ErrorBoundary } from "react-error-boundary";

function FallbackErreur({ error, resetErrorBoundary }) {
    return (
        <div role="alert">
            <p>Erreur : {error.message}</p>
            <button onClick={resetErrorBoundary}>Réessayer</button>
        </div>
    );
}

function App() {
    return (
        <ErrorBoundary
            FallbackComponent={FallbackErreur}
            onReset={() => window.location.reload()}
            onError={(erreur, infos) => envoyerVersSentry(erreur, infos)}
        >
            <TableauDeBord />
        </ErrorBoundary>
    );
}