this repo has no description
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;