48 lines
1.4 kB
1
import React from "@moonlight-mod/wp/react";
2
import { ErrorBoundaryProps, ErrorBoundaryState } from "@moonlight-mod/types/coreExtensions/common";
3
4
const logger = moonlight.getLogger("ErrorBoundary");
5
6
class 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 (noop) return null;
33
if (FallbackComponent) return <FallbackComponent children={children} {...this.state} />;
34
35
if (errored) {
36
return (
37
<div className={`moonlight-error-boundary`}>
38
<h3>{message ?? "An error occurred rendering this component:"}</h3>
39
<code className="hljs">{`${error}\n\nComponent stack:\n${componentStack}`}</code>
40
</div>
41
);
42
}
43
44
return children;
45
}
46
}
47
48
export default ErrorBoundary;
49