import * as React from 'react' ; export interface ErrorBoundaryProps { name : string ; } export interface ErrorBoundaryState { errorMessage ? : string ; } export interface ErrorMessageProps { error : string ; patternName : string ; } export class PreviewComponentError extends React . Component < ErrorBoundaryProps , ErrorBoundaryState > { public state = { errorMessage : '' } ; public componentDidCatch ( error ) { this . setState ( { errorMessage : error . message } ) ; } public render ( ) { if ( this . state . errorMessage ) { return < ErrorMessage patternName = { this . props . name } error = { this . state . errorMessage } / > ; } return this . props . children as JSX . Element ; } } const ErrorMessage = props => ( < div style = { { backgroundColor : 'rgb(240, 40, 110)' , color : 'white' , padding : '12px 15px' , textAlign : 'center' } } > < p style = { { margin : '0' , fontFamily : '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"' , fontSize : '15px' , lineHeight : '22px' } } > { `<${ props . patternName }/> failed to render: ${ props . error }` } < /p> < /div>);