Mirror/robosats
1
0
Fork 0
mirror of https://github.com/RoboSats/robosats.git synced 2025-01-18 12:11:35 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add error boundary (#421)

Browse Source
This commit is contained in:
Reckless_Satoshi 2023-04-15 18:47:46 +00:00 committed by GitHub
parent da3c7b256e
commit a16af276c5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 66 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
frontend/src/App.tsx
View File

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

52
frontend/src/components/ErrorBoundary.tsx Normal file
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;
}
}