From 72cc510c64970543fe022e3299e63017f190d4b4 Mon Sep 17 00:00:00 2001
From: Jan Prochazka <jan.prochazka@gmail.com>
Date: Mon, 25 Jan 2021 17:20:17 +0100
Subject: [PATCH] improved error boundary

---
 packages/web/src/Screen.js                | 68 ++++++++++----------
 packages/web/src/utility/ErrorBoundary.js | 78 +++++++++++++++++++----
 2 files changed, 101 insertions(+), 45 deletions(-)

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 (
     <div {...getRootProps()}>
-      <ToolBarDiv theme={theme}>
-        <ToolBar toolbarPortalRef={toolbarPortalRef} />
-      </ToolBarDiv>
-      <IconBar theme={theme}>
-        <WidgetIconPanel />
-      </IconBar>
-      {!!currentWidget && (
-        <LeftPanel theme={theme}>
-          <ErrorBoundary>
-            <WidgetContainer />
-          </ErrorBoundary>
-        </LeftPanel>
-      )}
-      {!!currentWidget && (
-        <ScreenHorizontalSplitHandle
-          onMouseDown={onSplitDown}
-          theme={theme}
-          style={{ left: leftPanelWidth + dimensions.widgetMenu.iconSize }}
-        />
-      )}
-      <TabsPanelContainer contentLeft={contentLeft} theme={theme}>
-        <TabsPanel></TabsPanel>
-      </TabsPanelContainer>
-      <BodyDiv contentLeft={contentLeft} theme={theme}>
-        <TabContent toolbarPortalRef={toolbarPortalRef} />
-      </BodyDiv>
-      <StausBarContainer theme={theme}>
-        <StatusBar />
-      </StausBarContainer>
-      <ModalLayer />
-      <MenuLayer />
+      <ErrorBoundary>
+        <ToolBarDiv theme={theme}>
+          <ToolBar toolbarPortalRef={toolbarPortalRef} />
+        </ToolBarDiv>
+        <IconBar theme={theme}>
+          <WidgetIconPanel />
+        </IconBar>
+        {!!currentWidget && (
+          <LeftPanel theme={theme}>
+            <ErrorBoundary>
+              <WidgetContainer />
+            </ErrorBoundary>
+          </LeftPanel>
+        )}
+        {!!currentWidget && (
+          <ScreenHorizontalSplitHandle
+            onMouseDown={onSplitDown}
+            theme={theme}
+            style={{ left: leftPanelWidth + dimensions.widgetMenu.iconSize }}
+          />
+        )}
+        <TabsPanelContainer contentLeft={contentLeft} theme={theme}>
+          <TabsPanel></TabsPanel>
+        </TabsPanelContainer>
+        <BodyDiv contentLeft={contentLeft} theme={theme}>
+          <TabContent toolbarPortalRef={toolbarPortalRef} />
+        </BodyDiv>
+        <StausBarContainer theme={theme}>
+          <StatusBar />
+        </StausBarContainer>
+        <ModalLayer />
+        <MenuLayer />
 
-      <DragAndDropFileTarget inputProps={getInputProps()} isDragActive={isDragActive} />
+        <DragAndDropFileTarget inputProps={getInputProps()} isDragActive={isDragActive} />
+      </ErrorBoundary>
     </div>
   );
 }
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 (
+    <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} />;
+}