diff --git a/packages/web/src/Screen.js b/packages/web/src/Screen.js
index 7db822a8..db7ebae6 100644
--- a/packages/web/src/Screen.js
+++ b/packages/web/src/Screen.js
@@ -16,7 +16,7 @@ import DragAndDropFileTarget from './DragAndDropFileTarget';
import { useUploadsZone } from './utility/UploadsProvider';
import useTheme from './theme/useTheme';
import { MenuLayer } from './modals/showMenu';
-import ErrorBoundary from './utility/ErrorBoundary';
+import ErrorBoundary, { ErrorBoundaryTest } from './utility/ErrorBoundary';
const BodyDiv = styled.div`
position: fixed;
@@ -106,39 +106,41 @@ export default function Screen() {
return (
-
-
-
-
-
-
- {!!currentWidget && (
-
-
-
-
-
- )}
- {!!currentWidget && (
-
- )}
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+ {!!currentWidget && (
+
+
+
+
+
+ )}
+ {!!currentWidget && (
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
-
+
+
);
}
diff --git a/packages/web/src/utility/ErrorBoundary.js b/packages/web/src/utility/ErrorBoundary.js
index afe24816..da309d36 100644
--- a/packages/web/src/utility/ErrorBoundary.js
+++ b/packages/web/src/utility/ErrorBoundary.js
@@ -1,5 +1,58 @@
import React from 'react';
+import _ from 'lodash';
import ErrorInfo from '../widgets/ErrorInfo';
+import styled from 'styled-components';
+import localforage from 'localforage';
+import FormStyledButton from '../widgets/FormStyledButton';
+
+const Stack = styled.pre`
+ margin-left: 20px;
+`;
+
+const WideButton = styled(FormStyledButton)`
+ width: 150px;
+`;
+
+const Info = styled.div`
+ margin: 20px;
+`;
+
+export function ErrorScreen({ error }) {
+ let message;
+ try {
+ message = 'Error: ' + (error.message || error).toString();
+ } catch (e) {
+ message = 'DbGate internal error detected';
+ }
+
+ const handleReload = () => {
+ window.location.reload();
+ };
+
+ const handleClearReload = async () => {
+ localStorage.clear();
+ try {
+ await localforage.clear();
+ } catch (err) {
+ console.error('Error clearing app data', err);
+ }
+ window.location.reload();
+ };
+
+ return (
+
+
+
+
+
+ If reloading doesn't help, you can try to clear all browser data (opened tabs, history of opened windows)
+ and reload app. Your connections and saved files are not touched by this clear operation.
+ If you see this error in the tab, closing the tab should solve the problem.
+
+ {_.isString(error.stack) ? error.stack : null}
+
+ );
+}
export default class ErrorBoundary extends React.Component {
constructor(props) {
@@ -23,19 +76,20 @@ export default class ErrorBoundary extends React.Component {
}
render() {
if (this.state.hasError) {
- let message;
- try {
- message = (this.state.error.message || this.state.error).toString();
- } catch (e) {
- message = 'Error detected';
- }
- // You can render any custom fallback UI
- return (
-
- ;
-
- );
+ return ;
}
return this.props.children;
}
}
+
+export function ErrorBoundaryTest({ children }) {
+ let error;
+ try {
+ const x = 1;
+ // @ts-ignore
+ x.log();
+ } catch (err) {
+ error = err;
+ }
+ return ;
+}