diff --git a/app/client/src/AppErrorBoundry.tsx b/app/client/src/AppErrorBoundry.tsx new file mode 100644 index 0000000000..7d8aded7a4 --- /dev/null +++ b/app/client/src/AppErrorBoundry.tsx @@ -0,0 +1,72 @@ +import React, { Component } from "react"; +import styled from "styled-components"; +import AppCrashImage from "assets/images/404-image.png"; +import * as Sentry from "@sentry/react"; +import log from "loglevel"; + +const Wrapper = styled.div` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + height: calc(100vh - ${props => props.theme.headerHeight}); + .bold-text { + font-weight: ${props => props.theme.fontWeights[3]}; + font-size: 24px; + } + .page-unavailable-img { + width: 35%; + } + .button-position { + margin: auto; + } +`; + +const RetryButton = styled.button` + background-color: #f3672a; + color: white; + height: 40px; + width: 300px; + border: none; + cursor: pointer; + font-weight: 600; + font-size: 17px; +`; + +class AppErrorBoundary extends Component { + state = { + hasError: false, + }; + + componentDidCatch(error: Error, errorInfo: React.ErrorInfo) { + log.error({ error, errorInfo }); + Sentry.captureException(error); + this.setState({ + hasError: true, + }); + } + + render() { + if (this.state.hasError) { + return ( + + App crashed +
+

Oops! Something went wrong

+

+ Please try again using the button below.
+ If the issue persists, please contact us +

+ window.location.reload()}> + {"Retry"} + +
+
+ ); + } + return this.props.children; + } +} + +export default AppErrorBoundary; diff --git a/app/client/src/index.tsx b/app/client/src/index.tsx index 8ff06e6d5c..1344d1b60e 100755 --- a/app/client/src/index.tsx +++ b/app/client/src/index.tsx @@ -15,6 +15,7 @@ import { connect } from "react-redux"; import { AppState } from "reducers"; import { setThemeMode } from "actions/themeActions"; import { ThemeMode } from "reducers/uiReducers/themeReducer"; +import AppErrorBoundary from "./AppErrorBoundry"; appInitializer(); const App = () => { @@ -48,7 +49,9 @@ class ThemedApp extends React.Component<{ autoClose={5000} closeButton={false} /> - + + + ); }