mirror of
https://github.com/RoboSats/robosats.git
synced 2025-07-26 06:03:18 +00:00
Add error boundary (#421)
This commit is contained in:
@ -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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
52
frontend/src/components/ErrorBoundary.tsx
Normal file
52
frontend/src/components/ErrorBoundary.tsx
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
Reference in New Issue
Block a user