improved error boundary

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,6 +106,7 @@ export default function Screen() {
 
   return (
     <div {...getRootProps()}>
+      <ErrorBoundary>
         <ToolBarDiv theme={theme}>
           <ToolBar toolbarPortalRef={toolbarPortalRef} />
         </ToolBarDiv>
@@ -139,6 +140,7 @@ export default function Screen() {
         <MenuLayer />
 
         <DragAndDropFileTarget inputProps={getInputProps()} isDragActive={isDragActive} />
+      </ErrorBoundary>
     </div>
   );
 }

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 (
+    <div>
+      <ErrorInfo message={message} />
+      <WideButton type="button" value="Reload app" onClick={handleReload} />
+      <WideButton type="button" value="Clear and reload" onClick={handleClearReload} />
+      <Info>
+        If reloading doesn&apos;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. <br />
+        If you see this error in the tab, closing the tab should solve the problem.
+      </Info>
+      <Stack>{_.isString(error.stack) ? error.stack : null}</Stack>
+    </div>
+  );
+}
 
 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 (
-        <div>
-          <ErrorInfo message={message} />;
-        </div>
-      );
+      return <ErrorScreen error={this.state.error} />;
     }
     return this.props.children;
   }
 }
+
+export function ErrorBoundaryTest({ children }) {
+  let error;
+  try {
+    const x = 1;
+    // @ts-ignore
+    x.log();
+  } catch (err) {
+    error = err;
+  }
+  return <ErrorScreen error={error} />;
+}