Add error boundary (#421)

This commit is contained in:
Reckless_Satoshi
2023-04-15 18:47:46 +00:00
committed by GitHub
parent da3c7b256e
commit a16af276c5
2 changed files with 66 additions and 11 deletions

View File

@ -12,6 +12,7 @@ import i18n from './i18n/Web';
import { systemClient } from './services/System'; import { systemClient } from './services/System';
import { Settings } from './models'; import { Settings } from './models';
import ErrorBoundary from './components/ErrorBoundary';
const makeTheme = function (settings: Settings) { const makeTheme = function (settings: Settings) {
const theme: Theme = createTheme({ const theme: Theme = createTheme({
@ -40,17 +41,19 @@ const App = (): JSX.Element => {
}, []); }, []);
return ( return (
<Suspense fallback='loading language'> <ErrorBoundary>
<I18nextProvider i18n={i18n}> <Suspense fallback='loading language'>
<ThemeProvider theme={theme}> <I18nextProvider i18n={i18n}>
<AppContextProvider settings={settings} setSettings={setSettings}> <ThemeProvider theme={theme}>
<CssBaseline /> <AppContextProvider settings={settings} setSettings={setSettings}>
{window.NativeRobosats === undefined ? <UnsafeAlert /> : <TorConnectionBadge />} <CssBaseline />
<Main /> {window.NativeRobosats === undefined ? <UnsafeAlert /> : <TorConnectionBadge />}
</AppContextProvider> <Main />
</ThemeProvider> </AppContextProvider>
</I18nextProvider> </ThemeProvider>
</Suspense> </I18nextProvider>
</Suspense>
</ErrorBoundary>
); );
}; };

View File

@ -0,0 +1,52 @@
import React, { Component } from 'react';
interface ErrorBoundaryProps {
children: React.ReactNode;
}
interface ErrorBoundaryState {
hasError: boolean;
error: Error;
errorInfo: React.ErrorInfo;
}
export default class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
constructor(props: ErrorBoundaryProps) {
super(props);
this.state = {
hasError: false,
error: { name: '', message: '' },
errorInfo: { componentStack: '' },
};
}
componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
console.error(error, errorInfo);
this.setState({ hasError: true, error, errorInfo });
setTimeout(() => {
window.location.reload();
}, 10000);
}
render() {
if (this.state.hasError) {
return (
<div>
<h1>Something went wrong. Restarting app in 10 seconds...</h1>
<p>
<b>Error:</b> {this.state.error.name}
</p>
<p>
<b>Error message:</b> {this.state.error.message}
</p>
<p>
<b>Error cause:</b> {this.state.error.cause}
</p>
<p>
<b>Error component stack:</b> {this.state.errorInfo.componentStack}
</p>
</div>
);
}
return this.props.children;
}
}