48 lines
1.2 KiB
TypeScript
48 lines
1.2 KiB
TypeScript
import React from "react";
|
|
import { IconButton } from "./button";
|
|
import GithubIcon from "../icons/github.svg";
|
|
import { ISSUE_URL } from "../constant";
|
|
|
|
interface IErrorBoundaryState {
|
|
hasError: boolean;
|
|
error: Error | null;
|
|
info: React.ErrorInfo | null;
|
|
}
|
|
|
|
export class ErrorBoundary extends React.Component<any, IErrorBoundaryState> {
|
|
constructor(props: any) {
|
|
super(props);
|
|
this.state = { hasError: false, error: null, info: null };
|
|
}
|
|
|
|
componentDidCatch(error: Error, info: React.ErrorInfo) {
|
|
// Update state with error details
|
|
this.setState({ hasError: true, error, info });
|
|
}
|
|
|
|
render() {
|
|
if (this.state.hasError) {
|
|
// Render error message
|
|
return (
|
|
<div className="error">
|
|
<h2>Oops, something went wrong!</h2>
|
|
<pre>
|
|
<code>{this.state.error?.toString()}</code>
|
|
<code>{this.state.info?.componentStack}</code>
|
|
</pre>
|
|
|
|
<a href={ISSUE_URL} className="report">
|
|
<IconButton
|
|
text="Report This Error"
|
|
icon={<GithubIcon />}
|
|
bordered
|
|
/>
|
|
</a>
|
|
</div>
|
|
);
|
|
}
|
|
// if no error occurred, render children
|
|
return this.props.children;
|
|
}
|
|
}
|