import React from "react";
import { FEAGlobals } from "../../../common/Globals";
/**
 * Something like a try catch in React component form with some exceptions. Catches Errors and logs them to the central
 * logger. Prevents uncaught exceptions on the render of child components from unintentionally breaking the entire UI.
 * Has the added benefit of sending the errors to the Central Logger
 *
 * Note: The exceptions are that it not catch errors in Event handlers and Asynchronous code.
 * Note: This does not catch errors in the current component directly, only child components. See below for example
 *
 * Eg: WON'T WORK
 *
 * const ContainerComponent = ({test}:any) => <ErrorBoundary><div>{test.undefined.length}</div></ErrorBoundary>
 *
 * WILL WORK:
 * const BrokenComponent = ({test}:any) => <div>{test.undefined.length}</div>
 * const ContainerComponent = ({test}:any) => <ErrorBoundary><BrokenComponent test={test}/></ErrorBoundary>
 *
 * @see https://reactjs.org/docs/error-boundaries.html for more information on Error Boundaries
 */
export class ErrorBoundary extends React.Component {
    constructor(props) {
        super(props);
        this.state = { hasError: false };
    }
    static getDerivedStateFromError() {
        // Update state so the next render will show the fallback UI.
        return { hasError: true };
    }
    componentDidCatch(error, errorInfo) {
        // Log the error to the dev tools where developers will expect it but also send it to the central logger
        console.error(error, errorInfo);
        FEAGlobals.FSBL.Clients.Logger.system.error(error, errorInfo);
    }
    render() {
        var _a;
        if (this.state.hasError) {
            // Render custom fallback UI or default to nothing
            return (_a = this.props.fallBackUI) !== null && _a !== void 0 ? _a : React.createElement(React.Fragment, null);
        }
        return this.props.children;
    }
}
//# sourceMappingURL=ErrorBoundary.js.map