import { ErrorInfo , PureComponent , ReactNode } from 'react' ; import { HTTPError } from 'ky' ; import { Message } from 'semantic-ui-react' ; type StatusMessages = { [ status ] : string ; } ; type Props = { statusMessages ? : StatusMessages ; onError ? : ( ) => void ; } ; type State = { hasError : boolean ; error : Error | null ; } ; const DEFAULT_MESSAGES = { 0 : 'サーバエラーです' } ; class ErrorBoundary extends PureComponent < Props , State > { constructor ( props ) { super ( props ) ; this . state = { hasError : false , error : null } ; } static getDerivedStateFromError = ( error ) : State => ( { hasError : true , error , } ) ; componentDidCatch = ( error , info ) : void => { const { onError } = this . props ; if ( onError ) onError ( ) ; console . error ( error , info ) ; } ; render = ( ) : ReactNode => { const { children , statusMessages = { } } = this . props ; const { hasError , error } = this . state ; const messages = { ... DEFAULT_MESSAGES , ... statusMessages } ; if ( hasError ) { const statusCode = ( error as HTTPError ) ?. response ?. status ; if ( statusCode && Object . keys ( messages ) . includes ( String ( statusCode ) ) ) { return < Message warning > { messages [ statusCode ] } < /Message>; } return < Message error > { messages [ 0 ] } < /Message>; } return children ; } ; } export default ErrorBoundary ;