this repo has no description
at develop 1.4 kB view raw
1import React from "@moonlight-mod/wp/react"; 2import { ErrorBoundaryProps, ErrorBoundaryState } from "@moonlight-mod/types/coreExtensions/common"; 3 4const logger = moonlight.getLogger("ErrorBoundary"); 5 6class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> { 7 constructor(props: ErrorBoundaryProps) { 8 super(props); 9 this.state = { 10 errored: false, 11 error: undefined, 12 componentStack: undefined 13 }; 14 } 15 16 static getDerivedStateFromError(error: Error) { 17 return { 18 errored: true, 19 error 20 }; 21 } 22 23 componentDidCatch(error: Error, { componentStack }: { componentStack: string }) { 24 logger.error(`${error}\n\nComponent stack:\n${componentStack}`); 25 this.setState({ error, componentStack }); 26 } 27 28 render() { 29 const { noop, fallback: FallbackComponent, children, message } = this.props; 30 const { errored, error, componentStack } = this.state; 31 32 if (FallbackComponent) return <FallbackComponent children={children} {...this.state} />; 33 34 if (errored) { 35 return noop ? null : ( 36 <div className={`moonlight-error-boundary`}> 37 <h3>{message ?? "An error occurred rendering this component:"}</h3> 38 <code className="hljs">{`${error}\n\nComponent stack:\n${componentStack}`}</code> 39 </div> 40 ); 41 } 42 43 return children; 44 } 45} 46 47export default ErrorBoundary;