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 ; +}